Appearance
Routine timeline
A read-only walkthrough of a daily routine — morning, mid-day, evening, weekly. Each step gets a time label, an icon, a short instruction, and optionally a linked product.
This is not the Bundle Builder
The Routine timeline shows a routine. The Bundle builder lets a shopper build one and add it to the cart.
Reach for the timeline when you want to explain how your products fit into someone's day. Reach for the builder when you want them to assemble a stack and check out. They're often good together: the timeline teaches, the builder sells.
Try it
←Routine timeline
Short kicker text rendered above the heading in smaller, uppercase type.
Displayed below the routine. Recommended: "Individual results may vary."
←Routine step
Storefront preview
Daily routine
Your daily routine
A simple routine for lasting results — start with morning, add evening, layer from there.
Morning
Adaptogen Blend
Mix 1 scoop with warm water. Take on an empty stomach for best absorption.
Mid-day
Hydrate + Energise
One sachet with lunch or during your afternoon training block.
Evening
Magnesium Blend
One sachet in warm milk, 30 minutes before bed.
Evening Magnesium Blend
€24.00
Weekly
Recovery Stack
Three evenings a week — curcumin plus omega-3.
Individual results may vary. Food supplements are not intended to diagnose, treat, cure or prevent any disease.
Clear every step and the whole band disappears on the storefront — the theme never paints a heading over an empty routine. Switch Layout to Grid to drop the spine and card the steps instead.
How it works
Each step is one Routine step block. The section takes up to 6, which is about as much routine as anyone will actually follow.
On a wide screen the steps sit side by side with a single hairline — the spine — running through them, one filled node marking each step. The line starts at the first node and stops at the last: it never trails off into empty space. On a phone the spine turns on its side and runs down the edge of the screen, with each step indented beside its node.
Desktop (timeline) Phone (timeline)
●───────●───────●───────● ● MORNING
MORNING MID-DAY EVENING WEEKLY │ Adaptogen Blend
☀ ⚡ ☾ ♥ │ Mix 1 scoop with warm water…
Adaptogen Hydrate Magnesium Recovery ● MID-DAY
Blend + Energise Blend Stack │ Hydrate + Energise
Mix 1 One sachet One Three │ One sachet with lunch…
scoop… with lunch… sachet… evenings… ● EVENING
│ Magnesium Blend
● WEEKLY
Recovery StackGrid is the other layout. It drops the spine entirely and puts each step in its own card, which suits a routine whose steps have no particular order.
If there are no steps, there is no section
A timeline with no steps in it renders nothing at all on your storefront — no heading, no disclaimer, no empty band. You will still see the section in the theme editor (with a reminder to add steps) so you can find it and finish it. That is deliberate: a heading promising "Suggested daily use" over an empty space is worse than no section.
The same applies in reverse — if the only thing in the section is an app block, the section stays visible, because the app block is real content.
Settings
| Setting | What it does |
|---|---|
| Color scheme | Picks which set of colors to use for this section |
| Eyebrow | Short kicker text above the heading, in small uppercase type (e.g. "Daily routine") |
| Heading | The title of the section |
| Text | A short paragraph under the heading |
| Disclaimer | An optional line under the routine. Ships with a neutral default you should replace. |
| Layout | Timeline draws a spine through the steps. Grid drops them into cards. Default: Timeline. |
The eyebrow is not a subheading
Eyebrow is rendered in small uppercase letter-spaced type — two or three words, like a section kicker. A full sentence typed in here gets shouted back at your visitors in 12px capitals. Put sentences in Text instead, which renders as a normal paragraph under the heading.
Blocks
| Setting | What it does |
|---|---|
| Time of day | The step's label (e.g. "Morning", "Mid-day", "Weekly") |
| Heading | The step title (e.g. "Magnesium Blend") |
| Text | What to actually do — dose, timing, with or without food |
| Product | Links a product; shows a quiet card with image, name and price |
| Image | An image for the step — shows above the product card when you set both |
| Icon | Sun, Moon, Coffee, Droplet, Energy or Heart — or None to hide the icon |
The product card here is read-only: no add-to-cart, no quantity stepper, no swatches. Tapping it goes to the product page. That is the difference between this section and the bundle builder, and it is deliberate — a routine is something you read, not a checkout form.
The disclaimer line
The disclaimer ships with one neutral sentence:
Individual results may vary.
That is deliberately not a supplements disclaimer. An earlier version of this theme shipped "Food supplements are not intended to diagnose, treat, cure or prevent any disease" as the default, which handed every merchant who dragged this section in — a coffee roaster, a garden centre, a tool shop — regulated health copy they never asked for.
This field is a place to put your own wording, not a compliance feature. What belongs in it — and whether a line here is sufficient for anything — depends entirely on what you sell and where you sell it. The theme cannot know either, so it does not guess: check the rules that apply to you, or ask someone who knows them, and write what they tell you.
Clearing it entirely removes the line, which is your call to make, not the theme's.
Colour and contrast
Every word in this section — the eyebrow, the time labels, the step text and the disclaimer — is drawn in your colour scheme's own text colour, at full strength. Nothing is faded to look "secondary": the hierarchy comes from size and weight instead, so the small print stays readable on every one of the theme's colour schemes. Your accent colour appears as the rule under the eyebrow, the node on the spine and the ring around each icon.
Tips
- Write the instruction, not the sales pitch. "One sachet in warm milk, 30 minutes before bed" is worth more than "Unlock deeper sleep."
- Keep it to what a person will really do. Four steps that get followed beat six that get abandoned.
- Link the product on every step you can. A shopper who has just read when to take something is as close to buying it as they will ever be.
- Keep the time labels short. They are set in uppercase with wide letter-spacing, so "Post-workout" reads well and "Thirty minutes before training" does not.