Protocol timeline

A program broken into steps over time, split by cadence — daily versus weekly, or week one through twelve. Up to four steps, each with its own detail.

Merchant-addable
Yes
Settings
27
Block types
1
Max blocks
4
File
sections/protocol-timeline.liquid

Used by default on: Home , Product , Product (stage)

Screenshots pending

Captures for Protocol timeline at desktop and mobile widths are generated from a live store by npm run shots. They appear here automatically once that has run.

When to use it

Products whose value depends on consistent use over time, where the customer needs to see the commitment before buying rather than discover it after.

Setting it up

  1. Add the section and write the heading and intro under Content.
  2. Set your cadence wording under Timeline labels — the words that head each phase.
  3. Add one Protocol step block per phase, up to four. Each has 14 settings; start with the label, duration, and description.
  4. Optionally set a Background image. Keep it quiet — the steps are the content.

Where the content comes from

Blocks own the steps. Purely editorial content specific to this instance.

Notes and cautions

  • Be realistic about timeframes. A protocol that overpromises produces refund requests at exactly the point the customer expected results.

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.

Content

EyebrowText
ID
eyebrow
Default
The protocol
HeadingText
ID
heading
Default
Your skin, in sequence.
DescriptionRich text
ID
description
Default
<p>A considered rhythm for morning, evening, and the moments in between.</p>

Timeline labels

Daily view labelText
ID
daily_label
Default
Daily ritual
Weekly view labelText
ID
weekly_label
Default
Weekly reset

Background image

Use generated background imageCheckbox

Turn this off to choose a custom background image.

ID
use_generated_background_image
Default
On
Background imageImage

A horizontal image works best. It will appear along the bottom of the section with a soft vignette.

ID
background_image
Shown when
use_generated_background_image is false
Use generated product imagesCheckbox

Turn this off to use the product images selected in each protocol step.

ID
use_generated_product_images
Default
On
Show background effectCheckbox
ID
show_background_effect
Default
On
Background effect densitySlider

Adjust the opacity of the background image and vignette.

ID
background_effect_density
Default
100
Range
0% to 100%, in steps of 5%
Shown when
show_background_effect
Background image vertical positionSlider

Position the image from top to bottom.

ID
background_image_vertical_position
Default
50
Range
0% to 100%, in steps of 5%
Shown when
show_background_effect

Style

Color schemeColor scheme
ID
color_scheme
Default
scheme-1
Show entrance animationCheckbox

Fades the section in on scroll. Respects the theme animation setting and reduced motion.

ID
enable_entrance_animation
Default
On
Top paddingSlider
ID
padding_top
Default
72
Range
0px to 160px, in steps of 4px
Bottom paddingSlider
ID
padding_bottom
Default
72
Range
0px to 160px, in steps of 4px

Blocks

Blocks are added, reordered, duplicated, and removed inside the section. Each type has its own settings.

Protocol step step

Step positionDropdown
ID
step_number
Default
Step 1
  • Step 11
  • Step 22
  • Step 33
  • Step 44
Step categoryText
ID
phase
Default
Morning

Daily ritual

TitleText
ID
daily_title
Default
Start fresh
InstructionText
ID
daily_body
Default
Massage onto damp skin, then rinse.
Product imageImage
ID
daily_image
Product linkLink
ID
daily_link
Product link labelText
ID
daily_link_label
Default
View product

Weekly reset

TitleText
ID
weekly_title
Default
Reset your rhythm
InstructionText
ID
weekly_body
Default
Use this step when your skin needs extra care.
Product imageImage
ID
weekly_image
Product linkLink
ID
weekly_link
Product link labelText
ID
weekly_link_label
Default
View product