PAGES & DESIGN

Element settings

Element settings

Every element in the page builder has its own settings. This page lists all of them, element by element, under the names the builder shows.

Open an element by clicking it on the page (or in the list beside it). Its settings appear in the panel on the right.


How the settings are organised

Each element's panel has tabs along the top:

Tab What is on it
Content What the element says and shows: its words, pictures, links, and the switches particular to it. Everything in the sections below is on this tab unless it says otherwise.
Layout How it looks and sits on the page: the type of each piece of text, and the spacing around it. The same for every element — see Settings every element has.
Motion Hero banner only — its zoom and rotate animation.

A setting left on Theme or left blank follows the shop's theme, so an element you have not touched keeps matching the rest of the page.


Settings every element has

These are on the Layout tab of every element.

Type

One box per piece of text in the element — for example a Products element has Heading, Product name, Price and Add button. Each box has:

Setting Choices What it does
Font Theme, Display, Sans, Serif, Mono, Khmer, and any fonts in your own library The typeface for that piece of text. Theme keeps the shop's font.
Size (px) Theme, 1, 2, then 4 to 72 in steps of 2 The text size. Theme keeps the element's own size.
Text Colour The text colour.
Background Colour, with Clear A highlight behind that text only. Not offered on buttons, which have their own colours.

The pieces of text each element offers are listed with the element below. Hero banner, Image, Heading, Text, Quill editor, Marquee and Spacer style their text on the Content tab instead, so they have no Type boxes.

Spacing and alignment

Setting Range What it does
Margin — top, right, bottom, left -400 to 400 px Space outside the element. A negative top margin pulls it up into the element above.
Padding — top, right, bottom, left 0 to 400 px Space inside the element, around its content.
Horizontal Left, Centre, Right Where the content sits across its width.
Vertical Normal, Top, Middle, Bottom Where it sits in a taller space, such as a column.
Line height Normal, 1.2, 1.4, 1.5, 1.6, 1.8, 2.0 Space between lines of text.

Leave a box empty to keep the default. Between elements the default is 56px on a phone and 80px on wider screens; there is no space above the first element on a page or below the last.


Layout elements

Columns

Elements side by side. Each column holds its own elements, and a column can hold more columns. Columns sit side by side on a computer and stack on a phone.

Setting Choices What it does
Gap px Space between the columns.
Min height px, or auto The least height the row takes.
Align Top, Centre and others How columns of different heights line up.
Background Colour, or Transparent The colour behind the whole row.
Layout Column widths, e.g. 1 : 1 or 2 : 1 How the width is shared. Each column also has − / + to make it narrower or wider (1 to 6 parts), arrows to move it, and a remove button.
Add column Up to 6 Adds another column.

Section

A full-width band that holds columns and other elements.

Setting Choices What it does
Section label Text A name for it in the builder. Not shown to shoppers.
Z-index Number Which band is on top where two overlap.
Background Colour The band's colour.
Padding px Space inside the band.
Layout Column, Row Whether what is inside stacks or sits side by side.

Container

A centred box with a max width. Drag any elements inside it — including columns, or another container. It always sits in the middle of the page, with equal (auto) space left and right.

Setting Choices What it does
Container label Text A name for it in the builder. Not shown to shoppers.
Max width 640, 800, 960, 1200, 1440, None — or any width with the slider or number (320 to 2000 px; 0 is none) How wide the content may get. Narrower screens use their full width.
Side padding 0 to 120 px (default 24) Space inside its left and right edges, so content does not touch the screen edge on a phone.
Background Colour, or Clear A colour behind the full width of the row.

Tabs

One panel at a time, chosen by a strip of buttons. Each tab holds its own elements.

Setting Choices What it does
Tabs Add, rename, reorder, remove The tabs and their names. Click a tab to edit what is in it.
Strip alignment Left, Centre, Right Where the row of tab buttons sits.

Spacer

Empty vertical room.

Setting Range What it does
Height 8 to 200 px How much room it takes.

Text elements

Heading

A section title, with an optional small line above it.

Setting What it does
Eyebrow The small line above the title, e.g. OUR STORY. Optional.
Heading The title, e.g. A NEW HEADING.
Type for each line Font, size and colour for the eyebrow and the heading separately.
Text color (both lines) One colour for both lines at once.

Text

Paragraphs of copy.

Setting What it does
Text The paragraphs. Basic formatting is kept.

Quill editor

Formatted writing: headings, bold, italic, lists, links, colours and alignment, edited the way you would in a word processor.

Setting What it does
Quill rich text content The text, with the toolbar above it.
Type Font (including your own fonts) and size for the whole block.

The trail of links that shows where a page sits, e.g. Home / Shop / Rings.

Setting What it does
Breadcrumb links Each step: a Label and a Link. Add, reorder or remove steps.
Separator The character between steps, e.g. /.

Type tab: Trail.

Button

A link drawn as a button.

Setting Choices What it does
Label Text The words on the button.
Link Address Where it goes, e.g. /shop.
Font, size, text colour, background The button's type and colours.
Align Left, Center, Right Where it sits.
Padding Small, Medium, Large How big it is.
Radius Square, Soft, Pill The shape of its corners.
Outline style On / off A bordered button instead of a filled one.

Type tab: Button.

Call to action

A headline, a line of copy and a button, on a dark panel.

Setting What it does
Headline The large line.
Body A sentence under it.
Button The button's words.
Links to Where the button goes.

Type tab: Title, Body, Button.


Media elements

Image

One picture, with an optional caption and an optional button shown on hover.

Setting Choices What it does
Image Upload, or choose from the library The picture.
Alt text Text Describes the picture for screen readers and search engines.
Caption Text A line under the picture.
Subtext Text A second, smaller line.
Show button On / off Adds a button over the picture.
Button label and link Text, address The button's words and where it goes.
Button colours Background, Text colour, Hover background, Hover text The button's colours.
Hover content position Top right, Bottom right, Top left, Bottom left, Center Where the text and button appear on the picture.
Overlay on hover On / off Shows the text and button only when the picture is hovered.
Image size Small (50%), Medium (75%), Full width How wide the picture is.
Full width On / off Runs the picture edge to edge instead of at the page's width.
Hover animation None, Zoom in, Zoom out, Rotate, Zoom in + Rotate, Zoom out + Rotate What the picture does when hovered.

Image slider

Several pictures the shopper swipes or clicks through.

Setting Choices What it does
Pictures Upload or choose; each with alt text; reorder and remove The slides.
Height 120 to 1200 px — slider, number, or a preset (300, 400, 460, 560, 700) How tall the slider is on tablets and computers.
Phone height 120 to 1200 px, or empty Its own height on phones. Empty uses the height above.
Image fit Cover, Contain Cover fills the frame and crops; Contain shows the whole picture.
Play on its own On / off, with seconds between slides Moves to the next picture by itself.
Rounded corners On / off Softens the frame's corners.
Center preview layout On / off Shows the edges of the pictures either side.
Full width On / off Edge to edge instead of the page's width.

Video slider

YouTube videos, one at a time, with arrows and dots.

Setting Choices What it does
Videos Each with a YouTube link and a title; add, reorder, remove The videos.
Autoplay / Autoplay all On / off Starts a video, or all of them, playing muted by itself.
Shape Aspect ratio The frame's shape.
Show titles On / off Shows each video's title.
Rounded corners On / off Softens the corners.
Full width On / off Edge to edge.

YouTube videos in a row the shopper scrolls through.

Setting Choices What it does
Heading Text, optional A title above the row.
Videos As in Video slider The videos.
Videos across Number How many show at once.
Space between 0 to 48 px The gap between videos.
Arrows / Dots On / off The controls.
Shape, Show titles As in Video slider
Rounded corners, Full width On / off

Type tab: Heading.

YouTube video

One responsive YouTube player.

Setting Choices What it does
YouTube video link / URL Address The video.
Caption / heading (optional) Text A line with the video.
Aspect ratio e.g. 16:9 The player's shape.
Full width On / off Edge to edge.
Autoplay video On / off Starts playing, muted, by itself.

Before / after

Two pictures of the same thing, with a handle the shopper drags to compare.

Setting Choices What it does
Eyebrow Text, e.g. THE DIFFERENCE Small line above the heading.
Heading Text The title.
Before / After pictures Upload or choose, with alt text The two pictures.
Show the words on the picture On / off, with the two labels Writes Before and After (or your words) on the pictures.
Caption Text, optional A line under the pictures.
Picture shape Square, Landscape, Portrait The frame's shape.
Handle moves Horizontal, Vertical Which way the divider slides.
Starts at 5 to 95 % Where the divider sits when the page opens.
Rounded corners, Full width On / off

Type tab: Eyebrow, Heading, Caption.


Banners

Hero banner

A full-width banner, or several pictures that change by themselves. Blank fields fall back to the theme's own hero.

Content tab

Setting Choices What it does
Pictures Upload or choose; one or several, with an optional phone crop (portrait 3:4) each The banner image(s). With several, they change by themselves; seconds between sets the pace.
Sub image Upload or choose, square or portrait A second, smaller picture laid over the banner.
Sub image Horizontal align / Vertical align Left, Center, Right / Top, Center, Bottom Where the sub image sits.
Sub image Size (%) Percent How big the sub image is.
Layout Overlay, Split Overlay puts the words on the picture; Split puts them beside it.
Image side Left, Right Split only — which side the picture is on.
Content side Left, Right Which side the words are on.
Content Horizontal align / Vertical align Left, Center, Right / Top, Center, Bottom Where the words sit.
Display eyebrow, headline, and subtitle in one row On / off Puts the three lines side by side.
Hero height Fit image / section, Custom (400, 480, 560, 660, 760, 900 or your own px) How tall the banner is.
Eyebrow Text, with its own background The small line above the headline.
Headline Text The main line.
Subtitle Text The line under it.
Button / Second button Label and Links to each Up to two buttons.
Each button's style Size (Small, Medium, Large), Radius px, Background, Text color, Border color, Hover bg, Hover text How each button looks.
Type Font and size for eyebrow, headline and subtitle

Motion tab

Setting Choices What it does
Show animation On / off Turns the picture's motion on.
Animation Zoom in, Zoom out, Zoom in + Rotate What the picture does.
Play Always, When hovered When it moves. Zoom in + Rotate always plays on hover.
Duration 0.3 s to 12 s How long one movement takes.

Hero banner 2

A poster: big copy on one side and a photograph in a coloured frame, turned a few degrees, on the other. Stacks on a phone.

Setting Choices What it does
Eyebrow Text The small line at the top.
Title Text, line breaks kept The very large title. Press Enter for a new line.
Body Text The paragraph under the title.
Note (under the line) Text A small line under a thin divider.
Button (optional) Text A button under the body. Leave empty for none.
Links to Address Where the button goes.
Image Upload or choose The framed photograph.
Image alt text Text Describes the photograph.
Caption Text The line inside the frame, under the photograph.
Image side Right, Left Which side the photograph is on.
Tilt -12° to 12° How far the frame is turned. 0 is straight.
Image height 240 to 640 px How tall the photograph is.
Background Colour (default dark green) The banner's colour.
Title & text Colour The title and general text.
Accent & frame Colour (default lime) The eyebrow, the frame and the button.
Body text Colour The paragraph.
Caption & button text Colour Text on the frame and on the button.

Type tab: Eyebrow, Title, Body, Note, Caption.

Marquee

The scrolling strip of short messages, usually under a hero.

Setting Choices What it does
Messages Text each, e.g. FREE SHIPPING OVER $120; add, reorder, remove What scrolls past.
Icons One icon per message, optional, with Icon color A small icon beside a message.
Separator Text, e.g. ✳ What sits between messages.
Type Font, size, Color How the messages look.

The full-width collection panel: a picture and copy side by side. Shown on computers, not phones.

Setting What it does
Image The collection picture, landscape around 700×560. Upload or choose.
Eyebrow Small line above the headline.
Headline The title.
Body A paragraph.
Figures A short list of numbers or facts, one per line.
Button / Links to The button and where it goes.

Type tab: Eyebrow, Title, Body, Button.

Newsletter

The sign-up panel. It has no settings of its own; its words come from the theme.


Product and catalogue elements

Products

Live products from your catalogue, in a grid.

Setting Choices What it does
Heading Text A title above the grid.
Category Everything, or one category Which products.
Showing A set number, Everything in pages, Everything loading as you scroll How much of the catalogue.
How many 1 to 12 A set number only.
Per page / Per batch 2 to 24 The paged modes only.
Default layout 2 columns, 3 columns, 4 columns, List How products show when the page opens. Phones always show 2 columns, or the list.
Layout switcher (2 / 3 / 4 columns, list) On / off Lets shoppers switch layout.
Switcher colours Bar background, Icon color, Selected background, Selected icon color, Use theme colors The switcher's colours. Shown when it is on.
Default Sorting (show sort select) On / off Lets shoppers sort: newest or by price.
Sort select colours Background, Text color, Border, Use theme colors The sort box's colours. Shown when it is on.
List text align Left, Center, Right Text in the list layout.
Product card style Default, Featured editorial, Gallery (photo carousel), Hover icons The card design. Gallery shows every photo of the product as a carousel — arrows, a "2/4" counter, moving on by itself every few seconds and pausing while pointed at — with a discount badge, and the price on a bar with − / + to change how many are in the cart. Hover icons shows a Sale badge, and on hover three round buttons rise onto the photo — add to cart (or Select options for a product with sizes or colours, which opens quick view), quick view, and wishlist — each with a label; the price and name sit centred below.
Card background Colour, or Transparent Behind each card.
Card radius Square, Small, Medium, Large, Pill Card corners.
Add to cart — Button text Text, default ADD TO CART The button's words.
Add to cart colours Button background, Button text color, Hover background, Hover text color
Button size Small, Medium, Large
Show product description On / off A line of description on each card.
Show full description On / off The whole description instead of one line.
Quick view On / off A button that opens the product in a window.

Type tab: Heading, Product name, Price, Add button.

Category filter

A row of category chips that filters one Products element on the page. Tapping a chip shows only that category in the linked Products element — without reloading the page or jumping to the top — and the filtered view has its own link that can be shared.

How the link works: every Products element shows its Element key at the top of its settings (and how many filters point at it). A Category filter stores the key of the Products element it controls, so two Products elements on one page can each have their own filter.

The key can be named: type a name such as summer-sale under Element key and a short unique code is added after it — summer-sale-k7x2q — so two elements with the same name never clash. Renaming it updates every Category filter that uses it. Leave the name empty for the automatic key.

Setting Choices What it does
Filters this Products element A Products element on the page Which one it controls. Linked automatically when the page has exactly one. Nothing shows on the shop until it is linked.
Categories Tick the ones to offer None ticked shows every category, including ones added later.
Show an "All" chip / Its label On / off, text (default All) A chip that clears the filter, back to the Products element's own setting.
Look Pills, Underlined text, Checkbox list Pills and underlined text pick one category at a time. Checkbox list shows a title, then each category with a tick box and an arrow that opens its sub-categories; shoppers can tick several, and a ticked category includes everything under it.
Title Text (default Category) Checkbox list only: the heading above it.
Filter by → Category On / off (default on) Checkbox list only: show the category section. Turn it off for a list of options alone.
Filter by → Product options On / off, plus which options (default all) Checkbox list only: a section per variant option the live products are sold in — SIZE, COLOUR and so on — each value with a tick box. A product shows when a variant with a ticked value is in stock. Ticks within one section mean any of them; across sections, all of them (Size M or L, and Colour Black). The choice is in the address as ?opt-<key>=Size:M.
Align Left, Centre, Right Where the row sits. On a phone it scrolls sideways.
Active chip / Active text Colour The chosen chip's colours.

Layout tab: font and size for the chips, as in Type.

Products in a row the shopper scrolls or clicks through.

Setting Choices What it does
Heading Text, optional A title above the row.
Category Everything, or one category Which products.
How many products 2 to 24
Cards across Phone, tablet and computer separately How many show at once on each screen.
Space between 0 to 48 px The gap between cards.
Play on its own On / off, with seconds Scrolls by itself.
Arrows / Dots On / off The controls.
Colour swatches, Size range, Description, Show full description, Stock On / off each What each card shows.
Full width of the screen On / off Edge to edge.

Type tab: Heading, Product name, Price.

Product rails

Horizontal rows of products from the catalogue. No settings of its own.

Category grid

Category tiles that link to the filtered listing.

Setting Choices What it does
Heading Text, e.g. SHOP BY CATEGORY The title.
Which categories Tick the ones to show Leave all unticked for every category.
Display style Default tiles, Design 2 — centered dial cards The tile design.
Columns Number Tiles across.
Limit 0 to 16 How many tiles; 0 shows them all.
Show on phones On / off

Type tab: Heading.

Product listing

The full catalogue listing in one element: filter rail, chips, sort and grid. For more control, build it from the four parts below instead.

Setting Choices What it does
Heading Text, e.g. NEW ARRIVALS The big title.
Under the heading Text A sentence about what is listed.
Breadcrumb Text The trail's last step.
Category Everything, or one Which products.
At most Number Caps how many products.
Filters, Sort, Product count On / off each Which parts show.

Type tab: Heading, Intro, Breadcrumb.

Listing header

The trail, the big title and the product count above a listing.

Setting Choices What it does
Heading, Under the heading, Breadcrumb Text As in Product listing.
Count from Everything, or a category What the count counts.
Show how many products On / off Shows the count.

Type tab: Heading, Intro, Breadcrumb.

Filter bar

The row of quick chips, with the sort and the grid / list switch.

Setting Choices What it does
Filters this Products element A Products element on the page, by key Links the bar to that element: its chips, sort and grid / list switch act on it alone, and other Products elements on the page are left as they are. The choices go in the address as ?flt-<key>=, ?sort-<key>= and ?view-<key>=list. Left empty, the bar works as before, with the listing's Results element.
Quick chips On / off One-tap filters.
Chips from A filter group Which group the chips come from. Blank uses the first.
How many Number Chips shown.
Sort On / off The sort box.
Grid / list switch On / off
Sticks to the top On / off Stays in view while the shopper scrolls.

Filter sidebar

Category, size, colour and price filters as a column. Put it in a column beside the results.

Setting What it does
Heading The title above the filters.
Groups to show Tick the filter groups to include.

Type tab: Title.

Product results

The products themselves, filtered and sorted by what the shopper picked.

Setting What it does
Category Everything, or one category.
Across Products per row.
At most Caps how many products.

Cards and stories

Card carousel / Post card slider

Cards you write yourself, in a row the shopper scrolls through. The Post card slider draws them as posts, with a category and a date above each title.

Setting Choices What it does
Eyebrow Text Small line above the heading.
Heading Text The title.
Link beside the heading / Links to Text, e.g. VIEW ALL, and an address A link at the top right.
Cards Add, reorder, remove Each card: picture with alt text, Eyebrow (category), Meta (date), Title, Text, and a link label and address. Leave the label empty to make the whole card the link.
Picture shape Square, Landscape, Portrait The pictures' shape.
Space between px Gap between cards.
Cards across Phone, tablet and computer How many show at once.
Arrows, Dots, Move on its own (with seconds) On / off
Center preview layout On / off Shows part of the cards either side.
Full width On / off, with a content width: Full, 1200px, 1440px, Custom Edge to edge, and how wide the content inside is.

Type tab: Eyebrow, Heading, Link.

Customer quotes, names and star ratings in cards.

Setting Choices What it does
Heading Text, e.g. What our customers say The title.
Cards Add, reorder, remove Each card: Name, Role, Quote, and a Rating of 1 to 5 stars. Each part can have its own type.
Background Colour Behind the whole row.
Card background Colour Behind each card.
Text color / Quote color Colour
Cards across Number
Arrows, Dots, Move on its own, Full width On / off

Type tab: Heading, Name, Role, Quote.

Ingredient showcase

What a product is made of: a picture of it, and each part with what it is for.

Setting Choices What it does
Eyebrow, Heading, Intro Text The words above, e.g. THE FORMULA / What goes in.
The product Picture, with alt text The product's picture.
Ingredients Add, reorder, remove Each: picture, Name, what it is for, and an amount such as 2%.
Arrangement Beside a picture, Grid Ingredients beside the product picture, or in a grid.
Picture shape Circle, Square Each ingredient's picture.
Across Number Ingredients per row.
Sits on None, Cream, Ink The background.
Link under the list / Links to Text, address An optional link.
Full width On / off

Type tab: Eyebrow, Heading, Intro, Link.

Store benefits

Service promises with simple icons: shipping, returns, support, payment.

Setting Choices What it does
Columns Number Benefits per row.
Layout Columns, Row Icon above the words, or beside them.
Icon color, Text color, Description, Background Colour The element's colours.
Benefits Add, reorder, remove Each: Icon (choose one) or Image (upload), a Title and a Description.

Type tab: Title, Body.

Customer photos

A grid of customer pictures. Leave it empty and it shows the store's feed instead.

Setting Choices What it does
Heading Text, e.g. AS WORN BY YOU The title.
Your handle Text, e.g. @mystore Shown under the heading.
The line under it Text An invitation, e.g. to get featured.
Photos Add, reorder, remove Each: picture, who posted it, what they are wearing, and an optional link of its own.
Button on each photo / Where it goes Text, address The button on every photo.
Link beside the heading / Where that goes Text, address
Photos across Number
Heart on each photo On / off A like button.
Show on phones On / off

Type tab: Heading, Handle, Invite, Shop button, Feed button.


Restaurant elements

Live courses and dishes from the Food menu screen.

Setting Choices What it does
Heading Text, optional A title above the menu.
Courses All visible courses, or one Which courses.
Layout Dish cards, Menu list Cards with photos, or a printed-menu list.
Dishes across 1 to 6 Cards per row.
Show descriptions, Show prices, Show dietary tags, Show dish photos, Show Add to cart buttons On / off each What each dish shows.

Type tab: Menu heading, Course, Dish, Description, Price.

Restaurant name

The store's name, logo and tagline from Store identity.

Setting Choices What it does
Alignment Left, Centre, Right
Show store logo On / off
Show tagline On / off

Type tab: Restaurant name, Tagline.

One dish from your Food menu, with its photo, description and price.

Setting Choices What it does
Dish Choose a dish Which one.
Show description, Show price, Show dietary tags On / off each

Type tab: Dish name, Description, Price.


Phone-only elements

Mobile greeting

The greeting line shown only on phones. No settings of its own.

Mobile chips

The category chips shown only on phones. No settings of its own.


Other (custom section)

A section written as HTML and CSS, with fields the merchant fills in. Meant for theme developers.

Setting What it does
Name What the section is called in the builder.
Template The HTML. Write {{ fields.key }} where a field's value goes.
CSS The section's styles.
Fields The editable values: each has a key, a label, a type (text, rich text, image, link or colour) and a default. Merchants fill them in without touching the HTML.

Nothing in a custom section is ever run as code — the template is filled in, not executed.


Header blocks

Headers are built under Appearance → Headers → Edit. A header is a bar with blocks dragged into its left, centre and right, on up to three rows. Click a block in the preview to edit it.

The bar

The The bar tab on the right.

Setting Choices What it does
Theme background Sand, Cream, Paper, Ink, Accent, Transparent A colour from the theme behind the bar.
Background color Colour A colour of your own instead.
Text color Colour The bar's text.
Height 40 to 200 px How tall the first row is.
Stays at the top when scrolling On / off The bar stays in view.
Line underneath On / off A thin line along the bottom.

Every block

In Selected block, on the left:

Setting Choices What it does
Position Left, Centre, Right Which third of the bar. Dragging sets it too.
Row First, Second, Third Which row.
Padding 0 to 200 px, each side Space inside the block.
Margin -200 to 200 px, each side Space outside it; negative pulls it closer to its neighbour.

On the Block style tab on the right (every block except Spacer):

Setting Choices What it does
Font / Size As in Type The block's text. Not on Wishlist, which is an icon.
Text color Colour, or Theme
Background Colour, or Theme A colour behind the block.
Border radius 0 to 40 px, Pill, or default Rounds the block's background and its own button, field or icon. Default keeps each block's own shape.
Uppercase On / off

Each colour has Reset back to the theme's.

Each kind of block

Block Content settings Its own colours (Block style tab)
Logo — (the store's logo and name come from Store identity) —
Menu Menu to show; create one here if there is none Link hover, Current page (text and underline); Space between links (0 to 80 px)
Search Show as: Search field or Icon only; Placeholder (field) Field: Field background, Field border. Icon: Hover background
Account Show as: Avatar and name, Avatar only; Signed-out label Hover background
Wishlist — Hover background, Dot
Cart Show as: Button with count, Icon only; Label (button) Button: Button, Button text, Button hover, Hover text. Icon: Hover background, Dot
Text Text —
Link Label, Link, Show as: Text link or Button Text link: Hover. Button: Button, Button text, Button hover, Hover text
Spacer Width (0 to 200 px) —

A submenu in a Menu block opens below its link on hover; on a keyboard, press ↓ to move into it and Esc to close it.

Element settings — Docs