Whenever you create a new project, you will be redirected to the editor. The editor is where you will spend most of your time creating your storefront. The editor is divided into three main sections. You have the topbar which contains the project name, the option to navigate between pages and the option to publish your project. The sidebar contains all the fragments you can use to build your storefront. The main area is where you will drag and drop fragments into.

​
General Overview

  1. Settings
    The place where you can configure your project, e.g. edit the name, connect a different e-commerce platform, update the logo, link a domain name, manage your subscription, etc.
  2. Page
    Navigation items without a dropdown icon are pages. Clicking on a page will display the fragments that are on that page. The home page is always displayed first and cannot be removed.
  3. Template
    Navigation items with a dropdown icon next to its name are templates. A template defines the layout of a page. You can assign multiple pages to the same template. When you change the template, all pages assigned to that template will be updated.
  4. Add Page/Template
    This button can be used to create a new page or template.
  5. Save Project
    Save your project. Saved changes will not reflect on the live site until you publish.
  6. Publish Project
    Publish your project. This will make your changes live on the site.
  7. Content/Theme Toggle
    Switch between the content and theme editor. The content editor is where you can drag and drop fragments into your project. The theme editor is where you can change the styling of your project.
  8. Page Settings
    The SEO settings of the current page. You can set the title, description, and image of the page. This page is extremely important if you want your site to be found by search engines.
  9. Page Content
    All fragments dropped on the current page are shown here. You can click on any of them to view more details or simply remove them from the page.
  10. Fragment Library
    All available fragments are shown here. You can drag and drop them into the content area to add them to your current page/template.

​
Theme Editor

The theme editor allows you to configure global styling options to your webstore. You can configure the buttons, colors, typography, and container layout/spacing.

  1. Theme Group
    Theming options are grouped into different categories. Clicking on a group will display the options available in that group.
  2. Styles
    This button will trigger a popup with predefined styling options you can use. All are curated by us and are made to help you save time!

​
Content Editor

When clicking on any of the currently active fragments, you are prompted with configuration options. These options may be different for different fragment types. For example, a banner fragment has a title, description, and button text, while a FAQ fragment has a configurable list of questions and answers.

  1. Fragment Name
    The name of the selected fragment. If you hover over this name, you’ll see two additional buttons show up, one to duplicate the fragment and one to remove it.
  2. Fragment Settings
    You can toggle between fragment options and fragment styling. In the options tab, you can configure the content of the fragment, while in the style tab you can configure the styling of the fragment.
  1. Fragment Theme Group
    These style options will override the global theme settings for this specific fragment. This is useful if you want to have a different style for a specific fragment.
  2. Fragment Variant
    Each fragment has different variants or layouts.
QuickstartIntroduction