1 · Before you touch anything
Two minutes of housekeeping that will save you an afternoon.
Where the editing happens
Almost everything in this playbook is edited in one place: Online store › Themes › Customise. That opens the theme editor — a preview of the site with a list of the current page's sections down the left. Click a section, and its settings appear. Use the page selector at the top to move between the home page, a product page, the cart and so on.
Duplicate before a big change
The theme editor saves as you type. There is no undo once you leave the page. Before any substantial change — restructuring a page, reworking the colour schemes — go to Online store › Themes, open the ⋯ menu on the live theme and choose Duplicate. Work on the copy, check it, then publish it. The old theme stays in the list as a way back.
What is not in the theme
The theme controls presentation. The things it presents live elsewhere in the admin, and editing them is a different job:
- Products, prices, variants and stock — Products. The price a customer actually pays always comes from here.
- Blog posts — Blog. Including each post's title, body and featured image.
- Pages (About, FAQ, Contact…) — Pages. The page record exists in the admin; the theme decides what it looks like via its template.
- Discount codes — Discounts. The theme only displays the code; it does not create it.
- Shipping rates — Settings › Shipping.
Preview versus live
The editor previews whichever theme you opened. That is not necessarily the published one, and the two can differ. If a change is not showing on the real site, check that you edited the live theme. After a deploy it can also take a minute or so for the content network to catch up — a hard refresh settles it.
2 · How the theme fits together
Four layers, from the widest to the narrowest. Knowing which layer you are in tells you how far a change will travel.
Theme settings — the whole site
The gear icon at the foot of the editor's section list. Colour schemes, the two typefaces, page width, button shape, card styling, the cart's behaviour. A change here lands on every page at once. Section 6 lists every one of these.
Templates — one kind of page
A template is the recipe for a kind of page: which sections appear and in what order. There is a template for the home page, one for the cart, one for an article, and several for products. Two products can use different templates and therefore look quite different. Section 4 maps them all.
Sections — one band across a page
A horizontal band: the hero, the proof bar, the ingredient panel. Sections are the things you drag to reorder, hide, or add to a page. Each has its own settings. Section 8 documents every one.
Blocks — the repeating items inside a section
Where a section holds a list — the claims in the proof bar, the steps in a process, the cards in a grid — each item is a block. You add, reorder and delete blocks inside the section. Most sections cap how many blocks they will take; the cap is listed against each section in the reference.
The practical version: if you want to change words or a picture, you are almost certainly looking for a section or a block. If you want to change something everywhere at once, you want theme settings.
3 · Five rules that prevent most breakage
1. Never change a “Stable section key”
Most sections built for this site have a field called Stable section key. It is not a label — it is the handle the stylesheet and scripts use to find that section. Rename it and the section keeps its content but loses its design, usually collapsing into unstyled text. The correct value for every section is listed in the reference below.
2. The image picker beats the asset path
Many sections offer both an Image picker and a Theme asset path text field. They do the same job by different routes: the picker uploads a new file, the path points at a file already in the theme. If the picker has anything in it, the path is ignored. If you set a path and the wrong picture appears, clear the picker.
A few sections have further sources stacked between those two — a product card prefers the variant's own image from the admin, and the product gallery accepts an external URL. The picker still wins everywhere. Where the order is more involved than picker-then-path, it is spelled out against that section in the reference.
3. Money in these fields is display text
Prices typed into section and block fields are captions. They do not affect what the customer is charged — that always comes from the product in the admin. When a price changes you must change it in both places. A page that contradicts its own checkout is the most common fault this site has had.
4. Thresholds are in cents
Every free-shipping and reward threshold is stored in cents. 17500 is $175.00. Typing
175 sets the threshold to a dollar seventy-five and makes everything free.
5. Empty a field to hide the thing it controls
Across this theme, blanking a field is how you remove its element rather than leaving a gap. No secondary button label, no secondary button. No card link, the card stops being clickable. No image path on an editorial card, the card becomes text-only and closes up. Where this behaviour exists it is noted against the field.
4 · Where each page's content lives
Every template in the theme, and the sections stacked inside it in the order they appear. Section names link to their entry in the reference.
Three product templates exist because the Pods, the Starter Kit and the generic product need different buy boxes. Which template a product uses is set on the product itself, in the admin, under Theme template.
5 · Colour
The site does not set colours section by section. It sets eleven schemes, and each section picks one. Change a scheme and every section using it changes.
The brand palette
Primary Dark Green
#214E34Deep Green #173824Soft Sage #DDE7E0Warm Cream #F7F4ECCharcoal #222222White #FFFFFFThe eleven schemes, as they actually render
The count is how many times each scheme is referenced across the templates — a rough measure of how much of the site a change to it would touch.
scheme-1Supporting line of copy.Button
scheme-1 · background #FFFFFF · used 36×
scheme-2Supporting line of copy.Button
scheme-2 · background #F7F4EC · used 40×
scheme-3Supporting line of copy.Button
scheme-3 · background #DDE7E0 · used 9×
scheme-4Supporting line of copy.Button
scheme-4 · background #214E34 · used 22×
scheme-5Supporting line of copy.Button
scheme-5 · background #173824 · used 30×
scheme-6Supporting line of copy.Button
scheme-6 · background #7A1C22 · used 2×
scheme-7Supporting line of copy.Button
scheme-7 · background #FFFFFF · used 34×
scheme-8Supporting line of copy.Button
scheme-8 · background #F7F4EC · used 10×
scheme-9Supporting line of copy.Button
scheme-9 · background #DDE7E0 · used 2×
scheme-10Supporting line of copy.Button
scheme-10 · background #173824 · used 4×
scheme-11Supporting line of copy.Button
scheme-11 · background #173824 · used 3×
One scheme will not read if you put text in it
- scheme-10 — text #222222 on background #173824 is only 1.23:1.
Readable body text needs about 4.5:1. Nothing visible is broken today, because the sections using this scheme paint their words with a second, lighter scheme and only borrow this one for the panel behind the picture. But point a text-bearing section at it and the copy will effectively disappear. If you need a dark green panel with readable type, use scheme-5 or scheme-11, which share the same background.
What each colour inside a scheme paints
| Role | Setting id | What it paints |
|---|---|---|
| Background | color_background | The panel behind everything in the section. |
| Text | color_text | Headings and body copy. |
| Secondary text | color_light_text | Captions, eyebrows, supporting lines. |
| Button fill | color_button_background | The primary button. |
| Button text | color_button_text | Words on the primary button. |
| Outline button border | color_button_secondary_border | The secondary, outlined button. |
| Outline button text | color_button_secondary_text | Words on the secondary button. |
| Link | color_button_text_link | Inline text links. |
| Card | color_card_background | Cards sitting on the section background. |
| Media backdrop | color_media_background | Behind an image while it loads, and behind cut-outs. |
| Rules | color_entry_line | Hairlines and dividers. |
To restyle one section, point it at a different scheme. Editing the scheme itself changes every section using it — check the counts above before you do.
6 · Global theme settings
The gear icon at the foot of the editor's section list. Everything here applies to the entire site.
Component color
| Field | Setting id | Kind | Default |
|---|---|---|---|
| color_schemes | the colour scheme editor | — | |
| Products | |||
| Price | color_sale | colour picker | #B42318 |
| Discount amount | color_discount | colour picker | #EE4700 |
| Discount tag | color_tag_background | colour picker | #EE4700 |
| Discount tag text | color_tag_text | colour picker | #FFFFFF |
| Other | |||
| Background color | color_page_background | colour picker | #FFFFFF |
| Shopping cart prompt points | color_cart_bubble | colour picker | #EE4700 |
| Shopping cart prompt text | color_cart_bubble_text | colour picker | #FFFFFF |
| Image background | color_image_background | colour picker | #F8F8F8 |
| Loading image background | color_image_loading_background | colour picker | #E1E4E8 |
| Matte pop-up window background | color_mask | colour picker | #000000 |
| ShadowShade color for buttons/product cards/category cards/blog cards | color_shadow | colour picker | #000000 |
Typography
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | |||
| Typography | sort_title_font | font picker | Brygada 1918:700 |
| Font-spacing | sort_title_letter_spacing | a slider | 0 |
| Font size | sort_title_size | a slider | 30 |
| Font line height | sort_title_line_height | a slider | 1.2 |
| All Caps for texts | sort_title_uppercase | on / off | Off |
| Body | |||
| Typography | sort_body_font | font picker | Brygada 1918:400 |
| Font-spacing | sort_body_letter_spacing | a slider | 0 |
| Font size | sort_body_size | a slider | 14 |
| Font line height | sort_body_line_height | a slider | 1.4 |
Layout
How wide the site runs and how much air sits between sections and between grid items.
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Basics | |||
| Page width | page_width | a slider | 1420 |
| Component vertical spacing | section_vertical_spacing | a slider | 0 |
| Grid | |||
| Horizontal spacing | grid_horizontal_spacing | a slider | 20 |
| Vertical spacing | grid_vertical_spacing | a slider | 20 |
Buttons
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Border | |||
| Thickness | button_border_thickness | a slider | 1 |
| Opacity | button_border_opacity | a slider | 100 |
| Border radius | button_border_radius | a slider | 0 |
| Shadow | |||
| Opacity | button_shadow_opacity | a slider | 0 |
| Vertical offset | button_shadow_offset_x | a slider | 0 |
| Horizontal offset | button_shadow_offset_y | a slider | 0 |
| Blur | button_shadow_blur | a slider | 0 |
Variants selector
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Border | |||
| Thickness | variant_selector_border_thickness | a slider | 1 |
| Opacity | variant_selector_border_opacity | a slider | 20 |
| Border radius | variant_selector_border_radius | a slider | 0 |
| Shadow | |||
| Opacity | variant_selector_shadow_opacity | a slider | 0 |
| Vertical offset | variant_selector_shadow_offset_x | a slider | 0 |
| Horizontal offset | variant_selector_shadow_offset_y | a slider | 0 |
| Blur | variant_selector_shadow_blur | a slider | 0 |
Inputs
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Border | |||
| Thickness | input_border_thickness | a slider | 1 |
| Opacity | input_border_opacity | a slider | 100 |
| Border radius | input_border_radius | a slider | 0 |
| Shadow | |||
| Opacity | input_shadow_opacity | a slider | 0 |
| Vertical offset | input_shadow_offset_x | a slider | 0 |
| Horizontal offset | input_shadow_offset_y | a slider | 0 |
| Blur | input_shadow_blur | a slider | 0 |
Product cards
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Product information | |||
| Quick add to cart | product_quick_add | on / off | On |
| Display product title on desktop | product_desktop_title_show | on / off | On |
| Display product titles on mobile | product_mobile_title_show | on / off | On |
| Product title displayChoices: all — Full display · max_1 — Display up to 1 row · max_2 — Display up to 2 rows | product_title_display_type | a dropdown | all |
| Product card discount tag | |||
| Promotion tag radius | product_discount_radius | a slider | 0 |
| StyleChoices: normal — Standard · card — Cards | product_card_style | a dropdown | normal |
| Image marginSpacing between image and background | product_card_image_padding | a slider | 0 |
| Border | |||
| Thickness | product_card_border_thickness | a slider | 1 |
| Opacity | product_card_border_opacity | a slider | 20 |
| Border radius | product_card_border_radius | a slider | 0 |
| Shadow | |||
| Opacity | product_card_shadow_opacity | a slider | 0 |
| Vertical offset | product_card_shadow_offset_x | a slider | 0 |
| Horizontal offset | product_card_shadow_offset_y | a slider | 0 |
| Blur | product_card_shadow_blur | a slider | 0 |
Collection cards
| Field | Setting id | Kind | Default |
|---|---|---|---|
| StyleChoices: normal — Standard · card — Cards | collection_card_style | a dropdown | normal |
| Image marginSpacing between image and background | collection_card_image_padding | a slider | 0 |
| Border | |||
| Thickness | collection_card_border_thickness | a slider | 1 |
| Opacity | collection_card_border_opacity | a slider | 20 |
| Border radius | collection_card_border_radius | a slider | 0 |
| Shadow | |||
| Opacity | collection_card_shadow_opacity | a slider | 0 |
| Vertical offset | collection_card_shadow_offset_x | a slider | 0 |
| Horizontal offset | collection_card_shadow_offset_y | a slider | 0 |
| Blur | collection_card_shadow_blur | a slider | 0 |
Blog cards
| Field | Setting id | Kind | Default |
|---|---|---|---|
| StyleChoices: normal — Standard · card — Cards | article_card_style | a dropdown | normal |
| Image marginSpacing between image and background | article_card_image_padding | a slider | 0 |
| Border | |||
| Thickness | article_card_border_thickness | a slider | 0 |
| Opacity | article_card_border_opacity | a slider | 10 |
| Border radius | article_card_border_radius | a slider | 0 |
| Shadow | |||
| Opacity | article_card_shadow_opacity | a slider | 0 |
| Vertical offset | article_card_shadow_offset_x | a slider | 0 |
| Horizontal offset | article_card_shadow_offset_y | a slider | 0 |
| Blur | article_card_shadow_blur | a slider | 0 |
Other cards
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Border | |||
| Thickness | card_border_thickness | a slider | 1 |
| Opacity | card_border_opacity | a slider | 20 |
| Border radius | card_border_radius | a slider | 0 |
| Shadow | |||
| Opacity | card_shadow_opacity | a slider | 0 |
| Vertical offset | card_shadow_offset_x | a slider | 0 |
| Horizontal offset | card_shadow_offset_y | a slider | 0 |
| Blur | card_shadow_blur | a slider | 0 |
Dropdowns and pop-ups
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Border | |||
| Thickness | modal_border_thickness | a slider | 1 |
| Opacity | modal_border_opacity | a slider | 10 |
| Border radius | modal_border_radius | a slider | 0 |
| Shadow | |||
| Opacity | modal_shadow_opacity | a slider | 0 |
| Vertical offset | modal_shadow_offset_x | a slider | 0 |
| Horizontal offset | modal_shadow_offset_y | a slider | 4 |
| Blur | modal_shadow_blur | a slider | 5 |
Drawers
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Border | |||
| Thickness | drawer_border_thickness | a slider | 1 |
| Opacity | drawer_border_opacity | a slider | 10 |
| Shadow | |||
| Opacity | drawer_shadow_opacity | a slider | 0 |
| Vertical offset | drawer_shadow_offset_x | a slider | 0 |
| Horizontal offset | drawer_shadow_offset_y | a slider | 4 |
| Blur | drawer_shadow_blur | a slider | 5 |
Cart
Whether adding to cart opens a drawer or a page, and the free-shipping and discount progress messages.
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Cart styleChoices: drawer — Drawer · page — Enter the shopping cart page · notification — Pop-up notification | cart_add_type | a dropdown | drawer |
| Color scheme | cart_color_scheme | one of the theme's colour schemes | scheme-1 |
| Free shipping threshold (cents)Used by both the cart page and the drawer, so they can no longer disagree. | cart_free_shipping_cents | single line of text | 17500 |
| First checkpoint label | cart_checkpoint_1_label | single line of text | Free shipping |
| Second checkpoint (cents)Leave empty to show a single checkpoint. | cart_checkpoint_2_cents | single line of text | empty |
| Second checkpoint label | cart_checkpoint_2_label | single line of text | Free gift |
| Checkpoint 1 discount codeOptional. The code this reward applies, printed by {code} in the lines below. | cart_checkpoint_1_code | single line of text | empty |
| Checkpoint 2 discount codeOptional. The code this reward applies, printed by {code} in the lines below. | cart_checkpoint_2_code | single line of text | empty |
| Reward meter — still to goShown while a reward is still ahead. Tags: {amount} left to reach it, {reward} its name, {code} its discount code, {threshold} the first checkpoint, {total} the cart total. | cart_progress_away_text | single line of text | You’re {amount} away from {reward} |
| Reward meter — everything unlockedShown once every checkpoint is reached. Same tags, where {reward} and {code} are the last checkpoint's. | cart_progress_all_unlocked_text | single line of text | {reward} unlocked ✓ |
| Reward meter — empty cartShown when the cart is empty. Same tags, where {reward} and {code} are the first checkpoint's. | cart_progress_empty_text | single line of text | Free US shipping on orders {threshold}+ |
Social media
The links behind the social icons in the footer.
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Account | |||
| social_media_facebook_link | single line of text | empty | |
| X（Twitter） | social_media_twitter_link | single line of text | empty |
| social_media_pinterest_link | single line of text | empty | |
| social_media_instagram_link | single line of text | empty | |
| Snapchat | social_media_snapchat_link | single line of text | empty |
| TikTok | social_media_tiktok_link | single line of text | empty |
| Youtube | social_media_youtube_link | single line of text | empty |
| Vimeo | social_media_vimeo_link | single line of text | empty |
| Tumblr | social_media_tumblr_link | single line of text | empty |
| Line | social_media_line_link | single line of text | empty |
| social_media_linkedin_link | single line of text | empty | |
| Social media 1 | |||
| social_media_custom1_image | image picker | — | |
| Name | social_media_custom1_name | single line of text | — |
| Link | social_media_custom1_link | single line of text | empty |
| Social media 2 | |||
| social_media_custom2_image | image picker | — | |
| Name | social_media_custom2_name | single line of text | — |
| Link | social_media_custom2_link | single line of text | empty |
| Social media 3 | |||
| social_media_custom3_image | image picker | — | |
| Name | social_media_custom3_name | single line of text | — |
| Link | social_media_custom3_link | single line of text | empty |
| Social media 4 | |||
| social_media_custom4_image | image picker | — | |
| Name | social_media_custom4_name | single line of text | — |
| Link | social_media_custom4_link | single line of text | empty |
| Social media 5 | |||
| social_media_custom5_image | image picker | — | |
| Name | social_media_custom5_name | single line of text | — |
| Link | social_media_custom5_link | single line of text | empty |
Favicon
The small icon in the browser tab.
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Site iconDisplayed in browser tab, size: 32 x 32px | favicon_image | favicon upload | empty |
7 · How do I…
The jobs that come up most, start to finish.
Change the homepage headline or hero picture
- Open Online store › Themes › Customise, with Home selected.
- Click Hero banner in the left-hand list.
- Heading line 1 and Heading line 2 are the two lines of the headline.
- For the picture, use the Image picker. Whatever you put there overrides the Theme asset path below it.
- Always fill in Image alt text — it is what a screen reader announces and what shows if the picture fails to load.
Change the free-shipping threshold
- It is stored in three places and all three must agree, or the site will promise something the checkout does not honour.
- Theme settings › Cart › Free shipping threshold — drives the cart drawer's progress bar.
- The Cart workspace section on the Cart template — drives the cart page.
- The Product purchase workspace section on each product template — drives the message in the buy box.
- All three are in cents: $175.00 is
17500. - The actual shipping rule lives in Settings › Shipping in the admin. Change that too.
Add a press mention
- Customise the Press page.
- Open the Press coverage section and click Add block › Coverage entry.
- Fill in outlet, date, headline and the link to the article.
- Once real coverage has replaced the placeholders, empty the section's Note under the list field — it carries the placeholder disclaimer.
Publish a blog post
- Write the post in Blog › Posts, choosing the right blog: Field notes appears at
/blogs/news, Press at/blogs/press. - Give it a featured image — that becomes the hero at the top of the article and the picture on its listing card. Without one, both are blank.
- Write an excerpt. That is the paragraph on the listing card; the post's body is not used as a substitute, so with no excerpt the card is just a title.
- Add a tag if you want a category shown above the title on the card — the first tag is the one used.
- Publish. That is the whole job: the listing reads the blog directly, so the post appears at the top on its own, and it joins the “Keep reading” row on the other articles. Nothing needs touching in the theme editor.
Change a product's price on the site
- Change it in Products in the admin first. That is the price the customer is actually charged.
- Then change the display copies, which do not update themselves: the Coverage option or Pack option blocks in the product's Product purchase workspace, the Sticky purchase bar, and any Product card in a grid that shows that product.
- Leaving these out of step is the single most common way this site ends up contradicting its own checkout.
Swap a product photograph
- Upload the new picture, then set it in the relevant Media field of the Product purchase workspace.
- Check each tier's Visible media keys — a tier only shows the images listed there.
- Photography is governed by the Brand Book: adults only, never children, and pets only at a distance.
Edit the FAQ
- Customise the FAQ page and open FAQ workspace.
- Each FAQ category block is a tab. Each FAQ item block under it is one question.
- Blocks are reordered by dragging, which is how you change the order of the tabs and the questions.
Change the navigation
- The header navigation is not a Shopline menu. Editing Navigation in the admin will do nothing.
- Customise any page, open the Header section, and edit the Navigation item label and URL pairs.
- Desktop and mobile are separate lists. Change both.
Take a section off a page without deleting it
- Click the section in the left-hand list, open its ⋯ menu and choose Hide.
- It keeps all its content and can be switched back on later. The homepage's Text marquee is currently hidden this way.
Change the colours across the whole site
- Theme settings › Colour, then edit a scheme.
- Editing a scheme changes every section using it, everywhere. Check the colour scheme table in this playbook to see what you are about to affect.
- To change one section only, point that section at a different scheme instead of editing the scheme.
8 · Section reference
Every section in the theme, every setting, every block field. Use the filter box at the top of the page to jump to one.
Setting id is the internal name. You will not see it in the editor, but it is what to quote if you ever need to describe a field precisely to a developer.
Built for Backporch Naturals
These were designed for this site. They are the ones you will actually edit.
Article body article-body
The article's actual words.
Where it appears: Article
Worth knowing
- No content fields at all — every word comes from the post's body in the blog editor. This section only decides the colour scheme and the spacing around the text.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | article-body |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Article callout article-callout
The green promotional block that sits partway down an article, pushing back to a product.
Where it appears: Article
Worth knowing
- The same callout shows on every article. It is not per-post.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | article-callout |
| Heading | heading | single line of text | Set a perimeter that holds |
| Body copy | copy | multiple lines of text | Corners first, then the long runs. The 6-Station Kit covers a typical yard. |
| CTA label | cta_label | single line of text | Shop the Starter Kit |
| CTA URL | cta_url | a link | /products/starter-kits |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-3 |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Article hero article-hero
The large image directly under the article title.
Where it appears: Article
Worth knowing
- There is nothing to fill in here. The image normally comes from the post's featured image, set on the post itself in Blog › Posts. An article with no featured image gets no hero.
- Six articles are an exception, and it will catch you out. The six field-notes posts carried over during the migration have their original covers stored in the theme and matched by the article's handle. For those six the stored file wins: changing the featured image in the admin will not change the cover on the site. They are listed in
components/article-cover.html, and changing one is a developer job. - Every other article — all press posts, and anything written from now on — uses its featured image normally.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | article-hero |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Keep reading article-keep-reading
The row of further posts at the foot of an article.
Where it appears: Article
Worth knowing
- The four newest posts from whichever blog the article belongs to, chosen automatically. Only the eyebrow above them is editable, so a new post joins these lists on its own.
- Card covers follow the same rule as the article hero — the six migrated field-notes posts use their stored covers rather than their featured image.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | article-keep-reading |
| Eyebrow | eyebrow | single line of text | Keep reading |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Article title band article-title
The band at the very top of a blog or press article: breadcrumbs, the article's category, its title and the read time.
Where it appears: Article
Worth knowing
- The title itself comes from the blog post in Blog › Posts, not from here. This section only supplies the furniture around it.
- The category shown beside the date is the article's first tag; with no tag it uses the blog's name. Fallback category is only reached when there is neither, so editing it usually changes nothing — tag the post instead.
- Read time is typed by hand and is the same on every article — it is not calculated.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | article-title |
| Breadcrumb label | breadcrumb_label | single line of text | Home |
| Breadcrumb URL | breadcrumb_url | a link | / |
| Breadcrumb parent label | breadcrumb_parent_label | single line of text | Press & blog |
| Breadcrumb parent URL | breadcrumb_parent_url | a link | /pages/press |
| Fallback category | fallback_category | single line of text | Field notes |
| Read time | read_time | single line of text | 2 min read |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-2 |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Benefit grid benefit-grid
A row of benefits, each an icon with a heading and a short paragraph.
Where it appears: Home, Pods (page), Product (page), Product — Pods, Product — Starter Kit
Worth knowing
- Variant switches between the icon grid and rule-topped columns (no icons, a hairline above each column).
- Icons are SVG files already in the theme, referenced by path — see Icons and images in the rules above.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | benefit-grid |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-7 |
| Content color scheme | content_color_scheme | one of the theme's colour schemes | scheme-1 |
| VariantChoices: grid — Icon grid · columns — Rule-topped columns | variant | a dropdown | grid |
| Button label | button_label | single line of text | Learn more |
| Button URL | button_url | a link | / |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Benefit
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Theme asset path | icon_asset_path | single line of text | images/icon.svg |
| Title | title | single line of text | Benefit heading |
| Body copy | copy | multiple lines of text | Explain the customer benefit in one concise paragraph. |
Contact support workspace contact-support-workspace
The contact page: the form on one side, the support cards and FAQ prompt on the other.
Where it appears: Contact
Worth knowing
- The six Topic option fields fill the form's dropdown. Empty ones are skipped.
- The success message is assembled from four fields — Success thanks, Success body, Success link label and Success body after link — so the link can sit inside the sentence. Mind the spacing when you edit them.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | contact-support-workspace |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-7 |
| Success panel color scheme | success_color_scheme | one of the theme's colour schemes | scheme-3 |
| Name field label | name_label | single line of text | Your name |
| Email field label | email_label | single line of text | |
| Topic field label | topic_label | single line of text | What can we help with? |
| Topic option | topic_1 | single line of text | Which kit size do I need? |
| Topic option | topic_2 | single line of text | Setup and placement |
| Topic option | topic_3 | single line of text | Order status or shipping |
| Topic option | topic_4 | single line of text | Returns |
| Topic option | topic_5 | single line of text | Wholesale or retail inquiry |
| Topic option | topic_6 | single line of text | Press |
| Message field label | message_label | single line of text | Message |
| Submit button label | submit_label | single line of text | SEND MESSAGE |
| Success heading | success_heading | single line of text | Message sent |
| Success thanks prefix | success_thanks | single line of text | Thanks |
| Success body | success_body | multiple lines of text | — we reply within one business day. In the meantime, the |
| Success link label | success_link_label | single line of text | FAQs |
| Success link URL | success_link_url | a link | /pages/faq |
| Success body after link | success_body_after | single line of text | cover most setup and placement questions. |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Support CTA card
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable card key | card_key | single line of text | faq |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-4 |
| Heading | heading | single line of text | Faster answers |
| Body copy | copy | multiple lines of text | Coverage, placement, refills and shipping are all covered in the FAQs. |
| Button label | button_label | single line of text | READ THE FAQS |
| Button URL | button_url | a link | /pages/faq |
Block — Support card
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable card key | card_key | single line of text | card |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-2 |
| Eyebrow | eyebrow | single line of text | |
| Title | title | single line of text | support@example.com |
| Body copy | copy | multiple lines of text | Replies within one business day |
Coverage grid coverage-grid
The 'choose the right coverage' comparison — a card per kit size, one of which can be featured.
Where it appears: Home
Worth knowing
- Featured card gives one card the heavier treatment. Turn it on for exactly one card.
- Leave a card's Link empty and it stops being clickable.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | coverage-grid |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-9 |
| Content color scheme | content_color_scheme | one of the theme's colour schemes | scheme-3 |
| Eyebrow | eyebrow | single line of text | Compare options |
| Heading | heading | single line of text | Choose the right coverage |
| Body copy | copy | multiple lines of text | Help customers understand which option fits their needs. |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
| Background photographFills the section and switches the intro type to white. | background_asset_path | single line of text | empty |
Block — Coverage card
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | image_alt | single line of text | empty |
Theme asset pathPath to a file already uploaded to the theme, e.g. images/hero.jpg. Ignored when the Image picker above it has a picture in it. | asset_path | single line of text | empty |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-2 |
| Featured card | featured | on / off | Off |
| Badge | badge | single line of text | empty |
| Title | title | single line of text | Option |
| Body copy | copy | multiple lines of text | Describe who this option is for. |
| LinkWhere this card goes — usually its product page. Leave blank for a card that is not clickable. | link_url | single line of text | empty |
Editorial card grid editorial-card-grid
Alternating image-and-text story cards, used on the homepage to lead into the blog.
Where it appears: Home
Worth knowing
- Card order flips whether the picture or the words come first, so alternating the cards gives the zig-zag.
- Leave Theme asset path empty for a text-only card — the card collapses rather than holding an empty picture box.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | editorial-card-grid |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-7 |
| Content color scheme | content_color_scheme | one of the theme's colour schemes | scheme-1 |
| Heading | heading | single line of text | Explore the story |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Editorial card
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Card orderChoices: media_first — Media first · content_first — Content first | order | a dropdown | media_first |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-4 |
| Image | image | image picker | — |
Theme asset pathLeave empty for a text-only card — the card collapses instead of holding an empty image box.Path to a file already uploaded to the theme, e.g. images/hero.jpg. Ignored when the Image picker above it has a picture in it. | asset_path | single line of text | empty |
| Image alt text | image_alt | single line of text | empty |
| Image position | object_position | single line of text | center center |
| Title | title | single line of text | Editorial heading |
| Body copy | copy | multiple lines of text | Tell a concise story connected to the image. |
| Link label | link_label | single line of text | empty |
| Link URL | link_url | a link | / |
Editorial feed editorial-feed
The blog and press listings: the newest post as a featured entry, then a grid of cards.
Where it appears: Blog, Press blog
Worth knowing
- On a blog page this fills itself. It reads that blog's own articles, newest first, so publishing a post in Blog › Posts puts it at the top of the listing with nothing to do here. Both Field notes and Press work this way and hold no blocks at all.
- The Featured entry and Entry card blocks are a fallback, used only where there is no blog in scope — a page template or the homepage. On a blog page they are ignored. Adding blocks to the blog listing to try to change it will do nothing.
- A card's text is the article's excerpt from the admin. With no excerpt the card shows just the title and the link — deliberately, so the call to action does not run on from the headline. The article body is not used as a substitute.
- The category line above a title is the article's first tag, then its publish month.
- Articles per page is a text field, not a number picker. Type digits only.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | editorial-feed |
| Articles per page | page_size | single line of text | 12 |
| Featured link label | featured_cta | single line of text | Read the story |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-7 |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Entry card
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Image | image | image picker | — |
Theme asset pathPath to a file already uploaded to the theme, e.g. images/hero.jpg. Ignored when the Image picker above it has a picture in it. | asset_path | single line of text | images/editorial.jpg |
| Image alt text | image_alt | single line of text | empty |
| Image focal position | object_position | single line of text | center center |
| Metadata line | meta | single line of text | TOPIC · DATE |
| Title | title | single line of text | Story title |
| Excerpt | excerpt | multiple lines of text | Summarize the story. |
| Link URL | link_url | a link | / |
Block — Featured entry
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Image | image | image picker | — |
Theme asset pathPath to a file already uploaded to the theme, e.g. images/hero.jpg. Ignored when the Image picker above it has a picture in it. | asset_path | single line of text | images/editorial.jpg |
| Image alt text | image_alt | single line of text | empty |
| Image focal position | object_position | single line of text | center center |
| Metadata line | meta | single line of text | FEATURED |
| Title | title | single line of text | Featured story |
| Excerpt | excerpt | multiple lines of text | Introduce the featured story. |
| Link label | link_label | single line of text | READ THE GUIDE |
| Link URL | link_url | a link | / |
Guarantee panel guarantee-panel
The 30-day guarantee block: heading, two paragraphs, a seal and a row of short guarantee points.
Where it appears: Pods (page), Product (page), Product — Pods, Product — Starter Kit
Worth knowing
- The seal is currently a drawn placeholder. Swap it for the designed brand seal when it exists.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | guarantee-panel |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-7 |
| Content color scheme | content_color_scheme | one of the theme's colour schemes | scheme-7 |
| Heading lead-in | heading_lead | single line of text | 30-Day Backporch Guarantee: |
| Heading | heading | single line of text | love it or your money back |
| First paragraph | copy_1 | multiple lines of text | empty |
| Second paragraph | copy_2 | multiple lines of text | empty |
| Policy link text | policy_label | single line of text | Full policy |
| Policy link URL | policy_url | a link | / |
| Seal imageCurrently a drawn placeholder — swap for the designed brand seal. | seal_asset_path | single line of text | empty |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Guarantee point
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Theme asset path | icon_asset_path | single line of text | empty |
| Label | label | single line of text | Guarantee point |
Guidance with statistics guidance-stat-list
Sizing guidance — a short explanation beside a set of value-and-description rows ('4–6 Stations · a typical yard').
Where it appears: About, Shop all
Worth knowing
- Layout variant Evidence statistics restyles the rows for proof figures rather than sizing advice.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Layout variantChoices: default — Default · evidence — Evidence statistics | migration_variant | a dropdown | default |
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | guidance-stat-list |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-3 |
| Statistic row color scheme | row_color_scheme | one of the theme's colour schemes | scheme-2 |
| Eyebrow | eyebrow | single line of text | Need guidance? |
| Heading | heading | single line of text | Choose the right setup |
| Body copy | copy | multiple lines of text | Add practical guidance that helps customers choose. |
| Link label | link_label | single line of text | Read the guide |
| Link URL | link_url | a link | / |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Guidance statistic
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Value | value | single line of text | 4–6 |
| Description | description | multiple lines of text | Describe who this option is for. |
Image banner image-banner
The big picture-led banner. Used both for the homepage hero and for the closing call-to-action at the foot of several pages.
Where it appears: Home, About, How it works
Worth knowing
- Banner role is what changes the whole look. Hero is the tall homepage opener; Closing call to action and its compact variant are the end-of-page bands; Statement hero is the quieter, type-led version.
- Heading line 1 and line 2 are two separate fields so the headline breaks in the same place every time. Put the whole headline in line 1 and leave line 2 empty if you would rather let it wrap naturally.
- Leave Secondary button label empty to show a single button.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | image-banner |
| Banner roleChoices: hero — Hero · closing — Closing call to action · closing-compact — Compact closing call to action · statement — Statement hero | variant | a dropdown | hero |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-10 |
| Content color scheme | content_color_scheme | one of the theme's colour schemes | scheme-5 |
| Image | image | image picker | — |
Theme asset pathPath to a file already uploaded to the theme, e.g. images/hero.jpg. Ignored when the Image picker above it has a picture in it. | asset_path | single line of text | images/banner.jpg |
| Image alt text | image_alt | single line of text | empty |
| Eyebrow | eyebrow | single line of text | Featured |
| Heading line 1 | heading_line_1 | single line of text | A clear headline |
| Heading line 2 | heading_line_2 | single line of text | empty |
| Body copy | copy | multiple lines of text | Introduce the offer or story in one concise paragraph. |
| Primary button label | primary_label | single line of text | Shop now |
| Primary button URL | primary_url | a link | /collections/all |
| Secondary button label | secondary_label | single line of text | Learn more |
| Secondary button URL | secondary_url | a link | / |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Buttons
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Button text | button_text_1 | single line of text | Shop this |
| URL | button_url_1 | a link | empty |
| Apply secondary button style | secondary_button_style_1 | on / off | On |
| Button text 2 | button_text_2 | single line of text | Shop all |
| URL 2 | button_url_2 | a link | empty |
| Apply secondary button style | secondary_button_style_2 | on / off | Off |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Content Containers
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Display background color | show_background_color | on / off | Off |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Description
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Body | text | multiple lines of text | And optional subtext |
| Text alignment | text_align | left / centre / right | center |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Block — Subtitle
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Subtitle | subheading | single line of text | Subtitle |
| Text alignmentChoices: left — Left · center — Medium · right — Right | text_align | a dropdown | center |
Block — Title
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | heading | multiple lines of text | Two Line Title Slide |
| Text sizeChoices: title1 — Extra large · title2 — Large · title3 — Medium · title4 — Small | text_size | a dropdown | title2 |
| Text alignmentChoices: left — Left · center — Medium · right — Right | text_align | a dropdown | center |
Image hotspots image-hotspots
An annotated photograph. Numbered markers sit on the image; tapping one opens a small panel explaining that part.
Where it appears: Home, Pods (page), Product (page), Product — Pods, Product — Starter Kit
Worth knowing
- Marker and panel positions are percentages from the top-left of the image. Vertical position 50% / Horizontal position 50% is dead centre.
- If you replace the photograph, every marker position has to be re-checked — they are tied to the picture, not to anything in it.
- Initial panel is what shows before the visitor taps anything.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | image-hotspots |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-8 |
| Content color scheme | content_color_scheme | one of the theme's colour schemes | scheme-2 |
| Panel color scheme | panel_color_scheme | one of the theme's colour schemes | scheme-2 |
| Eyebrow | eyebrow | single line of text | Explore the details |
| Heading | heading | single line of text | How does it work? |
| Helper text | helper | single line of text | Tap a marker to learn more |
| Image | image | image picker | — |
Theme asset pathPath to a file already uploaded to the theme, e.g. images/hero.jpg. Ignored when the Image picker above it has a picture in it. | asset_path | single line of text | images/annotated-image.jpg |
| Image alt text | image_alt | single line of text | empty |
| Initial panel title | initial_title | single line of text | Selected detail |
| Initial panel copy | initial_copy | multiple lines of text | Explain the selected detail. |
| Initial panel vertical position | initial_panel_top | single line of text | 55% |
| Initial panel horizontal position | initial_panel_left | single line of text | 26% |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
| Button text | cta_label | single line of text | empty |
| Button URL | cta_url | a link | / |
Button position'center' centres it under the image. A percentage such as 60% offsets it from the left instead.center centres the button under the image. A percentage such as 60% offsets it from the left instead. | cta_offset | single line of text | 60% |
Block — Hotspot
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | title | single line of text | Hotspot title |
| Body copy | copy | multiple lines of text | Explain this point on the image. |
| Vertical position | top | single line of text | 50% |
| Horizontal position | left | single line of text | 50% |
| Panel vertical position | panel_top | single line of text | 50% |
| Panel horizontal position | panel_left | single line of text | 30% |
| Expanded initially | expanded | on / off | Off |
Image-text module image-with-text
One image beside a column of copy. Used for the founder story and the starter-kit cross-sell.
Where it appears: About, Pods (page), Product (page) (hidden), Product — Pods, Product — Starter Kit (hidden)
Worth knowing
- Layout variant covers four quite different looks — read them as four sections sharing one set of fields.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Layout variantChoices: default — Default · cross-sell — Media cross-sell · editorial-story — Editorial story · cross-sell-large — Cross-sell (large) | migration_variant | a dropdown | default |
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | image-with-text |
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-3 |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Buttons
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Button text | text | single line of text | Optional button |
| URL | link | a link | empty |
| Apply secondary button style | use_secondary_style | on / off | On |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Block — Content Containers
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Image
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Image | image | image picker | — |
Theme asset pathPath to a file already uploaded to the theme, e.g. images/hero.jpg. Ignored when the Image picker above it has a picture in it. | asset_path | single line of text | images/product.png |
| Image alt text | image_alt | single line of text | Featured product |
| Image sizeChoices: unset — Original image ratio · 1/1 — 1:1 · 4/3 — 4:3 · 3/2 — 3:2 · 16/9 — 16:9 | aspect_ratio | a dropdown | unset |
Block — Rich text
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Body | content | formatted text (bold, links, lists) | Pair large text with a full-width image to draw attention to an important detail of your brand or product line. |
| Text alignmentChoices: left — Left · center — Medium · right — Right | text_align | a dropdown | left |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Subtitle
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Subtitle | subtitle | single line of text | Subtitle |
| Text alignmentChoices: left — Left · center — Medium · right — Right | text_align | left / centre / right | left |
Block — Title
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | heading | multiple lines of text | Image with text |
| Text sizeChoices: title1 — Extra large · title2 — Large · title3 — Medium · title4 — Small | text_size | a dropdown | title3 |
| Text alignmentChoices: left — Left · center — Medium · right — Right | text_align | a dropdown | left |
Ingredient panel ingredient-panel
The actives table, the inactives line and the directions — the 'what is in a Pod' block.
Where it appears: Pods (page), Product (page), Product — Pods, Product — Starter Kit
Worth knowing
- Show the Source column is deliberately off. Leave it off until sourcing for every active is confirmed, because turning it on exposes the placeholder 'To be confirmed' text.
- Ingredient percentages must match the current approved label exactly. This is regulated copy — see the Brand Book.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | ingredient-panel |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Content color scheme | content_color_scheme | one of the theme's colour schemes | scheme-1 |
| Eyebrow | eyebrow | single line of text | What is in a Pod |
| Heading | heading | single line of text | Plant-derived, and nothing hidden |
| Body copy | copy | multiple lines of text | empty |
| Actives column heading | col_active | single line of text | Actives |
| Percent column heading | col_percent | single line of text | Percent |
| Show the Source columnLeave off until the sourcing for each active is confirmed.Leave off. Turning it on publishes the placeholder 'To be confirmed' text against every active. | show_source | on / off | Off |
| Source column heading | col_source | single line of text | Source |
| Inactives label | inactives_label | single line of text | Inactives: |
| Inactives text | inactives | multiple lines of text | empty |
| Directions text | directions | multiple lines of text | empty |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Active ingredient row
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Ingredient | name | single line of text | Clove oil |
| Percent | percent | single line of text | 1.47% |
| SourceLeave as 'To be confirmed' until the merchant supplies it. | source | single line of text | To be confirmed |
Block — Ingredient card
| Field | Setting id | Kind | Default |
|---|---|---|---|
Theme asset pathPath to a file already uploaded to the theme, e.g. images/hero.jpg. Ignored when the Image picker above it has a picture in it. | asset_path | single line of text | empty |
| Title | image_alt | single line of text | empty |
| Title | title | single line of text | Ingredient |
| Body copy | copy | multiple lines of text | empty |
404 error page main-not-found
The 404 page.
Where it appears: 404
Worth knowing
- Set both Illustration and Second illustration and the page shows one of the two at random on each visit. Set only one and that one always shows.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | not-found |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-8 |
| Content color scheme | content_color_scheme | one of the theme's colour schemes | scheme-2 |
| IllustrationOverrides the asset path below. Leave empty to use the theme asset. | illustration | image picker | — |
| Theme asset path | illustration_asset_path | single line of text | empty |
| Illustration alt text | illustration_alt | single line of text | Someone in a yard, puzzled, with mosquitoes buzzing past a spilled drink |
| Second illustrationWhen set, the page shows one of the two at random on each visit. | illustration_2 | image picker | — |
| Second illustration asset path | illustration_2_asset_path | single line of text | empty |
| Second illustration alt text | illustration_2_alt | single line of text | A gardener in a yard, puzzled, holding a running hose |
| Eyebrow | eyebrow | single line of text | Error 404 |
| Heading | heading | single line of text | Nothing here but mosquitoes |
| Body copy | copy | multiple lines of text | This page has moved, or it never existed. Your yard is still worth taking back — start here. |
| Primary button label | primary_label | single line of text | Shop the Starter Kit |
| Primary button link | primary_url | single line of text | /products/starter-kits |
| Secondary button label | secondary_label | single line of text | How it works |
| Secondary button link | secondary_url | single line of text | /pages/how-it-works |
| Quick link 1 label | link_1_label | single line of text | Home |
| Quick link 1 link | link_1_url | single line of text | / |
| Quick link 2 label | link_2_label | single line of text | Refill Pods |
| Quick link 2 link | link_2_url | single line of text | /products/mosquito-pods |
| Quick link 3 label | link_3_label | single line of text | Contact us |
| Quick link 3 link | link_3_url | single line of text | /pages/contact |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Press coverage press-coverage
The list of press mentions — outlet, date, headline, link.
Where it appears: Press
Worth knowing
- Note under the list exists to carry the 'placeholder coverage' disclaimer. Empty it once real coverage replaces the placeholders.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | press-coverage |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-2 |
| Content color scheme | content_color_scheme | one of the theme's colour schemes | scheme-2 |
| Heading | heading | single line of text | In the press |
| Note under the listLeave empty once real coverage replaces the placeholders. | note | single line of text | empty |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Coverage entry
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Outlet | outlet | single line of text | Outlet name |
| Date | date | single line of text | Month 2026 |
| Headline | headline | single line of text | Headline of the coverage goes here. |
| Link to the article | url | a link | empty |
Process with media process-media
The workhorse of this theme. A headline and copy on one side, a picture on the other, and a numbered list of steps or a set of statistics underneath. Used for 'How it works', the evidence blocks and the placement guide.
Where it appears: Home, How it works, Pods (page), Product (page), Product — Pods, Product — Starter Kit
Worth knowing
- Content mode is the big switch. Process shows numbered steps. Evidence shows statistics instead. Scroll-synced steps swaps the picture as the reader scrolls through the steps.
- Steps expand one at a time turns the steps into an accordion with a counter. Useful when each step has a lot to say.
- Media is a slider ignores the section's single image and uses the Media slide blocks instead.
- The fact card is the small highlighted box over the image. Give it a Fact card link to turn it into a button.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | process-media |
| Content modeChoices: process — Process · evidence — Evidence · scroll-steps — Scroll-synced steps | mode | a dropdown | process |
| Layout variantChoices: default — Default · placement — Placement checklist | migration_variant | a dropdown | default |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-8 |
| Content color scheme | content_color_scheme | one of the theme's colour schemes | scheme-2 |
| Fact card color scheme | fact_color_scheme | one of the theme's colour schemes | scheme-4 |
| Media before copy | media_first | on / off | Off |
| Media heightChoices: default — Default · short — Short | media_height | a dropdown | default |
| Plain step rows | steps_plain | on / off | Off |
| Steps expand one at a timeShows a + on each step, swaps the media to the open step and adds an n / total counter. | steps_expandable | on / off | Off |
| Eyebrow | eyebrow | single line of text | How it works |
| Heading | heading | single line of text | Explain the process |
| Body copy | copy | multiple lines of text | Introduce the process or evidence in one concise paragraph. |
| Link label | link_label | single line of text | Learn more |
| Show the link as a button | link_as_button | on / off | Off |
| Link URL | link_url | a link | / |
| Image | image | image picker | — |
Theme asset pathPath to a file already uploaded to the theme, e.g. images/hero.jpg. Ignored when the Image picker above it has a picture in it. | asset_path | single line of text | images/process.jpg |
| Image alt text | image_alt | single line of text | empty |
| Fact value | fact_value | single line of text | 30 days |
| Fact label | fact_label | multiple lines of text | A concise supporting fact |
| Fact card linkSet a link to turn the fact card into a call to action. On phones it gains a shop prompt. | fact_url | a link | empty |
| Fact card link label | fact_link_label | single line of text | Shop the Starter Kit |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
| Media is a sliderAdds arrows and steps through the slide blocks instead of showing one still image. | media_slider | on / off | Off |
| Previous arrow label | slider_prev_label | single line of text | Previous image |
| Next arrow label | slider_next_label | single line of text | Next image |
Block — Media slide
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Image | image | image picker | — |
Theme asset pathPath to a file already uploaded to the theme, e.g. images/hero.jpg. Ignored when the Image picker above it has a picture in it. | asset_path | single line of text | empty |
| Image alt text | image_alt | single line of text | empty |
| Caption | caption | single line of text | empty |
Block — Statistic
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Value | value | single line of text | 5 |
| Label | label | multiple lines of text | Supporting statistic |
Block — Step
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Step number | number | single line of text | 01 |
| Title | title | single line of text | Step title |
| Body copy | copy | multiple lines of text | Describe this step. |
| Step image | image | image picker | — |
Theme asset pathPath to a file already uploaded to the theme, e.g. images/hero.jpg. Ignored when the Image picker above it has a picture in it. | asset_path | single line of text | empty |
| Image alt text | image_alt | single line of text | empty |
Product card grid product-card-grid
A grid of product cards. Used for the featured products on the homepage and for the full shop catalogue.
Where it appears: Home, Shop all
Worth knowing
- Layout variant: Featured grid is the simple homepage row; Filterable catalog adds the All / Starter Kits / Refills filter used on the shop page.
- Native variant title is what makes a card specific. Several cards usually share one product and differ only by this — the three Starter Kit cards are one product, the three Pod packs another. It must match the variant name exactly.
- It also decides where the card goes: a card naming a variant links to that tier, so the buy box opens on it. Name a variant the product no longer has and the card quietly falls back to the plain product page.
- Which picture a card shows runs in this order: the Image picker if set, otherwise the named variant's own media from the admin, otherwise the product's first image — but that one only for a card naming no variant, so cards sharing a product cannot all collapse onto the same picture. Then SHOPLINE-hosted fallback URL, then Theme asset path. In short: give a variant its image in the admin and the card follows; use the picker only to override.
- Each card's Catalog filter group is what the filter buttons match on. A card in the wrong group disappears from its filter.
- Mobile rail headings takes
slug:Labelpairs separated by commas, and the slugs must match the card groups. - Card prices are display text. See the note on the purchase workspace above — the same warning applies.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Layout variantChoices: grid — Featured grid · catalog — Filterable catalog | migration_variant | a dropdown | grid |
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | product-card-grid |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-7 |
| Content color scheme | content_color_scheme | one of the theme's colour schemes | scheme-1 |
| Eyebrow | eyebrow | single line of text | Featured products |
| Heading | heading | single line of text | Shop the collection |
| Header link label | header_link_label | single line of text | View all |
| Header link URL | header_link_url | a link | /collections/all |
| Supporting note | note | multiple lines of text | Add delivery or product-selection guidance here. |
| Filter group accessible label | filter_group_label | single line of text | Filter products |
| All-products filter label | filter_all_label | single line of text | All |
| Starter-kits filter label | filter_starter_label | single line of text | Starter Kits |
| Refills filter label | filter_refills_label | single line of text | Refills |
| Result-count noun | results_label | single line of text | products |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Mobile rail headingsslug:Label pairs, comma separated. Slugs match the card's Group setting, which the shop page filter also uses.slug:Label pairs, comma separated. The slugs must match the cards' Catalog filter group values. | rail_labels | single line of text | starter-kits:Starter Kits,refills:Refill Pods |
Block — Product card
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Product | product | product picker | — |
| Stable card key | card_key | single line of text | product-card |
| Native variant title | variant_title | single line of text | empty |
| Catalog filter groupChoices: starter-kits — Starter kits · refills — Refills | group | a dropdown | starter-kits |
| Image | image | image picker | — |
Theme asset pathPath to a file already uploaded to the theme, e.g. images/hero.jpg. Ignored when the Image picker above it has a picture in it. | asset_path | single line of text | images/product.png |
| SHOPLINE-hosted fallback URL | external_url | single line of text | empty |
| Image alt text | image_alt | single line of text | Product |
| Highlight this cardGives the card a heavier green border and a lift, to single it out. | featured | on / off | Off |
| Badge | badge | single line of text | Featured |
| Badge color scheme | badge_color_scheme | one of the theme's colour schemes | scheme-4 |
| Title | title | single line of text | Product title |
| Body copy | copy | multiple lines of text | A concise product description. |
| Package contents | contents | single line of text | empty |
| Price | price | single line of text | $99.00 |
| Compare-at price | compare_price | single line of text | empty |
| Button label | button_label | single line of text | Shop now |
| URL | url | a link | /collections/all |
Promotional modal promotional-modal
The email-capture pop-up, plus the small teaser button that brings it back after it is dismissed.
Where it appears: Home
Worth knowing
- Keep open in the theme editor only affects you while editing. Visitors never see the effect of it.
- Opening delay is in milliseconds — 3000 is three seconds.
- The Offer code here is only the text shown to the customer. The discount itself must exist in Discounts in the admin, spelled identically.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Keep open in the theme editorOnly affects the editor. The modal already shows itself while this section is selected; switch this on to pin it open while you work elsewhere. Visitors are unaffected. | editor_open | on / off | Off |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-8 |
| Backdrop color scheme | backdrop_color_scheme | one of the theme's colour schemes | scheme-5 |
| Panel color scheme | panel_color_scheme | one of the theme's colour schemes | scheme-2 |
| Teaser color scheme | teaser_color_scheme | one of the theme's colour schemes | scheme-2 |
| Image | image | image picker | — |
Theme asset pathPath to a file already uploaded to the theme, e.g. images/hero.jpg. Ignored when the Image picker above it has a picture in it. | asset_path | single line of text | images/offer.jpg |
| Image alt text | image_alt | single line of text | Featured offer |
| Eyebrow | eyebrow | single line of text | A special offer |
| Heading | heading | single line of text | Save on your first order |
| Body copy | copy | multiple lines of text | Join the list for product updates and a welcome offer. |
| Email field label | email_label | single line of text | Your email |
| Submit button label | submit_label | single line of text | Get my code |
| Error message | error_message | single line of text | That didn’t go through. Please try again. |
| Decline button label | decline_label | single line of text | No thanks |
| Close button label | close_label | single line of text | Close |
| Offer code label | code_label | single line of text | Your code |
| Offer codeDisplay text only — the discount must also exist in the admin under Discounts. | code | single line of text | WELCOME10 |
| Teaser button label | teaser_label | single line of text | 10% off |
| Opening delayMilliseconds. 3000 is three seconds. | delay_ms | a slider | 3000 |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Proof bar proof-bar
The thin dark band of short claims that runs under the hero.
Where it appears: Home, Pods (page), Product (page), Product — Pods, Product — Starter Kit
Worth knowing
- On a desktop screen every claim shows at once. On a phone it becomes a slider — which is the only place Show slider arrows and Seconds per claim have any effect.
- Each claim is two lines by design. Keep them to about three words each or they wrap badly on a phone.
- Claims here are customer-facing marketing copy. Check them against the Brand Book's claim bank before changing them.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | proof-bar |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-4 |
| Show slider arrowsPhone only. The band shows all claims at once on desktop. | show_arrows | on / off | On |
| Seconds per claimHow long each claim holds before the band advances, on a phone. | interval | a slider | 5 |
| Previous arrow label | prev_label | single line of text | Previous claim |
| Next arrow label | next_label | single line of text | Next claim |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Proof point
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Theme asset path | icon_asset_path | single line of text | empty |
| First line | line_1 | single line of text | Proof |
| Second line | line_2 | single line of text | statement |
Resource checklist resource-checklist
The press media-kit list — a heading, a paragraph, a checklist of what is available and a get-in-touch button.
Where it appears: Press
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | resource-checklist |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-4 |
| Eyebrow | eyebrow | single line of text | RESOURCES |
| Heading | heading | single line of text | Everything you need |
| Body copy | copy | multiple lines of text | Describe the available resources. |
| Button label | button_label | single line of text | GET IN TOUCH |
| Button URL | button_url | a link | / |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Resource item
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Text | text | multiple lines of text | Resource description |
Review summary review-summary
The star rating summary, with optional per-star breakdown bars.
Where it appears: Home, Pods (page), Product (page), Reviews (hidden), Product — Pods, Product — Starter Kit
Worth knowing
- Variant: Compact is the score and stars only; Detailed adds the rating bars; Deferred renders nothing and leaves the space for the reviews app to fill.
- The score, count and bars are typed in by hand — they are not read from the reviews app. If you use the app for real reviews, set this to Deferred so the two cannot disagree.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | customer-reviews |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-7 |
| Content color scheme | content_color_scheme | one of the theme's colour schemes | scheme-1 |
| VariantChoices: compact — Compact · detailed — Detailed · deferred — Deferred (app mount only) | variant | a dropdown | compact |
| Eyebrow | eyebrow | single line of text | What customers are saying |
| Heading | heading | single line of text | Customer reviews |
| Stars | stars | single line of text | ★★★★★ |
| Empty stars | stars_empty | single line of text | empty |
| Star color | star_color | colour picker | #D9A441 |
| Review score | score | single line of text | 4.9 |
| Review count | count | single line of text | · 100 reviews |
| Button label | button_label | single line of text | Read all reviews |
| Button URL | button_url | a link | /collections/all |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Rating row
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Row label | label | single line of text | 5 ★ |
| Bar width | pct | single line of text | 75% |
| Count | count | single line of text | 96 |
Rich text rich-text
Headline-and-paragraph blocks. The most reused section in the theme — page introductions, closing calls to action and standalone narrative passages are all this section.
Where it appears: Blog, Press blog, About, Contact, FAQ, How it works, Pods (page), Press, Product (page), Reviews, Shop all, Product — Pods, Product — Starter Kit
Worth knowing
- Layout variant changes it completely: Page introduction (with breadcrumbs), Inverse page introduction (on dark), Centered call to action, Centered narrative, or plain Default.
- The inline-link fields let a sentence carry a link mid-paragraph: Body copy, then Inline link label, then Copy after inline link are concatenated into one paragraph. There is a second set for a second link.
- The Season photograph fields cross-fade behind the copy, in the order they are set. There are four slots but you do not have to fill them — the section cycles whichever ones hold a picture, which is how the About page runs three since winter was dropped. The lowest numbered one that is set is what shows before the cycle starts.
- Background photograph fills the section edge to edge and forces the type white.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Layout variantChoices: default — Default · page-intro — Page introduction · centered-cta — Centered call to action · page-intro-inverse — Inverse page introduction · centered-narrative — Centered narrative | migration_variant | a dropdown | default |
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | rich-text |
| Breadcrumb home label | breadcrumb_label | single line of text | Home |
| Breadcrumb home link | breadcrumb_url | a link | / |
| Breadcrumb current-page label | breadcrumb_current | single line of text | Page |
| Heading | heading | single line of text | Page heading |
| Render heading as secondary (h2) | heading_secondary | on / off | Off |
| Eyebrow | eyebrow | single line of text | Our story |
| Body copy | copy | multiple lines of text | Add supporting copy. |
| Inline link label | copy_link_label | single line of text | empty |
| Inline link URL | copy_link_url | a link | / |
| Copy after inline link | copy_after | single line of text | empty |
| Second inline link text | copy_link_2_label | single line of text | empty |
| Second inline link URL | copy_link_2_url | a link | / |
| Text after the second link | copy_after_2 | single line of text | empty |
| CTA container max width | cta_max_width | single line of text | empty |
| CTA heading font size | cta_heading_size | single line of text | empty |
| CTA vertical padding override | cta_padding_block | single line of text | empty |
| Button label | button_label | single line of text | Learn more |
| Button URL | button_url | a link | / |
| Background image | background_image | image picker | — |
| Season photograph 1Four photographs of the same view through the year. They cross-fade behind the copy, in the order set here; the first is what shows before the cycle starts. | season_image_1 | image picker | — |
| Season photograph 2 | season_image_2 | image picker | — |
| Season photograph 3 | season_image_3 | image picker | — |
| Season photograph 4 | season_image_4 | image picker | — |
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
| Background photographFills the section edge to edge and switches the type to white. | background_asset_path | single line of text | empty |
Image-text list text-columns-with-image
A set of cards in columns — used for the About page principles and the care tips.
Where it appears: About, How it works
Worth knowing
- Layout variant: Text-only principles drops the images; Tip cards gives each card the boxed treatment.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Layout variantChoices: default — Default · principles — Text-only principles · tips — Tip cards | migration_variant | a dropdown | default |
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | text-columns-with-image |
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Body
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Body | text | formatted text (bold, links, lists) | Use this section to explain a set of product features, to link to a series of pages, or to answer common questions about your products. Add images for emphasis. |
Block — Image
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Image | image | image picker | — |
Block — Image-text card
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Theme asset pathPath to an SVG in the theme's images folder, inlined so it takes the card's text colour. | icon_asset_path | single line of text | empty |
| Button text | button_text | single line of text | Optional button |
| URL | link | a link | — |
| Arrangement | layout | arrangement controls | — |
Block — Image-text card group
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Image ratioChoices: unset — Original image ratio · 1/1 — 1:1 · 3/4 — 3:4 · circle — Round | image_aspect_ratio | a dropdown | unset |
| Content alignmentChoices: left — Left · right — Right | content_alignment | a dropdown | left |
| Number of columns (desktop)Choices: 1 — 1 · 2 — 2 · 3 — 3 · 4 — 4 · 5 — 5 · 6 — 6 | desktop_columns | a dropdown | 3 |
Block — Title
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | title | single line of text | Example title |
Block — Title & Link
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | title | single line of text | Text columns with images |
| Text sizeChoices: title2 — Large · title4 — Medium · title5 — Small | font_size | a dropdown | title4 |
| URL | link | a link | — |
| Link text | link_text | single line of text | View more |
Text marquee text-marquee
A band of short messages that scrolls sideways.
Where it appears: Home (hidden)
Worth knowing
- Currently switched off on the homepage. Re-enable it from the section's ⋯ menu.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | text-marquee |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-4 |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Marquee message
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Text | text | single line of text | A memorable message. |
Trust bar trust-bar
A row of reassurances — shipping, returns, support — each an icon with a heading and a line of copy.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | trust-bar |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-9 |
| Content color scheme | content_color_scheme | one of the theme's colour schemes | scheme-3 |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Trust item
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Theme asset path | icon_asset_path | single line of text | images/icon.svg |
| Title | title | single line of text | Trust statement |
| Body copy | copy | multiple lines of text | Explain the policy or reassurance in one sentence. |
Shopline stock sections
These ship with the platform. Most are either unused here or handle account, search and checkout pages that rarely need touching.
Announcement bar announcement-bar
Shopline's stock announcement bar. This theme uses the header's own promo bar instead, so this is normally unused.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Display positionChoices: none — Don't pin to top · always — Pin to top · desktop — Pin to top (desktop only) · mobile — Only pin to top on mobile | sticky_mode | a dropdown | none |
| Multiple announcement bar display styleChoices: tiled — Tiled display · compact — Compact layout · horizontal — Left-right switch · vertical — Up-down switch · manual — Manual switch | display_mode | a dropdown | manual |
| Switching interval | interval | a slider | 5 |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Announcement
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Body | content | formatted text (bold, links, lists) | 30-day postage paid returns |
| URL | link | a link | — |
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-4 |
| Display the divider | divide_line | on / off | Off |
Apps apps
A slot for an installed app's block — this is how the Yotpo reviews widget is placed.
Where it appears: Reviews, Product — Starter Kit
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Align module margins with the theme | sync_margins_with_theme | on / off | On |
Blogs blog
Shopline's stock blog listing. This theme uses Editorial feed instead.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Blog category | blog | blog picker | — |
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Block — Blog list
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Blog count | page_size | a slider | 3 |
| Number of columns (desktop) | desktop_columns | a slider | 3 |
Breadcrumb trail breadcrumb-trail
The Home › Shop › This page trail above a product.
Where it appears: Pods (page), Product (page), Product — Pods, Product — Starter Kit
Worth knowing
- Use the product title as the last crumb fills the final crumb automatically on a product template. With it off, Current-page label is used instead.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | breadcrumb-trail |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Accessible label | aria_label | single line of text | Breadcrumb |
| Home label | home_label | single line of text | Home |
| Home URL | home_url | a link | / |
| Middle label | middle_label | single line of text | Shop |
| Middle URL | middle_url | a link | /collections/all |
| Current-page label | current_label | single line of text | Current page |
| Use the product title as the last crumbOn a product template, fills the last crumb from the product being viewed. | use_product_title | on / off | Off |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Cart workspace cart-workspace
The whole cart page: the line items, the free-shipping progress, the recommendations and the order summary.
Where it appears: Cart
Worth knowing
- Free-shipping threshold in cents: 17500 is $175.00. This must match the same figure in Theme settings › Cart and the real shipping rule in the admin, or the bar will promise something checkout does not honour.
- Flat shipping display and the tax note are display text. They do not calculate anything.
- Recommendation blocks are chosen by hand, not by the store.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | cart-workspace |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Heading | heading | single line of text | Your cart |
| Returns note | returns_copy | single line of text | 30-day returns on undamaged products |
| Free-shipping message | free_shipping_copy | single line of text | Free US shipping on orders $175+ |
| Free-shipping threshold in centsIn cents. 17500 is $175.00. Must match Theme settings › Cart and the real shipping rule. | free_shipping_threshold_cents | single line of text | 17500 |
| Empty-cart heading | empty_heading | single line of text | Your cart is empty |
| Button label | empty_button_label | single line of text | Shop the kits |
| URL | empty_button_url | a link | /collections/all |
| Recommendations heading | recommendations_heading | single line of text | Stay covered all season |
| Summary heading | summary_heading | single line of text | Order summary |
| Subtotal label | subtotal_label | single line of text | Subtotal |
| Shipping label | shipping_label | single line of text | Shipping |
| Free-shipping value | free_shipping_label | single line of text | Free |
| Flat shipping display | flat_shipping_price | single line of text | $12.95 |
| Tax label | tax_label | single line of text | Estimated tax |
| Tax note | tax_copy | single line of text | Calculated at checkout |
| Total label | total_label | single line of text | Total |
| Discount field label | discount_label | single line of text | Discount code |
| Discount action label | discount_button_label | single line of text | Apply |
| Discount helper text | discount_helper | single line of text | First-order code: PORCH10 |
| Checkout label | checkout_label | single line of text | Checkout |
| Payment reassurance | payment_copy | single line of text | Secure payment · PayPal and Venmo accepted |
| Shipping-destination reassurance | destination_copy | single line of text | Ships to the contiguous United States |
| Fallback Pod cart-line image path | line_fallback_asset_path | single line of text | images/product.png |
| Fallback Starter Kit cart-line image path | starter_line_fallback_asset_path | single line of text | images/product.png |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Cart recommendation
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Product | product | product picker | — |
| Product handle fallback | product_handle | single line of text | product-handle |
| Variant option value | variant_option1 | single line of text | — |
Theme asset pathPath to a file already uploaded to the theme, e.g. images/hero.jpg. Ignored when the Image picker above it has a picture in it. | asset_path | single line of text | images/product.png |
| Image alt text | image_alt | single line of text | Recommended product |
| Title | title | single line of text | Recommended product |
| Displayed price | price | single line of text | $0.00 |
| Button label | button_label | single line of text | Add |
Collection list collection-list
Shopline's stock collection list. Not used by this theme's page designs.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Arrangement | layout | arrangement controls | — |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Collection list
| Field | Setting id | Kind | Default |
|---|---|---|---|
| PC client | |||
| Number of columns (desktop) | desktop_columns | a slider | 2 |
| Scroll left and right to view on desktop | desktop_enable_slider | on / off | On |
| Mobile client | |||
| Number of columns (mobile) | mobile_columns | a slider | 1 |
| The maximum number of categories displayed on the mobile terminal | mobile_limit | a slider | 2 |
| Turn on left-right scroll to View all | mobile_enable_slider | on / off | Off |
| Use global grid spacing settings | inherit_grid_gap | on / off | On |
| Horizontal spacing | column_gap | a slider | 30 |
| Vertical spacing | row_gap | a slider | 30 |
Contact form contact-form
Shopline's stock contact form. This theme uses Contact support workspace instead.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | title | single line of text | Contact us |
| Heading sizeChoices: title1 — Extra large · title2 — Large · title3 — Medium · title4 — Small | title_size | a dropdown | title3 |
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Custom HTML custom-html
A raw HTML block. Use only when nothing else fits — it bypasses the theme's styling.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| HTML | html | raw HTML | <div style="text-align:center;"><h2>Use HTML to format your text so it can be easily read.</h2>This text can be used to share information about your brand with customers.</div> |
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Custom page custom-page
Embeds another admin page's content into this one.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Custom page | page | page picker | — |
| Heading sizeChoices: title1 — Extra large · title2 — Large · title3 — Medium · title4 — Small | title_size | a dropdown | title3 |
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Custom section custom-section
An empty section you fill with generic blocks. Rarely the right tool here.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Account customers-account
The logged-in account overview.
Where it appears: customers/account
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Activate account page customers-activate-account
The account activation page.
Where it appears: customers/activate_account
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Address customers-addresses
The saved addresses page.
Where it appears: customers/addresses
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
Company account registration customers-company
Company account registration.
Where it appears: customers/company
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Forgot password customers-forgot-password
The password reset request page.
Where it appears: customers/forgot_password
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
Customer Login customers-login
The sign-in page.
Where it appears: customers/login
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Order details customers-order-detail
A single past order.
Where it appears: customers/order
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Order list customers-order-list
The order history list.
Where it appears: customers/orders
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Customer registration customers-register
The account sign-up page.
Where it appears: customers/register
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
FAQS faq
The FAQ. Either a straight list of questions or the tabbed category directory.
Where it appears: FAQ
Worth knowing
- Layout variant Category directory is what the live FAQ page uses: FAQ category blocks become the tabs and the FAQ item blocks under each become its questions.
- Show an 'All' tab adds a tab listing every question, opened by default.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Layout variantChoices: default — Default · directory — Category directory | migration_variant | a dropdown | default |
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | faq-directory |
| Category navigation label | tablist_label | single line of text | FAQ categories |
| Show an "All" tabAdds a tab above the categories that lists every question, and opens it by default. | show_all_tab | on / off | On |
| "All" tab label | all_tab_label | single line of text | All |
| Support card color | support_color_scheme | one of the theme's colour schemes | scheme-3 |
| Support heading | support_heading | single line of text | Still have questions? |
| Support copy | support_copy | multiple lines of text | Email and chat support, included for one year. |
| Support link label | support_label | single line of text | Contact us |
| Support link | support_url | a link | /pages/contact |
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Expand tag 1 | expand_first_label | on / off | Off |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Content
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — FAQ category
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | title | single line of text | Category |
| Description | description | multiple lines of text | Describe this category. |
Block — FAQ item
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Question | question | single line of text | Question? |
| Answer | answer | multiple lines of text | Answer the question. |
Block — Image
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Image | image | image picker | — |
| Image ratioChoices: unset — Original image ratio · 1/1 — 1:1 · 4/3 — 4:3 · 3/2 — 3:2 · 16/9 — 16:9 | image_aspect_ratio | a dropdown | unset |
Block — Question list
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Title
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | text | single line of text | Frequent Asked Questions |
| Text sizeChoices: title1 — Extra large · title2 — Large · title3 — Medium · title4 — Small | text_size | a dropdown | title3 |
| Text alignment | text_align | left / centre / right | center |
Block — collapsible row
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | title | single line of text | Collapsible row |
| LogoChoices: none — None · apple — apple · banana — banana · bottle — bottle · box — box · carrot — carrot · chat_bubble — Chat bubble · checkbox — Check mark · clipboard — clipboard · dairy — Dairy products | icon | a dropdown | none |
| Body | content | formatted text (bold, links, lists) | A sentence or two introducing your brand, what you sell, and what makes your brand compelling to customers. |
| Custom content | custom_content | page picker | — |
Featured collection featured-collection
Shopline's stock collection row. This theme uses Product card grid instead.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Collection list | collection | collection picker | — |
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Arrangement | layout | arrangement controls | — |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Featured product featured-product
Shopline's stock single-product block.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Products | product | product picker | — |
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Block — Media file overlay
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Arrangement | layout | arrangement controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Product information
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Arrangement | layout | arrangement controls | — |
Block — Product media files
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Turn on video loop | video_loop | on / off | Off |
Footer footer
The site footer: logo, brand description, newsletter sign-up, link columns and the legal line.
Worth knowing
- Link columns are label/URL pairs, up to eight per column, five columns. Empty pairs are skipped.
- Disclaimer is the regulated line under the copyright. Do not remove it without checking the Brand Book.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-4 |
| Logo asset path | logo_asset_path | single line of text | images/site-logo.svg |
| Logo alt text | logo_alt | single line of text | Store |
| Brand description | description | multiple lines of text | A short description of the store and its products. |
| Newsletter heading | newsletter_heading | single line of text | Join our newsletter |
| Email field label | email_label | single line of text | Your email |
| Newsletter button label | newsletter_button | single line of text | Join |
| Newsletter success message | newsletter_success | single line of text | Thank you for joining. |
| Newsletter error message | newsletter_error | single line of text | That didn’t go through. Please try again. |
| Copyright | copyright | single line of text | © Store. All rights reserved. |
| Disclaimer | disclaimer | multiple lines of text | Use products only as directed. |
Block — Additional content
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Contact us
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Copyright Information
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Copyright Information | text | single line of text | Copyright © Company name |
| Text alignment | text_align | left / centre / right | center |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Custom content
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | title | single line of text | Custom text |
| Body | content | single line of text | Add your own custom text here. |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Email subscription
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | title | formatted text (bold, links, lists) | Subscribe today and get 10% off your first purchase |
| Input box prompt text | placeholder | single line of text | Enter your email |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Footer infomation
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Image
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Image | image | image picker | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Link column
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Heading | heading | single line of text | Links |
| Link 1 label | link_1_label | single line of text | Link one |
| Link 1 URL | link_1_url | a link | / |
| Link 2 label | link_2_label | single line of text | Link two |
| Link 2 URL | link_2_url | a link | / |
| Link 3 label | link_3_label | single line of text | Link three |
| Link 3 URL | link_3_url | a link | / |
| Link 4 label | link_4_label | single line of text | empty |
| Link 4 URL | link_4_url | a link | / |
| Link 5 label | link_5_label | single line of text | empty |
| Link 5 URL | link_5_url | a link | / |
| Link 6 label | link_6_label | single line of text | empty |
| Link 6 URL | link_6_url | a link | / |
| Link 7 label | link_7_label | single line of text | empty |
| Link 7 URL | link_7_url | a link | / |
| Link 8 label | link_8_label | single line of text | empty |
| Link 8 URL | link_8_url | a link | / |
Block — Multi-country/region language
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Show contentChoices: all — Display all · only_country — Only display country/region selector · only_language — Only display language selectorYou need to add two or more markets for the 'country/region selector' to work. To add markets, go to market settings. You also need to add two or more languages in market-language management for the selector to function. To add languages, visit language settings, and after adding, go to market-language management to set up multilingual support for the current market [overview](https://help.shopline.com/hc/en-001/articles/27936284578585-Markets-Management-Overview) | show_type | a dropdown | all |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Payment icon
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Payment icon | payment_icons | payment icon picker | — |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Quick navigation
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | title | single line of text | Menu title |
| Navigation menu | menu | navigation menu picker | footer |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Social media
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | title | single line of text | Contact us |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Header header
The site header: the promo bar, the logo, the desktop navigation, search and cart.
Worth knowing
- The navigation is not a Shopline menu. It is six pairs of label/URL fields for desktop and seven for mobile, edited here. Changing a menu in Navigation in the admin will not change this header.
- Desktop and mobile navigation are separate lists and can differ — they currently do.
- Pin promo bar to the top keeps the offer on screen while the navigation retracts behind it.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-8 |
| Announcement color scheme | announcement_color_scheme | one of the theme's colour schemes | scheme-4 |
| Header content color scheme | content_color_scheme | one of the theme's colour schemes | scheme-2 |
| Show promo bar | show_promo_bar | on / off | On |
| Pin promo bar to the topThe offer stays on screen while the navigation retracts behind it. | sticky_promo_bar | on / off | On |
| Announcement text | announcement_text | single line of text | Free shipping on qualifying orders |
| Logo asset path | logo_asset_path | single line of text | images/site-logo.svg |
| Logo alt text | logo_alt | single line of text | Store |
| Navigation accessible label | navigation_label | single line of text | Primary navigation |
| Mobile navigation accessible label | mobile_navigation_label | single line of text | Mobile navigation |
| Menu button label | menu_label | single line of text | Menu |
| Search button label | search_label | single line of text | Search |
| Search field placeholder | search_placeholder | single line of text | Search Stations, Pods, and answers |
| Search submit button label | search_submit_label | single line of text | Search |
| Close search button label | search_close_label | single line of text | Close search |
| Cart button label | cart_label | single line of text | Cart |
| Navigation item 1 label | nav_1_label | single line of text | Shop |
| Navigation item 1 URL | nav_1_url | a link | /collections/all |
| Navigation item 2 label | nav_2_label | single line of text | How it works |
| Navigation item 2 URL | nav_2_url | a link | /pages/how-it-works |
| Navigation item 3 label | nav_3_label | single line of text | Refills |
| Navigation item 3 URL | nav_3_url | a link | /collections/all |
| Navigation item 4 label | nav_4_label | single line of text | About |
| Navigation item 4 URL | nav_4_url | a link | /pages/about |
| Navigation item 5 label | nav_5_label | single line of text | FAQs |
| Navigation item 5 URL | nav_5_url | a link | /pages/faq |
| Navigation item 6 label | nav_6_label | single line of text | Contact |
| Navigation item 6 URL | nav_6_url | a link | /pages/contact |
| Navigation item 1 label | mobile_nav_1_label | single line of text | Shop all |
| Navigation item 1 URL | mobile_nav_1_url | a link | /collections/all |
| Navigation item 2 label | mobile_nav_2_label | single line of text | Starter Kits |
| Navigation item 2 URL | mobile_nav_2_url | a link | /collections/all |
| Navigation item 3 label | mobile_nav_3_label | single line of text | Refills |
| Navigation item 3 URL | mobile_nav_3_url | a link | /collections/all |
| Navigation item 4 label | mobile_nav_4_label | single line of text | How it works |
| Navigation item 4 URL | mobile_nav_4_url | a link | /pages/how-it-works |
| Navigation item 5 label | mobile_nav_5_label | single line of text | About |
| Navigation item 5 URL | mobile_nav_5_url | a link | /pages/about |
| Navigation item 6 label | mobile_nav_6_label | single line of text | FAQs |
| Navigation item 6 URL | mobile_nav_6_url | a link | /pages/faq |
| Navigation item 6 label | mobile_nav_7_label | single line of text | Contact |
| Navigation item 6 URL | mobile_nav_7_url | a link | /pages/contact |
Article main-article
Shopline's stock article layout. This theme uses the four article-* sections instead.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Block — 'Back' button
No settings — this section has nothing to fill in.
Block — Author/Time
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Display date | show_date | on / off | On |
| Display author | show_author | on / off | On |
Block — Content
No settings — this section has nothing to fill in.
Block — Image
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Image ratioChoices: unset — Original image ratio · 1/1 — 1:1 · 4/3 — 4:3 · 3/2 — 3:2 · 16/9 — 16:9 | aspect_ratio | a dropdown | 16/9 |
| Border radius | border_radius | a slider | 0 |
Block — Review
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Please go to 'Blog' and manage the comment handling settings in the blog category to allow comments | |||
Block — Share
No settings — this section has nothing to fill in.
Block — Title
No settings — this section has nothing to fill in.
Blog category main-blog
Shopline's stock blog index. This theme uses Editorial feed instead.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Number of columns (desktop)Choices: 1 — 1 column · 2 — 2 columns | desktop_columns | a dropdown | 2 |
| Number of blogs per page | page_size | a slider | 6 |
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Block — Blog category name
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Text sizeChoices: title1 — Extra large · title2 — Large · title3 — Medium · title4 — Small | text_size | a dropdown | title3 |
| Text alignmentChoices: left — Left · center — Center · right — Right | text_align | a dropdown | center |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Subtotal main-cart-footer
Stock cart subtotal. Superseded by Cart workspace.
Settings
No settings — this section has nothing to fill in.
Block — Checkout button
No settings — this section has nothing to fill in.
Block — Subtotal price
No settings — this section has nothing to fill in.
Product list main-cart-items
Stock cart line items. Superseded by Cart workspace.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Collection header main-collection-cover
The header of a collection page — banner, title and description.
Where it appears: Collection
Settings
No settings — this section has nothing to fill in.
Block — Collection description
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Go to 'Collection > Collection info' to modify content and layout | |||
Block — Collection image
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Mobile banner image | mobile_banner_image | image picker | — |
| Arrangement | layout | arrangement controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Title
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Text sizeChoices: title0 — Extra large · title2 — Large · title3 — Medium · title4 — Small | text_size | a dropdown | title0 |
| Text alignment | text_align | left / centre / right | center |
Product list main-collection-products
The product grid on a collection page, with filtering and sorting.
Where it appears: Collection
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Products per page | page_size | a slider | 16 |
| Number of columns (desktop) | desktop_columns | a slider | 4 |
| Number of columns (mobile)Choices: 2 — 2 columns · 1 — 1 column | mobile_columns | a dropdown | 2 |
| Filter layoutChoices: drawer — Drawers · horizontal — Horizontal · vertical — Vertical | filter_layout | a dropdown | vertical |
| Enable filter | enable_filtering | on / off | On |
| Turn on sorting | enable_sorting | on / off | On |
Collection list main-collections-all
The 'all collections' listing page.
Where it appears: All collections
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
Block — Collection list
| Field | Setting id | Kind | Default |
|---|---|---|---|
| SortChoices: title_asc — Name: A-Z · title_desc — Name: Z-A · create_time_desc — Date, from latest to earliest · create_time_asc — Date, from earliest to latest · product_num_desc — Products: most - least · product_num_asc — Products: least - most | sort | a dropdown | title_asc |
| Full screen image | image_full_screen | on / off | On |
| Number of columns (desktop) | desktop_columns | a slider | 2 |
| Number of columns (mobile) | mobile_columns | a slider | 1 |
Order Tracking main-order-tracking
The order-tracking lookup page.
Where it appears: Order tracking
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| Title | title | single line of text | Order Tracking |
| Button text | btn_text | single line of text | View Order |
Custom page main-page
The fallback layout for any admin page that has no dedicated template. It renders whatever you typed into the page in the admin.
Where it appears: Generic page
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Password main-password
The storefront password page shown while the store is closed.
Where it appears: Password
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| Background image | image | image picker | — |
| Image overlay opacity | blend_overlay_with_opacity | a slider | 0 |
| Display background image | show_background_image | on / off | On |
| Banner heightChoices: adapt-image — Auto · small — Small · medium — Medium · large — LargeTo achieve optimal results, please use an image with 16:9 aspect ratio | banner_height | a dropdown | medium |
| Display contents below image on mobile device | show_text_below | on / off | On |
Block — Content Containers
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Email subscription
No settings — this section has nothing to fill in.
Password page footer main-password-footer
The footer of the password page.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
Password page header main-password-header
The logo strip on the password page.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Logo | logo_image | image picker | — |
| Desktop Logo width | desktop_logo_width | a slider | 150 |
| Mobile Logo width | mobile_logo_width | a slider | 100 |
Product main-product
Shopline's stock product layout. Used only by the generic product template; the real product pages use Product purchase workspace.
Where it appears: Product (generic)
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Block — Media file overlay
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Arrangement | layout | arrangement controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Product information
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Arrangement | layout | arrangement controls | — |
Block — Product media
No settings — this section has nothing to fill in.
Block — Product media files
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Content size on desktopChoices: large — Large · medium — Medium · small — Small | layout_size | a dropdown | medium |
| Image compression ratioChoices: 100 — Original aspect ratio · 90 — 90% · 80 — 80% · 70 — 70%Configure the compression ratio for main and thumbnail images. We recommend selecting a compression ratio of 80% or lower to ensure optimal store performance and user experience. | image_quality | a dropdown | 80 |
| Turn on video loop | video_loop | on / off | Off |
| Layout on desktopChoices: flatten — Tiled · two-columns — 2 columns · thumbnail-flatten — Tiled thumbnails · thumbnail-carousel — Thumbnail carousel | desktop_layout | a dropdown | thumbnail-carousel |
| Mobile device layoutChoices: two-columns — 2 columns · hide-thumbnail — Hide thumbnails · show-thumbnail — Display thumbnails · fullscreen — Full-screen image | mobile_layout | a dropdown | two-columns |
Search results main-search
The search results page.
Where it appears: Search
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Block — Custom page card
No settings — this section has nothing to fill in.
Block — Result list
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Results per page | page_size | a slider | 16 |
| Number of columns (desktop) | desktop_columns | a slider | 4 |
| Number of columns (mobile)Choices: 1 — 1 column · 2 — 2 columns | mobile_columns | a dropdown | 2 |
| Filter layoutChoices: drawer — Drawers · horizontal — Horizontal · vertical — Vertical | filter_layout | a dropdown | horizontal |
| Enable filter | enable_filtering | on / off | On |
| Turn on sorting | enable_sorting | on / off | On |
Result list predictive-search
The suggestions dropdown under the search box. No settings.
Settings
No settings — this section has nothing to fill in.
Product purchase workspace product-purchase-workspace
The entire buy box on a product page: gallery, title, price, the coverage or pack picker, add-ons, the add-to-cart button, trust badges and the details accordions.
Where it appears: Pods (page), Product (page), Product — Pods, Product — Starter Kit
Worth knowing
- This is the most involved section in the theme. Almost everything in it is a block, so the order of the blocks is the order of the buy box.
- Layout mode decides which picker is used: Starter kit uses Coverage option blocks, Refill packs uses Pack option blocks. Adding the wrong kind of block for the mode does nothing.
- Native option value on each option block must match the variant name in the product exactly, character for character. That string is how the card knows which variant to sell. A mismatch is the usual cause of 'the button adds the wrong thing'.
- Visible media keys (m1–m5) control which gallery images show for that tier.
m2,m3,m4,m5means image one is hidden for that tier. - Prices typed into these blocks are display text only. The money actually charged always comes from the product in the admin. Change a price there and you must change it here too, or the page will contradict the checkout.
- Free shipping threshold is in cents: 17500 means $175.00.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | product-purchase-workspace |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Layout modeChoices: pack — Refill packs · kit — Starter kit | mode | a dropdown | pack |
| Native product | product | product picker | — |
| Eyebrow | eyebrow | single line of text | Refills |
| Product title suffix | title_suffix | single line of text | Mosquito Pods |
| Shipping note | shipping_note | single line of text | Shipping terms appear here. |
| Guidance heading | guidance_heading | single line of text | How many do I need? |
| Guidance copy | guidance_copy | multiple lines of text | Add concise product selection guidance. |
| Missing-media helper copy | placeholder_helper | multiple lines of text | Approved product imagery is pending. |
| Free shipping threshold (cents)In cents. 17500 is $175.00. | ship_threshold | single line of text | 17500 |
| Free shipping qualified message | ship_qualified_text | single line of text | Free US shipping included |
| Free shipping remainder suffix | ship_away_suffix | single line of text | away from free US shipping |
| Media 1 external URL override | media_1_external_url | single line of text | empty |
| Media 2 external URL override | media_2_external_url | single line of text | empty |
| Media 3 external URL override | media_3_external_url | single line of text | empty |
| Media 4 external URL override | media_4_external_url | single line of text | empty |
| Media 5 external URL override | media_5_external_url | single line of text | empty |
| Media 1 theme asset path | media_1_asset_path | single line of text | images/product.png |
| Media 1 alt text | media_1_alt | single line of text | Product image |
| Media 1 control label | media_1_control_label | single line of text | View image one |
| Previous image arrow label | media_prev_label | single line of text | Previous image |
| Next image arrow label | media_next_label | single line of text | Next image |
| Media 2 theme asset path | media_2_asset_path | single line of text | images/product.png |
| Media 2 alt text | media_2_alt | single line of text | Product image |
| Media 2 control label | media_2_control_label | single line of text | View image two |
| Media 3 theme asset path | media_3_asset_path | single line of text | images/product.png |
| Media 3 alt text | media_3_alt | single line of text | Product image |
| Media 3 control label | media_3_control_label | single line of text | View image three |
| Media 4 asset path | media_4_asset_path | single line of text | images/product.png |
| Media 4 alt text | media_4_alt | single line of text | Product image |
| Media 4 control label | media_4_control_label | single line of text | View image four |
| Media 5 asset path | media_5_asset_path | single line of text | images/product.png |
| Media 5 alt text | media_5_alt | single line of text | Product image |
| Media 5 control label | media_5_control_label | single line of text | View image five |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Accordions
No settings — this section has nothing to fill in.
Block — Add to cart
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Button label | label | single line of text | ADD TO CART |
| Unavailable label | unavailable_label | single line of text | UNAVAILABLE |
| Added-to-cart message | added_label | single line of text | Added to cart. |
| View cart link | view_cart_label | single line of text | View cart |
Block — Add-on option
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Native product | product | product picker | — |
| Variant IDThe exact variant this add-on sells. Leave blank to fall back to the product's first available variant — which is only correct when the product has one. | variant_id | single line of text | empty |
| Label prefix | prefix | single line of text | Add a |
| Add-on name | label | single line of text | 12-Pack of Mosquito Pods |
| Body copy | description | single line of text | Extend coverage another full round |
| Display price | price_label | single line of text | $39.99 |
| Theme asset path | image_asset_path | single line of text | images/product.png |
| Image alt text | image_alt | single line of text | empty |
Block — Add-ons
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Heading above the add-ons | heading | single line of text | Add refill Pods and stay covered |
Block — Coverage option
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Native option value | option_value | single line of text | 6-Station Starter Kit |
| Card label | label | single line of text | 6-Station Starter Kit |
| Body copy | description | single line of text | 6 Stations + 12 Pods — a typical yard |
| Display price | price | single line of text | $179.00 |
| Compare-at price | compare_price | single line of text | $267.00 |
| Card tag | tag | single line of text | MOST POPULAR |
| Savings label | save_label | single line of text | SAVE $88 |
| Title | title | single line of text | Backporch Naturals 6-Station Starter Kit |
| Selected synopsis | blurb | multiple lines of text | Enough coverage for a typical yard. |
| Visible media keys | media_keys | single line of text | m2,m3,m4,m5 |
| Pending media note | media_note | single line of text | empty |
| Box contents | box_contents | multiple lines of text | empty |
| Upgrade card lead-inDescribes the step from this tier to the next. Leave empty on the top tier to hide the card. | upgrade_strong | single line of text | empty |
| Upgrade card copy | upgrade_copy | single line of text | empty |
| Upgrade card image | upgrade_image_path | single line of text | empty |
| Box contents image 1One image per line of the box contents, in the same order. | box_image_1 | single line of text | empty |
| Box contents image 2 | box_image_2 | single line of text | empty |
| Box contents image 3 | box_image_3 | single line of text | empty |
Block — Description
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Body copy | copy | multiple lines of text | empty |
| Keep the copy fixedOn, the copy stays put when a tier is picked. Off, each tier rewrites it. | static | on / off | On |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Block — Pack option
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Native option value | option_value | single line of text | 4-Pack |
| Label | label | single line of text | 4-Pack |
| Captured price label | price | single line of text | $19.99 |
| Per-unit label | per_pod | single line of text | $5.00 per Pod |
| Merchandising tag | tag | single line of text | TOP-UP |
| Missing-media placeholder | placeholder | single line of text | empty |
| Missing-media note | placeholder_note | single line of text | empty |
| Variant contents copy | inside_copy | multiple lines of text | 4 Mosquito Pods in approved retail packaging. One Pod treats one Station for about 30 days. |
Block — Product accordion item
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Heading | label | single line of text | Details |
| Answer | answer | multiple lines of text | Add product details here. |
| List styleChoices: plain — Plain paragraph · numbers — Numbered steps · bullets — Bullets · labels — Labelled rows (Label: value) · contents — Box contents (count + image) · table — Two-column tableEach line of the answer becomes one item. | list_style | a dropdown | plain |
| Synchronize answer to selected variant | variant_copy | on / off | Off |
Block — Product title
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Fallback textShown before the script names the selected tier. Usually left empty. | fallback | single line of text | empty |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Block — Tier picker
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Label above the tiers | label | single line of text | Choose your coverage |
Block — Trust badge
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Show this badge | enabled | on / off | On |
| Theme asset path | icon_asset_path | single line of text | empty |
| First line | line_1 | single line of text | Fast |
| Second line | line_2 | single line of text | Shipping |
Block — Trust badges
No settings — this section has nothing to fill in.
Block — Upgrade card
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Button label | label | single line of text | UPGRADE |
| Heading | strong | single line of text | empty |
| Copy | copy | single line of text | empty |
| Image asset path | image_path | single line of text | empty |
Recommended products recommended-product
An automatic 'you may also like' row.
Where it appears: Product (generic)
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Arrangement | layout | arrangement controls | — |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Email subscription sign-up-and-save
Shopline's stock newsletter block. The footer's own sign-up is used instead.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Full screen width | full_screen_width | on / off | On |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Subscription field
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Input box prompt text | placeholder | single line of text | Enter your email |
| Button text | button_text | single line of text | Subscribe |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Slideshow slideshow
Shopline's stock slideshow. Not used by this theme's page designs.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Height on desktopChoices: fit-first-image — Fit to Image 1 · 450px — 450px · 550px — 550px · 650px — 650px · 750px — 750px · 100vh — Full screen | desktop_height | a dropdown | fit-first-image |
| Height on mobileChoices: fit-first-image — Fit to Image 1 · 250px — 250px · 300px — 300px · 400px — 400px · 500px — 500px · 100vh — Full screen | mobile_height | a dropdown | fit-first-image |
| Pagination styleChoices: arrow — Arrows · progress — Progress bar · dot — Dots | pagination_style | a dropdown | progress |
| Turn on auto-switch | auto_switch | on / off | On |
| Switching interval | switch_interval | a slider | 7 |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
Block — Content Containers
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Description
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Body | text | multiple lines of text | And optional subtext |
| Text alignment | text_align | left / centre / right | center |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Image
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Image on desktop | desktop_image | image picker | — |
| Image on mobile | mobile_image | image picker | — |
| Layer mask opacity | image_mask_opacity | a slider | 30 |
| Display text mask | show_text_mask | on / off | Off |
| Text overlay colorChoices: deep — Dark · light — Light | text_mask_color | a dropdown | deep |
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-4 |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Subtitle
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Subtitle | subtitle | single line of text | Subtitle |
| Text alignment | text_align | left / centre / right | center |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Title
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Title | text | multiple lines of text | Two Line Title Slide |
| Text sizeChoices: title1 — Extra large · title2 — Large · title3 — Medium · title4 — Small | text_size | a dropdown | title2 |
| Text alignment | text_align | left / centre / right | center |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Sticky purchase bar sticky-purchase-bar
The slim bar that follows the visitor down a product page with the price and an add-to-cart button.
Where it appears: Pods (page), Product (page), Product — Pods, Product — Starter Kit
Worth knowing
- Its title and price are typed in by hand and do not follow the tier the visitor picked. Keep them matched to the product's headline offer.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Stable section keyDo not change this. The theme's stylesheet and scripts find this section by this exact string; renaming it silently drops the section's styling. | section_key | single line of text | sticky-purchase-bar |
| Color schemeOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Theme asset path | image_asset_path | single line of text | images/product.png |
| Image external URL override | image_external_url | single line of text | empty |
| Image alt text | image_alt | single line of text | empty |
| Title | title | single line of text | Product title |
| Price | price | single line of text | $0.00 |
| Compare-at price | compare_price | single line of text | empty |
| Trust note | trust_note | single line of text | Free US shipping included · 30-day returns |
| Returns note | returns_note | single line of text | 30-day returns |
| Button label | button_label | single line of text | ADD TO CART |
| SpacingPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Video video
A video block, either uploaded or a YouTube embed.
Settings
| Field | Setting id | Kind | Default |
|---|---|---|---|
| ColorOne of the eleven palettes defined in Theme settings. See the colour scheme table above. | color_scheme | one of the theme's colour schemes | scheme-1 |
| Arrangement | layout | arrangement controls | — |
| MarginPadding around the section, set separately for desktop and mobile. | spacing | padding controls | — |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
Block — Video
| Field | Setting id | Kind | Default |
|---|---|---|---|
| Cover image | poster_image | image picker | — |
| Local upload | video_local_media | uploaded video | — |
| External video linkEnter YouTube embed link | video_external_media | YouTube link | — |
| Video autoplay | autoplay | on / off | Off |
| Loop | loop | on / off | Off |
| SizeWidth and height of the section. Leave at the default unless you have a reason. | size | width & height controls | — |
9 · When something looks wrong
| What you are seeing | Almost certainly |
|---|---|
| A section lost its styling and looks like plain text | Its Stable section key was changed. The stylesheet targets that exact string. Put it back to the value listed in this playbook's reference for that section. |
| I set a Theme asset path but a different picture shows | The Image picker above it wins. Clear the picker to fall back to the asset path. |
| I published a blog post and it is not on the blog page | Check it is published rather than a draft, and that it went into the blog you are looking at — Field notes is /blogs/news, Press is /blogs/press. The listing reads the blog directly, so there is nothing to add in the theme editor. |
| A blog card shows a title but no paragraph | The post has no excerpt. The card uses the excerpt only — it will not fall back to the body of the post. Add one on the post in the admin. |
| I changed an article's featured image and the cover did not change | It is one of the six field-notes posts carried over during the migration, whose original covers are stored in the theme and matched by handle. Those override the admin image. Changing one is a developer job — see components/article-cover.html. |
| The add-to-cart button adds the wrong variant | The option block's Native option value does not match the variant name in the product exactly. It is compared character for character, including capitals and hyphens. |
| The free-shipping bar promises free shipping but checkout charges for it | The three theme thresholds and the real shipping rule in the admin have drifted apart. See the recipe above. |
| My change is live in the editor but not on the site | The editor previews the theme you have open, which may not be the published one. Check you are editing the live theme. After a push it can also take a minute for the CDN to catch up — reload with a hard refresh. |
| An image looks stretched or cropped oddly | Check the section's aspect-ratio setting, and check Image position if it has one — that decides which part of the picture survives the crop. |
| A block will not add | Most sections cap how many blocks they take. The cap is listed against each section in the reference below. |
If none of these fit, note which page, which section and what you changed last — that trio is usually enough to find it straight away.