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. |
Breadcrumb
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. |
Video carousel
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. |
Featured collection
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.
Product carousel
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.
Text card carousel
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
Menu list
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.
Featured dish
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.