Process Steps

What this section does

Step-by-step how-it-works process with icons

Where it goes

• Can be used as many times as you like on one page.
• This section is in every plan — no extra plugin needed.

Styles

Different looks for the same section. You can change the style later; your content stays as it is.

The first 2 styles of every section are open on every store. The rest unlock with the Page Editor plugin — all at once, not style by style.

• Numbered

  Freenumbered

  Numbered circles on a connecting line, with a card per step

  Specific to this style: title, subtitle, steps, columns, accentColor, eyebrow, media, panelBg, numberColor, dividerColor

• Connected Cards

  Freeconnected-cards

  Icon cards joined by arrow connectors in a flowing row

  Specific to this style: title, subtitle, steps, columns, accentColor, eyebrow, media, panelBg, numberColor, dividerColor

• Vertical

  Page Editorvertical

  Steps stacked down a vertical line with the number on the left

  Specific to this style: title, subtitle, steps, columns, accentColor, eyebrow, media, panelBg, numberColor, dividerColor

• Zigzag

  Page Editorzigzag

  Steps alternate left and right of a central line

  Specific to this style: title, subtitle, steps, columns, accentColor, eyebrow, media, panelBg, numberColor, dividerColor

• Status Rail

  Page Editorstatus-rail

  Vertical rail with status nodes; active node pulses

  Specific to this style: title, subtitle, steps, columns, accentColor, eyebrow, media, panelBg, numberColor, dividerColor

• Dashed Connector

  Page Editordashed-connector

  Stacked steps joined by a dashed connector + icon rings

  Specific to this style: title, subtitle, steps, columns, accentColor, eyebrow, media, panelBg, numberColor, dividerColor

• Split Feature

  Page Editorsplit-feature

  A sticky intro panel (eyebrow, title, image) on one side and the steps as a card grid on the other

  Specific to this style: title, subtitle, steps, columns, accentColor, eyebrow, media, panelBg, numberColor, dividerColor

• Big Number Rows

  Page Editorbig-number-rows

  Full-width stacked rows divided by hairlines, each with an oversized step number beside the icon and text

  Specific to this style: title, subtitle, steps, columns, accentColor, eyebrow, media, panelBg, numberColor, dividerColor

Settings

The fields you see in the Section Settings panel on the right when this section is selected.

Shared by every style

• bg
• contentMaxWidth
• sectionMaxWidth
• horizontalPadding
• verticalPadding
• verticalAlignment
• horizontalAlignment
• horizontalMargin
• verticalMargin
• spacingOverrides
• animationType
• animationDuration
• animationDelay
• animationEasing
• animationStagger
• animationRepeat
• animationParallax
• imageParallax
• animationScrollEffect
• height