How To / Steps Guide

Where to find it

Available content blocks

• Eyebrow (Small Top Text)
• Heading
• Step
• Kit Title (Subtitle)
• Tag / Pill
• CTA Button
• Guarantee Badge

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

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.

Steps and accentsConditional

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

Accent textConditional

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

BorderConditional

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

Tag backgroundConditional

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 photoConditional

Choose the presentation or source that fits this component.Options: Hero · Detail · Lifestyle · Portrait

Starter image

Uploaded image takes priority over the included demo photo.Options: None · Skincare · Supplement · Matcha · Pet supplement · Shapewear · LED mask · Vacuum

Image Alt Text (fallback)

Used if the image has no alt text

Image Aspect Ratio

e.g., 1/1, 4/5, 4/3, 3/4

Image Border Radius

Adjust within the range offered by the theme editor.

Image Position

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

Image Column Width (%)

Adjust within the range offered by the theme editor.

Column Gap

Adjust within the range offered by the theme editor.

Container Max Width

Adjust within the range offered by the theme editor.

Container Side Padding

Adjust within the range offered by the theme editor.

Heading placement

Choose the presentation or source that fits this component.Options: Above both columns · Inside text column

Header Alignment

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

Eyebrow ↔ Heading Gap

Adjust within the range offered by the theme editor.

Header Bottom Spacing

Adjust within the range offered by the theme editor.

Section BackgroundConditional

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

Background Gradient (Optional)Conditional

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

Top Padding

Adjust within the range offered by the theme editor.

Bottom Padding

Adjust within the range offered by the theme editor.