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

30

Block types

2

Max blocks

5

File

sections/routine-builder.liquid

Used by default on: collection.concern, page.how-to-layer, page.routine

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. Heading size defaults to Small. The heading has a wider text measure, and body text and eyebrow sizes scale with the selected heading size.
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 Show complete routine quick add — a single control that lets a customer review the selected version’s missing products and add them together — and write its Quick add label. Products are added as separate cart items, not as a bundle.
7. To reward the full routine, create an automatic Amount off products discount in Shopify admin for a collection of the routine’s products, with a minimum item quantity. Then write the tab’s Offer message to match its value and condition exactly. The theme shows the offer and, after a routine is added, the actual saving from the bag; it never applies or estimates a discount.
8. Enable Show Essentials and Extended versions to offer two versions of each routine. Set each Product step’s Include step in to Essentials and Extended or Extended only. Shared steps remain visible in both versions; counts and totals update with the selection.
9. Enable Let customers exclude products they own to show I already own this choices. Keep quick add enabled on the tab so customers can review and add only their missing products. These choices last for this section visit.
10. 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.
11. Write Usage guidance on each step — the instruction for that stage of the routine.
12. 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. Before you select a product, the theme editor shows a full sample card with a placeholder image, example price, and disabled add button so you can preview the design. A custom image replaces the placeholder. The setup note stays fully visible outside the scrolling usage guidance; sample cards grow as needed at every card height. Sample cards appear in the tab counts and summary only in the editor; customers see only steps with selected products.
13. In Complementary products mode, tell each step which product to claim using Match by: Product type, Product tag, or Position in the list.
14. 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.
15. 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.
16. 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.
17. Under Layout, set Tab bar size to Small, Medium, or Large. Large is the default and preserves the original tab bar dimensions; smaller sizes reduce its width and height. On mobile the bar fits the available width and scrolls when needed.
18. 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. The default Product card layout is Image beside content, which stacks on tablets and phones. Choose Image above content for vertically arranged cards.
19. The compact starting layout uses Landscape images and Small card height. 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. Step cards and the section header are centered on desktop. Mobile header alignment aligns the eyebrow, heading, and body text on screens below 750px; it defaults to Center, and Left lines all three up on the left edge, including the short rule under the eyebrow.
20. Set Color scheme, then Top spacing and Bottom spacing under Padding. The default color is Scheme 7 (the stored scheme-6 color scheme), and both spacing values default to 80px. Content is centered within the theme page width and capped at 1280px, while the background spans the section. The tabs and numbered path use compact spacing.
21. Preview against several real products. In Complementary products mode, an unresolved step still shows in the theme editor 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.
• Tablets and desktops show three compact step cards across, with horizontal navigation when there are more than three steps. One or two steps stay centered at the same card width. Below 990px, Image beside content cards stack the image above the content while keeping the selected Card height cap, so short instructions do not leave a large empty space. Phones show one step at a time.
• Long usage guidance scrolls inside the card so the product name and its actions stay visible. Raise Card height rather than trimming the instruction. A long product name or step name makes the card taller instead of shrinking the guidance, so at least a few lines of usage guidance always show.

Routine builder setup

Routine tabs own cadence and step order. Each Product step owns its name, usage guidance, matching rule, and fallback Product picker. Product data supplies images, titles, prices, variants, and availability.

Tab bar size sets the navigation width and control size. Up to three routines use equal-width tabs with normal-case labels when every label fits. Each selected tab fills its column, with equal outer padding on both ends of the bar. The bar can widen by up to 15% to accommodate labels while preserving space around the text and counts. Navigation switches automatically to a centered dropdown whenever labels and their full padding cannot fit, even with one routine, or when four or more routines are shown on the current page. Tabs never scroll. The layout adjusts after resizing and font loading. The narrower dropdown trigger uses the same button colors as the selected tabs, with light text on the theme’s button background. The menu uses the theme’s typography and corners. Its compact menu overlays the product cards without changing the section height. Centered sentence-case labels and a subtle checkmark identify the selected routine. Each option shows the routine name and current step count, updating when shoppers switch between Essential and Extended. Open and close motion follows the global transition style and interface speed, with immediate toggles for No motion or reduced motion. Arrow keys navigate choices, Enter selects, and Escape closes the menu. Selecting a routine displays its steps; selecting its block in the theme editor also updates the dropdown. Switching routines follows the same global motion style and interface speed, including an animated change in panel height. No motion and reduced motion switch panels immediately. Routine summaries and batch quick add initialize when that routine is first selected; subsequent selections preserve the shopper’s choices.

Under Step source, choose Step blocks (same on every product) for manual selections, or Set contents or complementary products for per-product selections. The latter reads custom.set_contents when it is a nonempty List of products metafield, then uses Search and Discovery complementary products when the field is empty or unavailable. Steps match within that list by product type, tag, or position. An unmatched step uses its Product picker or is hidden from customers when that picker is empty.

For a set, Evidence cards uses the same custom.set_contents list to show what is included. Configure step guidance and matching for the actual products. Neither the product templates nor the set template include Routine builder; they link to routine pages through Product routine. Routine builder does not configure bundle inventory or component quantities.

Routine discounts

Reward customers for buying a whole routine with a Shopify automatic discount. Shopify creates and applies the discount, with no app and no extra cost. The theme only describes it to customers and, after the routine is added, reports the saving Shopify actually applied.

1. Create a collection for the routine

In Products → Collections, create a manual collection, for example Facial routine, and add exactly the products the routine’s steps use. Check the products are available on the Online Store sales channel; a product that is not cannot be added to the bag.

2. Create an automatic discount

In Discounts → Create discount, choose Amount off products, then:

Field	Setting
Method	Automatic discount. A code only works if the customer types it at checkout, so the routine builder never shows it.
Title	A customer-facing name, such as Facial routine 30% off. Customers see it in the bag, at checkout, and in the routine confirmation.
Discount value	Percentage or Fixed amount, for example 30%.
Applies to	Specific collections → the routine’s collection. With All products, any items in the bag would qualify.
Purchase type	One-time purchase. Subscription products are left out of the routine’s batch add.
Minimum purchase requirements	Minimum quantity of items: the routine’s step count to reward only the complete routine, or a lower number, such as 3, to reward most of it.
Active dates	Today, with no end date, or the dates of your promotion.

Save. The discount’s status must read Active. Buy X get Y also works, but it discounts only the “get” items. Amount off order and Free shipping discounts apply to the whole order at checkout, so the routine confirmation never reports them.

3. Write the Offer message

In the theme editor, select the routine’s Routine tab and fill in Offer message. It must match the discount exactly: the same value and the same condition. For a 30% discount with a minimum of 5 items, write Add the full routine and save 30%; with a minimum of 3, write Save 30% on 3 or more. The theme shows the message as written and cannot check it against your discount, so change or clear it whenever the discount changes or ends.

Offer message appears only while Show complete routine quick add is on, and leaving it blank hides it. Each routine with its own offer needs its own collection and automatic discount; Shopify allows up to 25 active automatic discounts.

4. Test it

Open the routine in the theme preview, open the review, and select Add routine. With the cart drawer, the bag lists the products at their discounted prices with the discount’s title, and the confirmation below the button reads, for example, Facial routine 30% off applied: you save $6.62 on these products.

What customers see

• Before adding, the quick add button shows a tag icon beside the product count and total. Hovering the icon on desktop, or tabbing to the button, reveals the message in a small bubble above the button; on phones, tapping the icon opens the bubble below it, and tapping again or anywhere else closes it. Screen readers announce the message as part of the button. Opening the review shows the message under the Review your routine title.
• Below the routine’s step cards, once per routine, the message appears with the tag icon and the note Applies when you add the complete routine. When the step carousel shows its arrows, the message sits at the start of the same row; otherwise it is centered under the cards. It sits with the routine rather than on each step card, because the discount is earned by the complete routine, not by any single product.
• Prices and totals before adding are regular prices. Shopify confirms automatic discounts only once products are in the bag, and the theme never estimates them.
• After adding, the confirmation reports only the discount on the units just added; samples and subscription items are excluded. When no discount applies, it says nothing about savings. With the cart page instead of the drawer, customers go straight to the bag, which lists every applied discount.

When the discount does not apply

• The discount is not Active, or its dates have ended.
• A step’s product is missing from the collection, or the step uses a different product.
• The customer added fewer items than the minimum, for example after checking I already own this on several steps. Items from the same collection already in the bag count toward the minimum.
• The discount is a code, not automatic.

See Routines for setup and Evidence cards for the included-product display.

Routine builder design

−

100%

+ Reset

Use the zoom controls, then scroll to inspect the image. Press Escape to close.

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.