Fragments are the essential building blocks of your website. They are the components that you can drag and drop into your project to build your storefront. Each fragment has its own set of configuration options and styling options. In this guide, we’ll go over how to use and configure them appropriately.

Upon opening the editor, you’ll see the fragment library on the left side of the screen. There are several fragment types available, each one can be used for different purposes, some interact with your e-commerce platform, while others are purely static.

Looking for a fragment, but can’t find it? We’re adding new fragment types and fragment variants every week. If you have specific requests, please let us know.

​
Adding Fragments

To add a fragment to your website, simply drag it from the fragment library onto the main area of the editor. An outline will be shown to indicate where the fragment will be placed. By dragging the fragment over to one side of the outline, you can place it in a column. By dragging the fragment over the center of the outline, you can place it in a row.

Once you’ve added a fragment, you will notice the left sidebar has changed. It shows the specific fragments that were added onto the page. Clicking on any of these fragments will show you the configuration options for that fragment.

​
Editing Fragments

You can edit a fragment by clicking on it, either inside the editor preview or in the left sidebar.

Doing so will open up a set of options that can be configured for that specific fragment type. These options can be different for each fragment type. For example, a content fragment has a title, subtitle and description, while a FAQ fragment has a configurable list of questions and answers.

Besides the options, you can also configure the styling of the fragment. Each fragment has a set of variants to choose from. In the example below, you can see two variants for the content fragment, one with a subtitle below the title and one with a subtitle above the title.

Next to selecting a specific variant, you can also override the global theme settings for the selected fragment. For more information on that, please check out the theme guide.

ThemeBanner