Roadmap

Where to find it

Available content blocks

• Roadmap 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

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 · Legacy compatibility

Shopify color schemeConditional

Choose an available Shopify color scheme.

Use theme colorsConditional

Enable or disable this option and preview the result.

Contained section

Enable or disable this option and preview the result.

Max container width (px)

Only applies to desktop

Max section width

Maximum width of the entire section when not contained. Centers the section on larger screens.

Enable background image

Enable or disable this option and preview the result.

Desktop background image

Recommended size: 1920x1080px or larger

Mobile background image

Recommended size: 768x1024px or larger. If left empty, desktop image will be used.

Desktop background size

Choose the presentation or source that fits this component.Options: Cover · Contain · Auto

Desktop background position

Choose the presentation or source that fits this component.Options: Top Left · Top Center · Top Right · Center Left · Center Center · Center Right · Bottom Left · Bottom Center · Bottom Right

Mobile background size

Choose the presentation or source that fits this component.Options: Cover · Contain · Auto

Mobile background position

Choose the presentation or source that fits this component.Options: Top Left · Top Center · Top Right · Center Left · Center Center · Center Right · Bottom Left · Bottom Center · Bottom Right

Enable background overlay

Enable or disable this option and preview the result.

Overlay color

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

Overlay opacity

Adjust within the range offered by the theme editor.

Heading

Edit the text shown by this component.

Subheading

Edit the formatted text for this component.

Heading size

Adjust within the range offered by the theme editor.

Heading line height

Adjust within the range offered by the theme editor.

Mobile heading size

Adjust within the range offered by the theme editor.

Mobile heading line height

Adjust within the range offered by the theme editor.

Subheading size

Adjust within the range offered by the theme editor.

Mobile subheading size

Adjust within the range offered by the theme editor.

Step title size

Adjust within the range offered by the theme editor.

Step title letter spacing

Choose the presentation or source that fits this component.Options: Heading · Body

Mobile step title size

Adjust within the range offered by the theme editor.

Step description size

Adjust within the range offered by the theme editor.

Mobile step description size

Adjust within the range offered by the theme editor.

Accent Text

Optional accent text to highlight in the heading

Override global accent text settings

Enable or disable this option and preview the result.

Use accent gradient

Only applies when override is enabled

Accent text gradientConditional

Only applies when override is enabled and use_accent_gradient is true

Accent colorConditional

Only applies when override is enabled and gradient is disabled

Accent font family

Only applies when override is enabledOptions: Inherit · Serif · Bodoni Moda · Instrument Serif · DM Serif Text · Nothing You Could Do

Accent font style

Only applies when override is enabledOptions: Normal · Italic · Oblique

Accent font weight

Only applies when override is enabled

Desktop image

Choose an image from your shop. Preview its crop on desktop and mobile.

Layout position

Choose whether the image appears on the left or right side of the contentOptions: Left (Image left, Text right) · Right (Image right, Text left)

Image column width (%)

Adjust within the range offered by the theme editor.

Make image column full height

On desktop, the image column will span the full height of the section

Minimum section heightConditional

Only applies when full height is enabled

Show image above timeline on mobile

On mobile, the image will appear after the subheading and before the timeline

Text column width (%)

Applies when desktop image or placeholder is added

Image border radius

Adjust within the range offered by the theme editor.

Fill timeline and markers on scroll

Enable or disable this option and preview the result.

Viewport progress positionConditional

A step fills when its marker passes this percentage down the visible screen.

Unreached marker backgroundConditional

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

Unreached marker iconConditional

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

Timeline width (px)

Adjust within the range offered by the theme editor.

Timeline border radius

Adjust within the range offered by the theme editor.

Timeline max width (%)

Adjust within the range offered by the theme editor.

Show badges

Enable or disable this option and preview the result.

Desktop badge font size

Adjust within the range offered by the theme editor.

Mobile badge font size

Adjust within the range offered by the theme editor.

Badge font weight

Choose the presentation or source that fits this component.Options: Normal (400) · Medium (500) · Semi-Bold (600) · Bold (700)

Badge border radius (px)

Adjust within the range offered by the theme editor.

Badge border width (px)

Adjust within the range offered by the theme editor.

Badge border style

Choose the presentation or source that fits this component.Options: Solid · Dashed · Dotted · Double

Badge border colorConditional

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

Desktop content alignment

Choose the presentation or source that fits this component.Options: Left · Center · Right

Mobile content alignment

Choose the presentation or source that fits this component.Options: Left · Center · Right

Desktop roadmap item spacing (px)

Adjust within the range offered by the theme editor.

Mobile roadmap item spacing (px)

Adjust within the range offered by the theme editor.

Enable custom spacing

Enable or disable this option and preview the result.

Desktop top padding

Adjust within the range offered by the theme editor.

Desktop bottom padding

Adjust within the range offered by the theme editor.

Desktop left padding

Adjust within the range offered by the theme editor.

Desktop right 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.

Mobile left padding

Adjust within the range offered by the theme editor.

Mobile right padding

Adjust within the range offered by the theme editor.

Enable Desktop Placeholder Space

Creates empty space to show background image on desktop. Uses 'Image column width' and 'Text column width' settings.

Desktop Placeholder Min Height

Minimum height for placeholder space. Width is controlled by 'Image column width' setting.

Enable Mobile Placeholder Space

Creates empty space to show background image on mobile

Mobile Placeholder Height

Adjust within the range offered by the theme editor.

Section backgroundConditional

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

Heading colorConditional

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

Subheading colorConditional

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

Step title colorConditional

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

Step description colorConditional

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

Timeline line colorConditional

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

Active timeline fill colorConditional

Color of the line that fills as you scroll down

Circle background colorConditional

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

Circle icon colorConditional

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

Badge background 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.

Show button

Display a call-to-action button at the bottom of the roadmap

Button text

Text displayed on the button

Button action

Choose what happens when the button is clickedOptions: Redirect to Product Page · Scroll to Top of Page · Custom URL

Product to redirect to

Select the product page to redirect to (only used when 'Redirect to Product Page' is selected)

Custom URL

Enter a custom URL to redirect to (only used when 'Custom URL' is selected)

Use global button styling

Use the theme's global button colors and styling

Button border radius

Only used when global button styling is disabled

Button background colorConditional

Only used when global button styling is disabled

Button text colorConditional

Only used when global button styling is disabled

Button hover background colorConditional

Only used when global button styling is disabled

Button hover text colorConditional

Only used when global button styling is disabled