In this guide, we’ll walk you through the process of creating a new storefront in just a few minutes. We’ll assume you have already created an account and are logged in.

Creating a Project

You will first need to create a new project. To do this, click on the “New Project” button in the top right corner of the dashboard. You’ll be prompted to enter a name for your project and connect an e-commerce platform. At the time of writing, we only support Tebex. Enter your Public API token and click “Connect”. Once connected, hit “Create” and a project will be created for you and you will be redirected to the editor.

It is extremely important to carefully follow the instructions when connecting your e-commerce platform. Failure to do so may result in your project not working as expected.

As soon as the editor is loaded, you will be presented with a blank canvas (or a preset if you selected one on creation). By default, we’ve created a single home page, but you can add custom pages and product/category pages as needed. For an overview of the editor, see the Overview guide.

Adding Fragments

Next up, we are going to add fragments the site. In the left sidebar you will notice a list of fragments (e.g. Banner, Basket, Content, …). Simply drag these fragments onto the canvas to add them to your site.

Now, you may want to customize the fragments to your liking. You can do this by clicking the fragment and changing its properties. For example, you can change questions and answers in the FAQ fragment.

As soon as you are satisfied with the content and have added all fragments that you deem are necessary, it is time to edit the styling of your site. You can set global theme options by navigating to the “Theme” tab at the top of the sidebar.

There are several options available to you, you can edit how buttons should behave, what color scheme to apply, what fonts to use, and more.

Publishing

When you are all satisfied with your site, it is time to get things ready for putting things live. First, you may want to update the site settings and use a subdomain (e.g. my-store.fragmentor.io) or connect a custom domain.

Click on the “Settings” gear icon at the top left next to the “Home” page. This will prompt a modal, navigate to the “Domains” page. Pick any subdomain or custom domain and click the corresponding “Update” button.

Finally, click on the “Publish” button in the top right corner of the editor. Congratulations, you’ve just published your first storefront!