Product routine preview

Assign routine pages to each product

Product routine preview reads routine assignments from Shopify product metafields. It shows one card per assigned page, in the order selected on the product. There are no manual routine cards or duplicate product lists to maintain in this section.

No metafield is needed to get started. Choose a page with a Routine builder section in Default routine page, and every product without its own assignment shows that routine. Products with routine pages in the metafield show those instead.

One-time setup in Shopify admin:

1. Go to Settings → Custom data → Products → Add definition.
2. Name it Routine pages, with namespace and key custom.routine_pages.
3. Choose Page, accepting a list of pages, and save the definition.

Open Products → a product → Metafields → Routine pages, select the complete routine pages that include this product, arrange them in the desired order, and save. Several products can reference the same pages. Each product can have different assignments while using the same product template. No database-icon connection is needed.

Existing custom.routine_page assignments still work when custom.routine_pages is empty. The legacy field can contain one page or a list of pages. When the new list is populated, it takes precedence; the two fields are not combined. Keep existing single-page assignments while adding the new definition, then move them into the new list as needed. Removing manual blocks does not automatically assign their pages to products; add those pages to each relevant product’s metafield.

Use your own metafield

In the theme editor, open Product routine preview → Routine pages metafield. Enter the product metafield’s namespace and key, for example custom.product_routines or routines.pages. The definition must be a Page reference list; a single Page reference or a text list is not accepted for this setting. Select the routine pages on each product in Shopify admin.

The default is custom.routine_pages. Clearing the setting also uses this default. When using the default key, an empty list can fall back to custom.routine_page as described above. A custom key reads only that metafield and never falls back to the default or legacy fields. Products with no value in the chosen metafield show the Default routine page when one is selected; without one, the section is hidden from customers and the editor shows setup guidance. A malformed key or a populated field with the wrong type produces an editor-only validation note and no storefront cards.

Choose the card layout

Use Routine card layout in the section settings:

• Stacked (default) shows the routine cards vertically, with each card’s own step rail.
• Slideshow shows one routine card at a time. On desktop, compact unboxed arrows and pagination dots sit directly below Explore routine, matching Before/after comparison. The outgoing text slides away and the new text slides in while the product steps crossfade. On mobile, routine navigation sits below the steps, and the text, images, step labels, and step arrows slide horizontally together without fading or hiding the arrows. Use the previous and next routine arrows to change routines. Dots indicate the active routine and are not clickable. Finger swipes do not switch routines. Each product step rail scrolls independently. There is no bottom scrollbar for switching routines.

A single assigned page shows one card without outer browsing controls. Both layouts work on phones, tablets, and desktop. Step rails support horizontal browsing and vertical page scrolling, and pinch zoom remains enabled. Routine arrow buttons support keyboard activation with Enter or Space. Inside a step rail, arrow keys and Home/End browse steps. Inactive routine cards are hidden from keyboard and assistive technology. Reduced motion and the global No motion setting disable smooth programmatic scrolling and decorative transitions.

The Accessible section label names the section for assistive technology. Background color scheme controls the full section band, while Card color scheme independently controls each routine card’s background, text, badge, and controls. Both default to Scheme 6; choose different schemes to distinguish the cards from the surrounding band. Cards have layered shadows for a raised appearance. Top padding and Bottom padding control section spacing. Card and control corners follow global theme settings.

How previews are populated

Each assigned page must be published to the online store and contain a Routine builder with the current product selected in a step. The first matching tab across that page’s builders supplies the preview. Its authored order, including Extended steps, determines the step numbers, current product, and previous and next links. The builder also supplies the description; the page supplies the routine title and Explore routine destination.

Use Match routine using to decide what the preview matches. Current product is the default and always matches the viewed product, even when it has a Set contents metafield. Set contents matches the included products instead. The regular product template selects Current product; the set template includes a preview section after Set contents with Set contents selected. Each template saves its own choice. Sections added manually start with Current product, so select Set contents when adding a set preview yourself.

With Set contents selected and a populated custom.set_contents metafield of type List of product references, assign the routine page to the set product’s Routine pages field and select the individual included products in the destination builder. The set itself does not need to be a step. The first tab containing any included product supplies the preview; the builder’s complete step order is retained, including products outside the set. All matching steps are highlighted and labeled In this set, with Your set in this routine above the title. These steps are not marked as the current page, and previous/next product links are omitted because a set can occupy several steps. An empty or incorrectly typed Set contents field keeps the numbered preview hidden and shows an editor-only setup note; it does not fall back to the current product. The assigned routine page link still works, including without JavaScript. If no included product matches, the page link remains available with an editor-only setup note.

Editing the destination builder updates the preview on the next page load. Routine sequences load when the section approaches the viewport, keeping that work out of the initial product-page load when the section is farther down. Assigned slideshow routines load together so arrow navigation remains responsive; repeated page references share one request and parsed page. Images load lazily and decode asynchronously. Each card has an independently scrollable step rail, an outlined current image with a subtle glow, and a You are viewing badge with a status dot centered above the current product image. The badge sits outside the image, and all product images remain aligned. The current step is brought into view when its rail first becomes visible. On larger screens, neighboring-step links share a row with the step browsing controls. Mobile hides the neighboring-step text links and keeps the arrow controls visible. Enable Show status dot on mobile (on by default) to show a tappable green dot in the top-right corner of each highlighted product image, with a transparent button background. Activate it to show the product status. Turn the setting off to keep only the border and shadow highlight on mobile; the dot and its status message are hidden, and desktop badges are unchanged. No purchasing or Essentials/Extended switching happens in this preview; those actions belong to the full routine page.

Without JavaScript, the assigned titles and Explore routine links still work, and the Slideshow layout falls back to a native horizontal rail with every page link available. If a destination cannot load or contains no matching product, its valid page link remains available without an invented sequence. An editor-only setup note explains the missing preview. Products with no routine assignments hide the section from customers and show a setup note in the editor. Editor notes use the shared dotted, italic note style.

Content ownership

The product’s Shopify metafield owns routine page assignments and their order. The optional custom.set_contents product reference list owns set membership. Shopify pages own the titles and destination URLs. Each page’s Routine builder owns step ordering and description. Shopify products own their IDs, canonical names, images, and product URLs. Section settings own the metafield key, matching source, accessible section label, layout, background and card color schemes, and spacing. No app is required.

On mobile, Explore routine keeps a permanent underline on its text label, with an undecorated arrow and no underline sweep. On desktop, it has no default underline and follows the global text-link hover effect, with a little extra space before the arrow. Other routine links follow the global text-link effects. Scrollbars match Ingredients Atlas, and arrow buttons match Featured Collection.