Use Builder.io¶
Builder.io is an intuitive solution that allows anyone on your team to manage Frontend Application pages without having to rely on developers. As long as Virto Frontend Application has native integration with Builder.io, you can start using it right away:
- Open Platform.
- Click
to open applications menu.
- Click Builder.io. The Builder.io dashboard opens in a new window.
- If required, select a space from the list.
- Add site URL. Go to Settings → Space tab → Site URL → Edit. Paste your site URL, then click Submit.
-
Add preview URL. Go to Content models → Page. Paste your Preview URL, then click Save.
-
Click New entry to create a new page.
-
Open your newly created page. It already contains a header and a footer that maintain the UI and design of the Virto Frontend Application:
The left sidebar contains builder.io components and Virto Commerce custom components. If necessary, users can add their own custom components or edit the existing ones:
For example, you can add an N-pinned products component to a custom category page. You can create fully customized category pages that include not only standard products but also specifically curated products that remain pinned:
Virto Commerce custom components¶
The custom components by Virto include:
-
Category:
-
Products:
-
Slider:
-
Favourite products:
-
VC-container that allows images to be uploaded in a format fully supported by the Frontend Application. It eliminates the need for further resizing to fit other elements:
-
Breadcrumbs.
Add category block with subcategory filters¶
- Add the Category custom component to your field.
- Click Edit.
- Find the Filter field and follow the instruction how to fill it in.
- On your website, open Developer Tools (right-click a page and select Inspect).
- Filter products that are needed in your catalog.
- Go to Network → graphql → operationName: "SearchProducts" → variables → copy filter
- Paste it to the Filter field.
Now you can see your category with the required results.
Demo
Copy components from Figma¶
Thanks to the Builder.io Figma plugin, any user can copy components designed in Figma and paste them into a page edited in Builder.io:
- Run Builder.io plugin in Figma.
- Click on the component you want to copy to your Builder.io edited page.
- Open the Builder.io plugin.
- Click Copy to Builder.
- Open the page you are editing in Builder.io.
-
Press Ctrl+V on the page where you want to paste the copied component.
The selected component has been pasted to your Builder.io edited page.
Customize background color¶
With Builder.io, you can customize both component and section color:
For a solid color throughout, edit the section color:
-
Disable Components-only-mode switch:
-
Create new page.
- Add a section to your new page.
- In the right sidebar, click on the layout tab.
- Click Background and set a color you need.
- Add the required components to your newly created section.
Troubleshooting¶
If you are trying to change the formatting of the header and it does not react, try to refresh your preview.