Craft Process

What this section does

Photo-driven step-by-step process section showing how your products are made

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.

• Vertical Stacked

  Freevertical-stacked

  Full-width photo per step, alternating text sides

  Specific to this style: title, subtitle, steps

• Horizontal Cards

  Freehorizontal-cards

  3–4 step cards in a row, each with photo on top

  Specific to this style: title, subtitle, steps

• Numbered Editorial

  Page Editornumbered-editorial

  Large outlined step numbers with magazine-style serif headings

  Specific to this style: title, subtitle, steps

• Polaroid Row

  Page Editorpolaroid-row

  Slightly rotated photo cards with handwritten-feel captions

  Specific to this style: title, subtitle, steps

• Timeline Rail

  Page Editortimeline-rail

  Vertical connecting line with numbered step nodes

  Specific to this style: title, subtitle, steps

• Stepper

  Page Editorstepper

  Horizontal connected progress stepper with numbered nodes

  Specific to this style: title, subtitle, steps

• Feature Showcase

  Page Editorfeature-showcase

  One large feature photo with a clickable thumbnail rail of every step

  Specific to this style: title, subtitle, railActiveColor, steps

• Contact Sheet

  Page Editorcontact-sheet

  Dense uniform photo grid with a corner number badge and caption scrim per step

  Specific to this style: title, subtitle, overlayColor, badgeColor, steps

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