Product Journey

Where to find it

Available content blocks

• Journey Step

Editor controls

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

Display section ID

ID is used in the Sections group section to create anchor links. Toggle on to show a copy button on this section.

Display on

Choose the presentation or source that fits this component.Options: All devices · Desktop only · Mobile only

Timeline presentation

Choose the presentation or source that fits this component.Options: Original centered heading · Heading beside image with time badges

Icons inside timeline markersConditional

Enable or disable this option and preview the result.

Timeline motion

Progress follows the step markers while scrolling. Reduced-motion and low-power devices keep all content visible.Options: Static · Reveal steps · Scroll progress

Keep image in view on desktop

Enable or disable this option and preview the result.

Desktop Layout

Choose the presentation or source that fits this component.Options: Image Left — Timeline Right · Image Right — Timeline Left

Container Max Width

Adjust within the range offered by the theme editor.

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

Saved 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.

Line and badge borderConditional

Choose a local color when the relevant custom source is enabled.

Background ColorConditional

Choose a local color when the relevant custom source is enabled.

Background GradientConditional

If set, overrides background color

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 TextConditional

Edit the text shown by this component.

Heading Size

Adjust within the range offered by the theme editor.

Heading Weight

Choose the presentation or source that fits this component.Options: Normal · Medium · Semi Bold · Bold

Heading ColorConditional

Choose a local color when the relevant custom source is enabled.

Heading Text Case

Choose the presentation or source that fits this component.Options: Default · Uppercase

Accent ColorConditional

Choose a local color when the relevant custom source is enabled.

Accent Gradient (Optional)Conditional

If set, overrides accent color

Accent Style

Choose the presentation or source that fits this component.Options: Normal · Italic

Subtitle

Use the matching control in the theme editor and preview the component before publishing.

Subtitle Size

Adjust within the range offered by the theme editor.

Subtitle ColorConditional

Choose a local color when the relevant custom source is enabled.

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

Image Border Radius

Adjust within the range offered by the theme editor.

Image Max Width

Adjust within the range offered by the theme editor.

Line ColorConditional

Choose a local color when the relevant custom source is enabled.

Line Width

Adjust within the range offered by the theme editor.

Circle Size

Adjust within the range offered by the theme editor.

Circle Background ColorConditional

Choose a local color when the relevant custom source is enabled.

Circle Background GradientConditional

If set, overrides circle background color

Icon ColorConditional

Choose a local color when the relevant custom source is enabled.

Icon Size

Adjust within the range offered by the theme editor.

Badge Background ColorConditional

Choose a local color when the relevant custom source is enabled.

Badge Border ColorConditional

Choose a local color when the relevant custom source is enabled.

Badge Text ColorConditional

Choose a local color when the relevant custom source is enabled.

Badge Font Size

Adjust within the range offered by the theme editor.

Badge Border Radius

Adjust within the range offered by the theme editor.

Step Title Size

Adjust within the range offered by the theme editor.

Step Title Weight

Choose the presentation or source that fits this component.Options: Normal · Medium · Semi Bold · Bold

Step Title ColorConditional

Choose a local color when the relevant custom source is enabled.

Step Description Size

Adjust within the range offered by the theme editor.

Step Description ColorConditional

Choose a local color when the relevant custom source is enabled.

Gap Between Steps

Adjust within the range offered by the theme editor.

Top Padding

Adjust within the range offered by the theme editor.

Bottom Padding

Adjust within the range offered by the theme editor.

Theme image assetConditional

Optional filename from this theme's assets folder, including its extension. Used when no image is selected.

Fallback image URLConditional

Optional image URL when no image is selected. Use an owned permanent Shopify CDN URL.