How It Works

Layout, content and available controls for How It Works.

Scale Theme · v1.9.3 · 2 min read

Where to find it

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

Available content blocks

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
Step presentation: Choose the presentation or source that fits this component.Options: Original cards · Image with numbered caption
Caption number circle sizeConditional: Adjust within the range offered by the theme editor.
Eyebrow: Edit the text shown by this component.
Section Subtitle: Use the matching control in the theme editor and preview the component before publishing.
Main Title Text: 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 Text: Optional thinner text that appears next to the main title
Title Size: Adjust within the range offered by the theme editor.
Title Weight: Choose the presentation or source that fits this component.Options: Normal · Medium · Semi Bold · Bold
Accent Weight: Choose the presentation or source that fits this component.Options: Light · Normal · Medium
Accent Style: Choose the presentation or source that fits this component.Options: Normal · Italic
Accent ColorConditional: Choose a local color when the relevant custom source is enabled.
Accent Gradient (Optional)Conditional: If set, gradient will override accent color
Subtitle Size: Adjust within the range offered by the theme editor.
Subtitle Weight: Choose the presentation or source that fits this component.Options: Normal · Medium · Semi Bold
Desktop Columns (Max visible): Maximum number of cards visible at once on desktop
Enable desktop slider: If enabled and you have more cards than visible columns, users can navigate to see more
Show desktop navigation dots: Enable or disable this option and preview the result.
Card Title Size: Adjust within the range offered by the theme editor.
Card Title Weight: Choose the presentation or source that fits this component.Options: Medium · Semi Bold · Bold
Card Text Size: Adjust within the range offered by the theme editor.
Card Text Weight: Choose the presentation or source that fits this component.Options: Normal · Medium
Step Number Size: Adjust within the range offered by the theme editor.
Show step numbers: Enable or disable this option and preview the result.
Card Border Radius: Adjust within the range offered by the theme editor.
Card Border Width: Adjust within the range offered by the theme editor.
Card Border Style: Choose the presentation or source that fits this component.Options: Solid · Dashed · Dotted · Double
Card Border ColorConditional: Choose a local color when the relevant custom source is enabled.
Card Gap (Desktop): Adjust within the range offered by the theme editor.
Image Aspect Ratio: e.g., 4/3, 16/9, 1/1, 3/4
Fade image into content: Enable or disable this option and preview the result.
Enable hover effect: Enable or disable this option and preview the result.
Mobile Layout: Choose the presentation or source that fits this component.Options: Vertical (Image left, content right) · Horizontal Slider
Enable mobile slider: Only applies if mobile layout is set to horizontal
Autoplay slider: Enable or disable this option and preview the result.
Autoplay Speed: Adjust within the range offered by the theme editor.
Show navigation dots: Enable or disable this option and preview the result.
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 accentConditional: Choose a local color when the relevant custom source is enabled.
Step number textConditional: Choose a local color when the relevant custom source is enabled.
Card backgroundConditional: Choose a local color when the relevant custom source is enabled.
Card borderConditional: Choose a local color when the relevant custom source is enabled.
Section BackgroundConditional: Choose a local color when the relevant custom source is enabled.
Heading ColorConditional: Choose a local color when the relevant custom source is enabled.
Text ColorConditional: Choose a local color when the relevant custom source is enabled.
Card BackgroundConditional: Choose a local color when the relevant custom source is enabled.
Step Number BackgroundConditional: Choose a local color when the relevant custom source is enabled.
Step Number ColorConditional: Choose a local color when the relevant custom source is enabled.
Container Width: 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.