Moving to a MACH (Microservice, API first, Cloud native, and Headless) architecture can seem daunting for any company. There are a lot of moving parts, and bringing it all together to work seamlessly is a huge project. But once the initial integrations and setup are in place, the possibilities and the improvements to working processes far outweigh the initial doubts.
Creating a storefront: the old way
Imagine you work in a fashion retail store as a Merchandising Manager. One day, a large shipment of red T-shirts arrive. Instead of ordering a variety of colors, your manager has accidentally ordered all the same. It’s the end of the month, so you need to make your sales target, and you don’t have time to wait for a new shipment to arrive or send the red T-shirts back. You decide to try and sell the red T-shirts. You change all the windows, so the whole display is red. You change the front of the store so as customers enter, all they see is red. You put up posters and signs saying “Red hot sale” and “I see red.” It takes you 2 hours to do all this, but the results look great. Your manager is happy with the idea, and customers start entering the store and start shopping.
Now imagine trying to do the same thing on your commerce site. You’re using an old system that does everything. Usually, it takes days to update something on your site as you’re dependent on developers, but this is important, so you try to get it done as soon as possible. You create a ticket in Jira with all your requirements. You want to change the whole homepage to only have red products. This will not need any changes to design or layouts, it will only need copy and image updates. Plus, you’d like to add a new area in your navigation that will take customers to a red product category page. So you add all this information into the ticket, including the images and copy that need updating. You give the ticket the highest priority and assign it to the developers.
And then you wait. And wait.
Then you send a Slack message to the team asking if they’ve seen the ticket and what the time frame would be to make your changes. They’re busy working on the next release, and they won’t have time to look at the ticket today. So, you talk to your manager to get them to help put the pressure on. But it’s no use. It can’t be done until at least tomorrow. And then they’ll have to do a release, and one isn’t planned until the day after. You’re frustrated. You try to move quickly but the processes are in the way and you’re dependent on others to do something that should be simple. But that’s the life of a Digital Merchandising Manager, right?
Maybe not anymore.
The headless way of selling
Headless or composable architectures mean that different parts of a commerce site can be managed separately. And depending on the providers of the software, you get certain freedom.
Imagine you’re now using a composable architecture. All your products are in your eCommerce backend for example commercetools. They each have images, product information, and so much more, including a color. So, you decide to create a sale for your red items to help sell the excess stock. You add a new discount of 15% for all your products that have the color red. You can set the time for this discount to apply. So, you set it to go live in 10 minutes, which will give you enough time to do all the editing you need for your commerce site.
Since your frontend is built using Frontastic, you can do this in the Frontastic studio.
- You go to the site builder section and you duplicate the live version of your homepage, as all you need to do is update the image and the copy.
- You open the page builder and upload your new red image and attach it to the main Frontastic component. Then you update the copy and the settings for both the mobile and desktop versions. You also edit your product slider to have a new filter of only red products.
- You preview your changes, first on your desktop, then on your mobile so you can check the interactions in real-time on a real device.
- Then you save your page version and schedule it to go live in 10 minutes. This will give you enough time to create your red products page in the navigation.
- You create a new page folder and then a new page version.
- You add the product listings component with a filter to only show red products from your backend.
- You preview your page and publish it.
- Then you need to go back to your homepage to see the button on your banner to go to your new red product listing page.
As all the information about the discount you’ve already set up comes from backend, you’ve now done all you need to do! Once the 10 minutes have passed, you check all your devices again to make sure it’s working and looking as expected. And it’s all there and updated, exactly as you wanted, without any coding or reliance on another team.
Want to see what that looks like?
Our Lead Editor shows you how to do this in the video below using the example of Frontastic and commercetools:
Speed and agility for commerce teams
Using different headless systems allow teams to optimize how they work. Each can focus on what they do best and can adapt quickly to changing situations. Developers can move away from updating copy and images to creating new features and innovation. While business users can make updates to campaigns and products themselves when they need to. Together, commerce teams can create outstanding and incredible digital experiences super fast thanks to the power of headless.