Skip to content
Help Center

Page Elements

To add elements, click the + icon (Add) on the left sidebar. Elements are grouped in three categories:

  • Basic elements - Texts, Media, Forms, Layouts and CMS
  • E-commerce - Product and Checkout
  • Advanced - Interactive and Other

Click a group to see its elements, then drag an element and drop it on your page. You can also use the search field at the top to find an element by name.

At the top of the Add sidebar you will also find:

  • Quick adds - The elements you added recently, so you can add them again quickly. This only shows once you have added elements.
  • Saved sections - Ready-made sections, your own saved sections and your smart sections. Learn more on Smart Sections.

Basic Elements

Section titled “Basic Elements”

Texts

Section titled “Texts”
Element Description
element_0001_Layer-3-1 Heading - A block of text that can serve as a headline, subheadline or title.
element_0000_Layer-2-1 Paragraph - A block of text that can serve mainly as a paragraph. The text can be edited from the sidebar or directly inside the content area by double clicking it.
element_0002_Layer-4-1 List - A list of items.

Media

Section titled “Media”
Element Description
element_0004_Layer-6-2 Image - An image element to display images for your products and offers. Images can be uploaded from your desktop or hotlinked from a URL.
Icon An icon or a small logo.
element_0005_Layer-7-1 Youtube video and Vimeo video - Embed a video from YouTube or Vimeo.
Custom video A video from your own file or link.
Audio player Plays an audio file, such as an MP3.

Forms

Section titled “Forms”
Element Description
element_0008_Layer-10-1 Input - A form input to collect information from your visitors.
element_0010_Layer-12-1 Select - A dropdown list that lets the visitor select one of the items in the list.
element_0011_Layer-13-1 Textarea - A text area to let the visitor enter a large text.
element_0006_Layer-8-1 Button - A button that can link to other pages, to an external website or submit a form.
element_0007_Layer-9-1 Checkbox - A checkbox input for your forms.
element_0013_Layer-15-1 Label - A label that goes next to a form element to tell the visitor what information to enter in a field.
element_0012_Layer-14-1 Stars - A stars selector, typically used when writing a product review.
element_0009_Layer-11-1 Link - A text link to another page or to an external website.
BlockLink A link that wraps other elements, so the whole block is clickable.
element_0031_Layer-35-1 File upload - Lets visitors upload a file. You can use it to collect images for reviews or collect files from your buyers at checkout.
element_0032_Layer-36-1 Review form - Lets your visitors submit reviews for your product. This element should be used on a product page.
COD form A cash on delivery order form.

Layouts

Section titled “Layouts”

Layouts are ready-made rows and columns: Single column, Two columns, Three columns, Four columns, Single row and Two rows. Learn more on Page Structure and Layouts.

CMS

Section titled “CMS”
Element Description
element_0042_Layer-49-1 Repeater - Repeats a part of your design in order to show a list of information. For example, you can use a repeater to show a list of reviews. We go over the Repeater in more detail on the data binding page.
element_0030_Layer-34-1 Masonry - A grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. A great example of the masonry layout is the layout on the Pinterest website.
Collections List Shows a list of your collections.
Collection Shows the products of a collection.
Tile A tile, for example to show an item inside a list.

E-commerce

Section titled “E-commerce”

Product

Section titled “Product”

These elements show data from the page’s product.

Element Description
Title The product title.
Description The product description.
Price The product price.
element_0022_Layer-25-1 Gallery - Shows your product images in an easy to navigate gallery.
Image A product image.
element_0027_Layer-31-1 Rating - Shows the product rating as stars.
element_0041_Layer-48-1 Variant selector - Lets the buyer choose the product variant that they want to buy.
Inline variants Shows the variant options side by side so the buyer can pick one.
Price bundles Lets the buyer choose between bundle offers.
Price bundles (advanced) A price bundles element that you can customize more.
element_0025_Layer-29-1 Currency converter - Lets your visitors see the prices in their local currency or in any currency that they choose.
Add to cart A button that adds the product to the cart.

Checkout

Section titled “Checkout”

All the following elements should be used for the checkout process with the exception of the Order summary that goes in the Thank You page.

Element Description
element_0034_Layer-39-1 Payment methods - Lets the buyer choose the payment method that they want to use inside the checkout.
element_0035_Layer-40-1 Express checkout - Lets buyers pay using an express checkout method such as Apple Pay or Google Pay.
Shipping method Lets the buyer choose a shipping method.
element_0037_Layer-42-1 Shipping address - The shipping address of the buyer.
element_0038_Layer-43-1 Billing address - The billing address of the buyer.
Cart The cart. Double click it in the builder to show the cart drawer.
Store Search A search drawer to find products in your store.
element_0036_Layer-41-1 Order Bump - Displays the Order Bump for the product that is being sold.
Order Bump (Advanced) An order bump element that supports several bumps and more customization.
element_0039_Layer-44-1 Checkout summary - Shows the summary of the order along with a discount field.
Order summary Order summary - Shows the summary of the order in the thank you page.

Advanced

Section titled “Advanced”

Interactive

Section titled “Interactive”
Element Description
Navigation A header with a navigation menu.
element_0020_Layer-23-1 Tabs - Groups information under tabs. When clicked, each tab will show its content and hide other tabs’ contents.
element_0021_Layer-24-1 Countdown - Adds scarcity to your offers. It can be an evergreen countdown timer or a countdown timer towards a defined date. The timer comes in different styles.
element_0023_Layer-26-1 Accordions - A vertically stacked list of headers that can be clicked to reveal or hide content associated with them.
element_0029_Layer-33-1 Carousel - Displays multiple images or content in a single space. It saves screen space and helps visitors focus on important content.
Slider A slider to show images or content one after the other.
Split slider Compares two images, for example before and after.
element_0024_Layer-28-1 Toggle - Shows and hides a block of information. When using the Toggle element, the Layers panel becomes very handy as it always shows all the items even when they are hidden in the content area.
element_0033_Layer-38-1 Popup - Popups can be managed from the Popups menu in the top bar. You can also add a popup from the sidebar using the Popup element. The Popup will then show up inside the menu on the top bar.
Cookies consent A cookie consent banner.
element_0028_Layer-32-1 Sticky - A container that stays fixed on the screen while the user is scrolling your website.
Dropdown A dropdown menu.
Vsl A video sales letter block.

Other

Section titled “Other”
Element Description
element_0016_Layer-19-1 Spacer - Adds space between sibling elements.
element_0017_Layer-20-1 Divider - Adds a line between elements.
element_0040_Layer-47-1 Custom HTML - Lets you add custom HTML code in different places of the page. Keep in mind that you can also use the Page Settings to add your own custom HTML without needing to use this element.
element_0015_Layer-18-1 Container - A block that can be used to wrap several elements.