Routine builder

AM and PM tabs that sequence products into a usable routine, up to five tabs.

Merchant-addable
Yes
Settings
11
Block types
1
Max blocks
5
File
sections/routine-builder.liquid

Used by default on: Product , product.set , Product (stage)

Screenshots pending

Captures for Routine builder at desktop and mobile widths are generated from a live store by npm run shots. They appear here automatically once that has run.

When to use it

Catalogs where products are used together in a specific order.

Setting it up

  1. Add the section to a product template.
  2. Write the heading under Content.
  3. Add a tab per routine phase and sequence the products inside it.

Where the content comes from

Shopify products, sequenced by block content.

Section settings

Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.

Content

Eyebrow textText
ID
eyebrow
Default
BUILD YOUR RITUAL
HeadingText
ID
heading
Default
A routine, made simple
Body textRich text
ID
description
Default
<p>Thoughtfully layered skin care for every part of your week.</p>

Add routine tabs, then add and reorder product steps inside each tab. The first tab opens by default.

Show routine summaryCheckbox
ID
show_summary
Default
On
Product card layoutDropdown

The image beside content layout stacks on mobile.

ID
card_layout
Default
Image above content
  • Image above contentstacked
  • Image beside contentsplit
Image ratioDropdown
ID
image_ratio
Default
Landscape
  • Landscapelandscape
  • Squaresquare
  • Portraitportrait
Card heightDropdown

Long usage guidance scrolls inside the card so names and product actions remain visible.

ID
card_size
Default
Medium
  • Smallsmall
  • Mediummedium
  • Largelarge
Content alignmentDropdown
ID
content_alignment
Default
Center
  • Leftleft
  • Centercenter
Color schemeColor scheme
ID
color_scheme
Default
scheme-1
Top spacingSlider
ID
padding_top
Default
80
Range
0px to 120px, in steps of 4px
Bottom spacingSlider
ID
padding_bottom
Default
80
Range
0px to 120px, in steps of 4px

Blocks

Blocks are added, reordered, duplicated, and removed inside the section. Each type has its own settings.

_routine-tab _routine-tab

This section has no settings of its own.