Routine builder

Tabbed routines — Morning, Evening, Weekly — each sequencing products into numbered steps with usage guidance. Steps take their product from a picker you fill in, or from the complementary list of the product being viewed, so one template can serve a whole catalog.

Merchant-addable

Yes

Settings

23

Block types

2

Max blocks

5

File

sections/routine-builder.liquid

Used by default on: collection.concern, page.how-to-layer, Product, Product (set)

When to use it

Catalogs where products are used together in a specific order, and the order is part of what you are selling. Strongest on a product template, where the routine rebuilds itself around each product; also works on a home page or a how-to-use page as one fixed routine.

Setting it up

1. Add Routine builder to a template. On a product template each visitor sees a routine built around the product they are looking at. On a home page or a how-to-use page it shows one fixed routine. It cannot go in the header or footer groups.
2. Write Eyebrow text, Heading, and Body text under Content. All three are optional — leave one blank and it is left out rather than rendered empty.
3. Choose Step source. The rest of the setup follows from it. Step blocks (same on every product) gives every step a product you pick by hand, identical on every page. Complementary products (product pages) fills each step from the complementary list of the product being viewed.
4. If you chose Complementary products, build that list first in the Shopify Search & Discovery app, under each product's Complementary products. The theme reads the app's own list in the order set there, server-side, so the routine renders without JavaScript.
5. Add a Routine tab block per phase of the routine and name it with Tab name. Up to five tabs. The first one opens by default.
6. Per tab, decide Enable complete routine quick add — a single control that lets a customer review every available product in that tab and add them together — and write its Quick add label. Products are added as separate cart items, not as a bundle.
7. Add a Product step block inside each tab, one per step, and drag them into order. Step name is the shopper-facing label and also identifies the step in the editor.
8. Write Usage guidance on each step — the instruction for that stage of the routine.
9. In Step blocks mode, pick the Product for each step and, if you want something other than the product image on the card, a Custom image. That is everything a step needs in this mode.
10. In Complementary products mode, tell each step which product to claim using Match by: Product type, Product tag, or Position in the list.
11. Set Match value to the type or tag to look for. Matching is exact and ignores case, and a tag has to match the whole tag rather than part of it. With Position in the list there is no match value — the step takes whatever sits at that place.
12. Set Match position when more than one complementary product fits the same rule: 1 takes the first match, 2 the second, up to 6. With Position in the list, it is the place in the list itself.
13. Fill in Product on each step in this mode too. It is the fallback when nothing matches, and a step with neither a match nor a fallback is hidden from customers.
14. Under Layout, leave Show routine summary on to give each tab a summary strip above the steps, or turn it off for just the cards. Then set Product card layout to Image above content or Image beside content — the beside layout stacks on mobile.
15. Set Image ratio to Landscape, Square, or Portrait, and Card height to Small, Medium, or Large. Card height is what decides how much usage guidance is visible before it scrolls. Set Content alignment to Left or Center.
16. Set Color scheme, then Top spacing and Bottom spacing under Padding.
17. Preview against several real products. In the theme editor an unresolved step still shows as a slot explaining why it is empty, listing the product types actually present in the list when you are matching by type, so you can correct the match value against real data.

Where the content comes from

Blocks own the editorial — tab names, step names, usage guidance, and the order. Where each product comes from depends on Step source: either the step's own product picker, or the complementary list on the product being viewed, which the Search & Discovery app owns. Shopify owns prices, images, and availability.

Notes and cautions

• Steps match independently, so two steps asking for the same product type both resolve to the same product. Use Match position 1 and 2 to take the first and second match instead.
• A product is never listed as a step in its own routine, and a complementary reference to a product that no longer exists is skipped rather than rendered as an empty card.
• Position matching counts the list after those exclusions, so it shifts if a referenced product is deleted. Type and tag matching survives that; prefer it unless the order is the only thing distinguishing the steps.
• An unresolved step is hidden from customers rather than shown as a placeholder — placeholder copy fails Theme Store review. The tab count is rewritten from the steps that actually rendered, so it never advertises a step nobody can see.
• Custom image applies only in Step blocks mode. When steps come from the product being viewed, the card always uses that product's own image.
• On a page with no product, Complementary products mode falls back to the step pickers, so the section still renders something rather than collapsing.
• Long usage guidance scrolls inside the card so the product name and its actions stay visible. Raise Card height rather than trimming the instruction.

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.

Blocks

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