Routine library

Build a routine library

The Routine library is a browsable directory of merchant-curated routines. Each card can show its goal, frequency, product sequence, product count, and current product total, then link to a full routine page.

1. In Online Store → Pages, create a page for the library and assign the routines template.

2. Create your first routine page and assign routine. In its Routine builder, choose products for each Product step and write usage guidance.

3. For another independently configured routine, create a new page template based on routine, then assign that new template to the new page. Pages sharing a template share its routine settings; different page names alone do not create independent setups.

4. Open the library in the theme editor. For each Routine card, select its Routine page, write its Title, Routine goal, and Frequency, and optionally select an Image.

5. Under Products, choose a Product source:

   • Manual list (the default): select Preview products in the same order as the linked routine.
   • Collection: select a Collection. The card uses its first 12 products in the collection’s own sort order. With an automated collection, for example one that includes every product tagged evening, new products join the card on their own; set the collection to manual sorting to control the step order. If no collection is selected, the card falls back to the Preview products list.

   Either source configures the library card only and must be kept aligned with the destination routine.

6. Add the library page to your store navigation.

Section settings are grouped in the editor: Content (Heading, Heading size, Body text), Layout (Desktop layout, Card image ratio, Header alignment), Colors (Color scheme, Card color scheme, Show card shadow), and Padding. Leave Heading blank and the card titles become the section’s top-level headings, so the page outline never skips a level. The routines template includes a hidden page section above the library that provides the page’s main heading for search engines and screen readers; keep it when you edit the template.

Each card lists its first three products as numbered steps, each with a small product image, its title, and its price. On a narrow card, or with a long price, the price moves below the product title instead of squeezing it. When the card has more than three products, a line such as +9 more products follows the steps. Below them, a summary row shows the Product total with its price in the heading font on the left, and the product count on the right. Cards read at most 12 products from either source.

Card color scheme paints every card in its own color scheme (Scheme 10, dark brown, by default), so the cards stand apart from the section’s Color scheme band. Choose the same scheme as the section for flat cards.

The product total uses one selected or first available variant per preview product, in the active storefront currency. It is not a discounted bundle price or a promise that every product is available. Product prices and availability are confirmed on the routine page. Uploaded images take precedence over the first preview product image.

Desktop layout chooses how cards are arranged from 750px up. Grid (the default) shows three cards per row on desktop and two on tablets, centering a short row such as one or two cards. Carousel keeps the cards in one row, three in view on desktop and two on tablets, with previous and next buttons below it. Phones always show the cards as a carousel, whichever layout you choose: one card in view with a peek of the next. Customers swipe it; phones show no previous and next buttons, since the peeking card already signals the row continues. On larger screens the buttons appear only when there are more cards than fit, and the row stays swipeable without JavaScript. Button scrolling follows the global motion settings and moves instantly with Global motion style set to None or with reduced motion. Selecting a Routine card in the theme editor scrolls it into view.

Header alignment places the heading and body text. Center (the default) centers them and keeps the carousel buttons below the cards. Left aligns them to the left, starts a short row of cards (one or two) at the left edge under the heading, and moves the carousel buttons beside the heading, at the end of the header row. The buttons appear only when there are more cards than fit, and never on phones.

Show card shadow (on by default) adds a soft drop shadow below each card in the card color scheme’s shadow color, so cards look lifted off the section background. The carousel row leaves room for the shadow, so it is never cut off at the row’s edges.

Image ratio sets one shape for every card image: Landscape (3:2, the default), Square (1:1), or Portrait (4:5). It applies on desktop and mobile alike. Each image is cropped to fill that frame, respecting its focal point, so a tall upload no longer makes its card taller than the others.

The Explore routine link has no resting underline on desktop or mobile. On desktop, hovering or keyboard-focusing it applies the theme’s Text hover effect to the label and nudges the arrow forward. With the effect set to None, or with reduced motion enabled, the arrow stays still.

Cards with no page are hidden from customers. In the theme editor they show a sample image and setup note, so the section remains easy to configure. Up to five cards can be added, removed, duplicated, and reordered. Desktop shows three cards per row; a shorter row, such as one or two cards, is centered.

Routine builder images on mobile

Image ratio controls the desktop card crop. Mobile image ratio independently selects Landscape (6:5), Square (1:1), or Portrait (4:5) below 750px. Its default, Same as desktop, preserves the existing crop. Desktop cards with Image beside content still fill their card height.

With Step blocks selected as the product source, each Product step has an optional Mobile image below Custom image. It overrides only that step’s card image below 750px and respects its own focal point. Leaving it empty uses the custom image, then the product’s featured image. Mobile images also work on editor sample cards before a product is selected; sample cards remain hidden from customers. A mobile-only upload leaves the desktop sample illustration intact. Image overrides do not change product data or commerce information. Summary and review thumbnails retain the main product or custom image.

Essentials and Extended

In Routine builder, enable Show Essentials and Extended versions. For each Product step, set Include step in to Essentials and Extended or Extended only.

The Essentials / Extended switch uses text tabs with an underline marking the selected version. Morning, Evening, and Weekly retain their separate tab bar style. Tab bar size scales their width, height, and label text. On mobile, Small uses 13px labels, Medium 14px, and Large 15px; all three retain comfortable button heights.

Essentials starts with the shared steps. Extended adds the optional steps in their authored order. The tab count, numbered path, summary thumbnails, product review, and purchase total follow the chosen version. The switch appears only in tabs that contain an extended step. A tab containing only extended steps starts in Extended, avoiding an empty first view.

Extended-only steps display a compact badge below their usage description and above the purchase controls.

Without JavaScript, all steps and normal product forms remain available, and extended steps are labeled. The version switch is hidden until it works.

Add missing products

Enable Let customers exclude products they own and leave Show complete routine quick add turned on in each Routine tab.

The ownership choices appear above the product price once the routine review loads. They require Show complete routine quick add on that Routine tab and a product that supports a one-time purchase. Sample cards have no ownership or cart controls.

Customers can check I already own this on a product card or in the review. The step stays visible in the instructions, but the product is excluded from the purchase count, total, and cart request. A single missing product can be purchased, and the submit button is disabled when none remain. Choices apply to this section visit and are not saved to a customer account or across pages.

The purchase button follows the current selection: Add essentials routine, Add extended routine, or Add routine when no versions apply. After a visible product is marked as owned it changes to Add missing products. When none remain, No products to add is disabled. Each action shows the number of unique variants being purchased. Switching versions recalculates the label, count, and total. The review heading also follows the selected version: Review your essentials routine or Review your extended routine. Without a version switch it reads Review your routine.

Only the selected version’s missing products are submitted. A variant used in multiple steps is added once. Sold-out selected variants stay visible in the instructions and review, but are automatically excluded from the purchase total, count, and cart request. Their ownership checkboxes are hidden, disabled, and unchecked on both the cards and the review. A subtle background and stronger border distinguish sold-out products; the review keeps its Sold out status visible. The customer can still select another available variant, which restores that product and its ownership controls. If some products are sold out, the action reads Add available products unless the customer has marked an available product as owned, in which case it reads Add missing products. A notice explains how many sold-out products are excluded. With no available products left to buy, No products to add stays disabled. Subscription-only products link to their product page and stay outside the routine batch purchase. Inventory changes at submission show Shopify’s error message and allow another attempt.

In the routine review, each product’s price appears directly below its title on desktop and mobile, and updates when its variant changes.

The customer can change variants through the existing product controls. Prices and review details update before the cart request. Products remain separate cart items; this feature does not create a bundle or discount.

Content ownership

• Library blocks own page references, goal, frequency, ordering, images, and the preview product source: a curated product list or a collection reference.
• Routine tabs and Product step blocks own the sequence, usage guidance, and Essentials/Extended membership.
• Shopify pages own destination URLs. Shopify products own product titles, variants, images, prices, selling-plan requirements, and availability.
• Ownership checkboxes are temporary customer choices. No app or custom metafield is required.

Connect product pages

Use Product routine preview below the main product information. It reads each product’s Routine pages list of Page references (custom.routine_pages by default, or your own Page list key configured in Routine pages metafield), then loads each page’s real Routine builder sequence. Choose Stacked or Slideshow for multiple cards; slideshow navigation sits below Explore routine. Existing custom.routine_page assignments remain a fallback when the list is empty. Manual preview cards are no longer available. The library’s own curated card products remain separately configured. See Product routine preview.