Skip to documentation

Vitality journey

Layout, content and available controls for Vitality journey.

Where to find it

Add this section from the theme editor on a supported template.

Available content blocks

  • Week

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Display section ID
Enable or disable this option and preview the result.
Display on
Choose the presentation or source that fits this component.Options: All devices · Desktop only · Mobile only
Timeline motion
Steps remain readable without JavaScript. Reduced-motion and low-power devices keep a static timeline.Options: Static · Reveal steps · Scroll progress
Keep image in view on desktop
Enable or disable this option and preview the result.
Heading
Use bold or italic in this heading to apply the global Heading DNA accent style. Change it in Theme settings > Typography.
Accent effect
Highlight adds a slanted color plate behind bold or italic heading text. The existing accent color controls set its background.Options: Theme setting · Highlight
Heading accent color source
Global accent styling is managed in Theme settings > Typography; choose Custom for a local color.Options: Heading DNA · Custom
Custom accent colorConditional
Choose a local color when the relevant custom source is enabled.
Accent headingConditional
Edit the text shown by this component.
Italic accent headingConditional
Enable or disable this option and preview the result.
Text
Edit the formatted text for this component.
Product image
Choose an image from your shop. Preview its crop on desktop and mobile.
Starter image
Uploaded image takes priority. Included photos travel with the demo theme.Options: None · Skincare · Supplement · Matcha · Pet Supplement · Shapewear · Led Mask · Vacuum
Starter photoConditional
Choose the presentation or source that fits this component.Options: Hero · Detail · Lifestyle · Portrait · Listing
Button label
Edit the text shown by this component.
Button link
Choose the destination for this link or button.
Button style
Global button styling is managed in Theme settings > Buttons.Options: Primary · Secondary · Tertiary · Custom
Color source
Theme colors follow Theme settings > Colors. Other sources apply only to this section.Options: Use theme colors · Choose a color scheme · Set custom colors
Color schemeConditional
Choose an available Shopify color scheme.
BackgroundConditional
Choose a local color when the relevant custom source is enabled.
HeadingConditional
Choose a local color when the relevant custom source is enabled.
TextConditional
Choose a local color when the relevant custom source is enabled.
AccentConditional
Choose a local color when the relevant custom source is enabled.
Accent textConditional
Choose a local color when the relevant custom source is enabled.
LineConditional
Choose a local color when the relevant custom source is enabled.
Max width
Adjust within the range offered by the theme editor.
Heading size
Adjust within the range offered by the theme editor.
Image width
Adjust within the range offered by the theme editor.
Mobile image position
Choose the presentation or source that fits this component.Options: Above content · Below content
Top padding
Adjust within the range offered by the theme editor.
Bottom padding
Adjust within the range offered by the theme editor.
Mobile top padding
Adjust within the range offered by the theme editor.
Mobile bottom padding
Adjust within the range offered by the theme editor.

Still need a hand?

Send support your store domain, theme version, error code and what you tried. Keep authentication tokens out of public messages.

Contact Scale support ↗