Protocol timeline

Every card in this section is a phase of your routine — Cleanse, Treat, Hydrate — not a product. You write the phases once, and they are identical on every product page in the catalog.

That is worth stating plainly once you add product photography to the cards, because they can then look like product listings. They are not. No card names a product, prices one, links to one, or has a product picker behind it. The only thing that changes from one product page to the next is a small This product badge marking which phase the product being viewed occupies, and which cadence tab opens first.

Not the routine builder

Two sections deal with routines, and they answer different questions.

	Protocol timeline	Routine builder
Answers	Where does this product sit, and how often	What else do I use with it
Cards show	Phases you author	Real products
Commerce	None	Price and add to cart

Both can sit on the same product page. Listing products here as well would render the same complementary list twice.

How it is built

Blocks nest two deep:

Protocol timeline (section)
└── Protocol cadence      ← one per frequency: daily, weekly, monthly
    └── Protocol step     ← the phase cards

A cadence is a frequency, and it becomes a tab. A step is a phase card inside one cadence.

Each cadence keeps its own steps, so a weekly reset can run three steps while the daily ritual runs four. Add as many cadences as you actually run.

Authoring the routine

Step 1 — write the cadences and their phases

Add a Protocol cadence block per frequency and name it under Cadence name. Then add Protocol step blocks inside it, one per phase, filling in Phase, Title, and Instruction.

Adding a cadence creates a three-step starter — Cleanse, Treat, Hydrate. Edit it. Two cadences left at their defaults show identical cards under two different names, which is the single most common way this section is misconfigured.

Write the instruction for the phase, not for a particular bottle. “Press two to three drops into clean skin” stays true of whichever serum occupies that phase; a sentence naming one product does not, because these cards appear on every product page.

Cadence names are brand vocabulary — the same words on every product. They are not product facts.

Step 2 — choose what marks the current product

One section setting, Read the step from, decides which product detail the badge is matched against.

Option	Where it comes from	Setup needed
Product type (default)	The Product type field on the product	Fill it in: Cleanser, Serum, Moisturizer, Sunscreen
Cosmetic function	A Shopify category attribute	Assign a product category — Shopify adds the attribute
Product tag	The product’s tags	Tag your products
Do not mark a step	Nothing	Turns the badge off

This setting does not change what any card says. It only decides which card gets the badge, and it applies to the whole section.

Step 3 — give each step a match value

Put the value that identifies the phase in that step’s Match value: Cleanser on the cleanse step, Serum on the treat step. Separate several with commas. A step with no match value is never marked.

Matching ignores capitalization and punctuation, and matches whole values only — Serum will never mark a step whose match value is Serum booster.

Step 4 — optionally decide which tab opens first

Tag products daily or weekly, then put the same word in each cadence’s Product tag. A product carrying the tag opens that cadence first.

Frequency is the one thing Shopify has no category attribute for — its attributes describe what a product is, never how often to reach for it — so a tag is the only signal available. Leave the field blank and the first cadence opens, which is what a section that never asked would do anyway.

What actually varies per product

Rule	Behavior
Which cadences show	All of them, always. A serum’s page still shows the weekly tab, unmarked
Which tab opens	The cadence whose Product tag matches; otherwise the first one
Which card is badged	Every step whose Match value matches
What a card says	Never changes. Same phase, title, instruction, and image everywhere

How many cards get marked

Every match is marked, not just the first, and that follows from the signal you picked:

• Product type is one value, so it marks one card per cadence.
• Cosmetic function returns several values on most products — Moisturizing and Hydrating together, say — so it can legitimately mark two cards.

Either way, a cleanser is marked in the daily cadence and in the weekly one, because both have a cleanse phase. You decide how many cards get marked by choosing the match values; the section does not overrule you.

Product form and Skin care effect are deliberately not offered. A form is a texture — a foam may be a cleanser or something else entirely — and an effect is a benefit that returns many values at once. Neither says where a product sits in a sequence.

Layout, images, and no-JavaScript

Four steps per cadence is what the staggered row is designed around. One to three center themselves; five or more turn the row into a horizontal scroller, which works but reads as a list rather than a sequence.

Each card shows its step’s own Image. Until you choose one, it shows Shopify’s standard product placeholder — the same one every other section in the theme uses. There are no built-in demo images, so a freshly added section looks like a starting point rather than finished content.

The section is sized to fit one screen. On a wide screen the cadence tabs sit beside the heading rather than under it, and each card’s image height follows the screen height, so the header and a full staggered row of four cards fit together on a typical laptop.

The cadence tabs follow Heading size: a smaller heading gets a shorter, lighter switch, so the tabs never outweigh the heading above them. This holds on phones too, where the tab labels, height, and spacing all step down with the heading.

Background

The background image is off by default. Turn on Show background image and three settings appear:

Setting	What it does
Background image	Shown along the bottom of the section, fading up into the color scheme. A wide image works best
Background image opacity	How strongly the image shows through
Background image vertical position	Which part of the image stays in frame, from top to bottom

With the setting on but no image chosen, nothing renders.

How the current product is marked

The matching card gets two signals: a small This product badge under the step number, and an outline around the whole card. When the row scrolls into view, the outline draws itself around the card, a single glint of light travels it once, and a soft halo settles in. Switching cadence tabs replays it on the newly shown card.

The cadence tabs work the same way: they form one switch, and a raised thumb slides to the selected cadence.

Both take their timing from Interface animation speed and their on/off from Global motion style in theme settings. Neither loops. With No motion selected, or for a visitor whose device asks for reduced motion, the outline and halo are simply there and the thumb moves without sliding.

The badge is what carries the meaning, so the card is never marked by color alone.

The badged card keeps its own step image. Swapping in the product’s photograph was tried and put one real product shot in a row of phase art, which read like a product list with a wrong entry.

With JavaScript disabled, every cadence stacks under its own heading instead of becoming a tab. All the content is there, server-rendered.

Upgrading an existing section

Sections configured before the cadence rebuild do not carry over. The old shape was a single section with up to four steps, exactly two tabs from two section settings, and a duplicated set of daily and weekly fields on every step. That is all gone:

Removed	Now
Daily view label, Weekly view label	Cadence name on each cadence block
Step position	Block order — the numbers are automatic
Duplicated daily/weekly title, instruction, and image	One of each per step
Product link, Product link label	Removed. The section intentionally has no links
Use generated background image, Show background effect, Background effect density	Show background image, with the image, opacity, and position under it
Use generated product images	Removed. Each step uses its own Image, or the standard placeholder

Existing instances need re-authoring: add your cadences, then re-enter the steps inside them.

When something looks wrong

1. Both tabs show the same cards. You added a cadence and left its starter steps as they came.
2. No card is badged. The theme editor says so directly. Check that the step’s Match value uses the same wording as whatever Read the step from is pointed at.
3. Too many cards are badged. You are reading from Cosmetic function and the product carries several. Switch to Product type, or narrow the match values.
4. A tab is missing. That cadence has no steps in it. A cadence with nothing inside does not become a tab.
5. The whole section is missing. There are no steps anywhere in it. On the storefront it removes itself rather than showing an empty heading; in the theme editor it tells you what to add.
6. A card shows a placeholder drawing. That step has no Image yet. Choose one in the step block.
7. The background image is missing. Either Show background image is off, or it is on with no image chosen.