How do you add the Builderion section component to your store?
Learn how to associate Builderio content with AI Commerce categories and understand its impact on loading speed and search engine visibility.
This guide will walk you through how to use Builderion's section component on your AI Commerce online store pages. It gives you a flexible way to create content – for example, on your homepage or category pages – while maintaining good search engine visibility. It will also explain how your choice affects page loading speed.
Step-by-step instructions
Creating a Section component in Builderio
- Open Builderio and select the project you want.
- Create a new section component (or open an existing one) that you want to use on your AI Commerce page.
- In the component settings, specify which page you want to display it on, for example /category/jeans or /brand/adidas.
- Design and customize the component to meet your page's content needs.
- You can use the component on the homepage and categories, for example. Your integration partner can install this in any path, even in the checkout.
Adding content to a category
- Go to AI Commerce 's category settings (Control Panel: Catalog).
- Open the category or manufacturer you want to edit and look for the option “ Replace Description with Builder.io ”.
- Enable the option to have Builderio's content replace the content of the default WYSIWYG editor used for the description.
- Please note that this additional setting first asks AI Commerce whether to use Builderio content. Only then will the actual content be retrieved from Builderio.
Pay attention to the download speed
- One extra query to the Builderio server adds an average of about 50 milliseconds to the total load time.
- If the category uses AI Commerce 's own content (i.e. you do not select "Replace Description with Builder.io"), this additional delay is naturally eliminated.
- However, Builderio content is now loaded on the server side, which improves search engine visibility (SEO) compared to the previous model, where content was only loaded on the browser side.
Save and test
- Save the category, manufacturer (etc.) setting in the “ Replace Description with Builder.io ” dashboard.
- Go to the public side of the store to check that the content imported by Builderio is displayed correctly.
- Also check page speed and search engine visibility (for example, with the Google Lighthouse tool) if you wish.
Summary
The Builderio section component allows you to easily and flexibly generate content for AI Commerce content pages by replacing descriptions with Builderio-based content from the WYSIWYG editor. This adds one short server call, but the content is processed server-side, so search engine visibility is not affected. Finally, check the functionality and speed of the page so you can optimize the user experience for the best possible result.