Using the page builder

In this article, we'll go through the layout of the page builderpage builder - An interface you work with to build your pages. as well as how to use it.

Layout

Once you've clicked the edit icon on the name of a page versionpage version - A page can have multiple versions and in different states within a page folder, such as draft, scheduled, live, and so on. (or clicked Save when creating a new page version), the page builderpage builder - An interface you work with to build your pages. will open and you'll see a screen similar to the below:

On the left, you have the list of available Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. that you can drag into a section (for example, HEAD or MAIN) on the page. The list is searchable so you can easily find what you're looking for:

The middle section is the layout of your page and where you add and order your Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. to build your page:

On the right is the preview section. By clicking the link (or typing it into a browser), you can see the changes you make within your page instantly on any browser on any device. If you scan the QR code on your mobile device, it'll open straight away. You can also access the preview at any time by clicking the Preview button on the top right of your screen:

If you click on a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. in the middle section, or you drag a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. into the layout of your page, the right of your screen will change to the component editor, where you can edit the settings of that particular Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code., including which devices you want to show that Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. on:

The device icons in the center of the screen highlight which device version you're currently working on, below shows we're building the mobile version. You can select the different versions (tablet and desktop) to view the different structures per device:

You can undo or redo any unsaved changes using the arrow icons:

Once you're happy with your changes, click the Save button on the top right of your screen which will save your changes. You can exit the page without saving your changes by clicking the arrow on the top left of your screen:

📘

If you're editing a live page version, the Save button will become a Publish button.

Using layout elements and component groups

A layout elementlayout element - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cell`. must be added to a page for you to be able to add a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. into it.

To add a layout elementlayout element - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cell`. to your page, click the blue + icon:

A pop up will open and you can select if you want to add a layout elementlayout element - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cell`. width or a component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`.:

Once you've added a layout elementlayout element - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cell`., you can adjust the size by clicking on the layout element and adjusting the width in the settings panel:

You can use the more icon to access other options:

To duplicate the layout element, click the duplicate icon:

Delete the layout element with the trash can icon:

👍

Tip

If you want to delete all Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. within a layout elementlayout element - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cell`., use the trash can icon on the layout element then all components within it will also be deleted.

create automatic breakpoints for different devices: mobile, tablet, and desktop. Below is how they will display on each device:

Layout element

Mobile

Tablet

Desktop

1/1

1/1

1/1

1/1

1/2

1/1

1/2

1/2

1/3

1/1

1/3

1/3

2/3

1/1

2/3

2/3

1/4

1/2

1/4

1/4

1/6

1/1

1/3

1/6

Once you have your layout elementslayout elements - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cells`. in place, you can add your Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. to them.

You can also add a component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`. that you've created in Templates by clicking the blue + icon and selecting the component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`. you want to add. This article shows you how to create a component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`..

Searching for Frontastic components

You can either search for the name of a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. using the search bar, or you can scroll through the list of available components until you find the one you want to add. Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. are grouped under categories to help you find what you're looking for more easily.

Adding Frontastic components

Once you've added a layout elementlayout element - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cell`. to your page, you can add a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. to it by dragging it from the list and dropping it into your layout elementlayout element - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cell`.. You can add multiple components within 1 layout element or just have 1.

The Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. available in your list will depend on what your developers have made available to you. See the using Frontastic components section for more information.

Duplicating Frontastic components

You can copy a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. within the same page to save you time inputting the same details.

Hover on the , click the duplicate icon and it will copy the component within the same layout element. You can then move the component to where you want it to be and adjust the settings as you wish.

The same can be done for a layout elementlayout element - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cell`. and any Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. within that layout elementlayout element - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cell`..

Reordering or removing components

To reorder the Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. in your page, you can drag and drop them to where you want them to be. That can be within 1 layout elementlayout element - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cell`. or moving it into another layout elementlayout element - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cell`.. You can even create a new empty layout elementlayout element - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cell`. and drag it into there. But you can't drag it into a component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`., the component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`. must be edited in Templates.

To remove a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code., you need to hover on the component you want to delete, select the more icon, then select the trash can icon.

Configuring components

When you add a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. to your page or you click on 1 within your page, you activate the component editor panel. Any changes you make will only affect this specific Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code..

Every Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. has General settings that's accessible using the expand icon. You can select if you want the particular component to be available on certain devices (mobile, tablet, and desktop) using the toggle switches. You can also add a name so you know what the component is and it isn't shown anywhere to your customers.

The other setting sections will be shown depending on what type of component you've clicked on. These generally include position (where it will sit within your page), image (where you can change your image and edit the text over the image), data source filter (where you can select, edit, or add a data source filter for products or content), links (where you add URLs for your users to open), and content (where you add text). This article looks into those options.


Did this page help you?