Step by step

Step by step shows a numbered routine, such as a four-step skincare routine or how to care for leather. On desktop the image stays in place while the steps scroll past; the image, the number ring and the background follow the step in view.

How to set it up

Step 1: Add the section

1. In the theme editor, open the page and click Add section.
2. Choose Step by step. Drag it to where you want it on the page.

Step 2: Add the steps

1. Click Add block > Step. Write a Title and Text, and a short Tag next to the number, such as 2 min.
2. Choose the step's Image and Background color. The stage turns this color while the step is in view.
3. Link a Product to show it under the step.

Step 3: Set the stage and layout

1. Under Stage, choose the Image shape (Circle, Arch or Rounded) and put it on the left or the right.
2. Under Layout, choose the Mobile layout (1): Swipe row (each step as a card side by side), Swipe with fixed image (one image that changes as the steps are swiped), Compact list (a small image beside each step) or Stack.

Step 4: Write the heading

1. Under Heading, write an eyebrow, a heading, its style and highlight, and a short text.

Step 5: Review the settings

1. See the settings reference below for every option.

Settings reference

Full width, section layout, color scheme, spacing and mobile overrides work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.

Related

• Sticky image cards
• Banner sticky scrolling
• Multi-column