Sidekick: Design How It Works Steps Section

Design a “How It Works” steps section for my Shopify store:

Section Heading: [e.g., “How It Works” or “Getting Started Is Easy” or custom]
Subheading: [OPTIONAL, e.g., “Just [NUMBER] simple steps to [DESIRED OUTCOME]”]

Steps:

Step 1:

  Title: [SHORT TITLE, e.g., “Choose Your Plan”]
  Description: [2-3 SENTENCES EXPLAINING THIS STEP]
  Icon or image: [DESCRIBE ICON/ILLUSTRATION or UPLOAD]


Step 2:

  Title: [SHORT TITLE]
  Description: [2-3 SENTENCES]
  Icon or image: [DESCRIBE or UPLOAD]


Step 3:

  Title: [SHORT TITLE]
  Description: [2-3 SENTENCES]
  Icon or image: [DESCRIBE or UPLOAD]


Step 4 (optional):

  Title: [SHORT TITLE]
  Description: [2-3 SENTENCES]
  Icon or image: [DESCRIBE or UPLOAD]


Step Numbering:

  Show step numbers: [yes/no]
  Number style: [circled numbers/plain digits/ordinal text like “First, Second”]
  Connector between steps: [arrow/line/dotted path/none]


Layout:

  Orientation: [horizontal row/vertical list/alternating zigzag]
  Columns (if horizontal): [3/4]
  Text alignment: [centered/left-aligned]
  Icon/image size: [small/medium/large]
  Icon placement: [above title/left of text/in a circle badge]


Design Preferences:

  Background color: [COLOR or “match theme”]
  Step card style: [no card – open layout/bordered cards/shadowed cards]
  Accent color for numbers/icons: [COLOR or “theme accent”]
  Animation on scroll: [sequential fade-in/slide up/none]


Call to Action (at the end):

  CTA button text: [e.g., “Get Started” or “Shop Now”]
  CTA button link: [TARGET URL]
  CTA placement: [below all steps/inline with last step]