Flow

The Flow section presents a step-by-step routine or process, pairing each step with an image and an optional product so shoppers know exactly what to do and what to buy.

Example: https://purity.nextsky.co/products/anti-aging-serum

Section settings

General

Setting	Description
Section width	3 options for the container width: • Fixed width: matches your page content width in Theme settings -> Layout. • Stretch width: spans the width regardless of screen size. • Full width: takes up the entire width of the screen.
Color scheme	Select colors from Theme settings -> Colors.

Section header

Setting	Description
Subheading	Short line of text shown above the heading.
Heading	The main title of the section.
Enable heading underline animation	Draws an animated underline under the words you set to italic in the heading. Use the Italic (I) button in the editor to mark the words.
Underline style	3 underline styles: • Simple underline • Curve stroke • Squiggle underline
Underline color	The color of the animated underline.
Heading size	Choose Heading 1, Heading 2, or Heading 3.
Alignment	Aligns the header content Left, Center, or Right.

Image

Setting	Description
Image ratio	Aspect ratio of the step images: • Adapt to image • Square (1:1) • Portrait (3:4) • Landscape (4:3)
Image width	Width of the image column on desktop (40–70%). Automatically optimized for mobile.
Desktop image position	Places the image to the Left or Right of the text on desktop. The image is shown above the text on mobile.

Content settings

Setting	Description
Content alignment	Aligns the step text Left, Center, or Right.
Column gap	Space between the columns: No gap, Small, Medium, Large, or X-Large.

Section padding

Setting	Description
Top	Customize the top padding of the section (0–100px).
Bottom	Customize the bottom padding of the section (0–100px).

Section divider

Setting	Description
Show divider	Displays a dividing line to separate this section from the previous one.

Block settings

Add up to 6 Step blocks, one per step in the routine.

Setting	Description
Heading	The title of the step.
Preset	Applies a typography preset (Default or Heading 1–6) to the step heading. Edit presets in Theme settings -> Typography.
Description	The description text for the step.
Image	The image shown for the step.
Product	An optional product to feature within the step.