Sidekick: Design How It Works Steps Section

Use Shopify Sidekick to create a step-by-step How It Works section that visually walks customers through your process or product usage.

View as Markdown

Sidekick writes it — you put it live

Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.

📋 Prompt

Run in Sidekick

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]


Generate the Liquid, CSS, and JavaScript for this “How It Works” steps section as a custom section I can paste into my theme myself.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Sections (e.g. sections/how-it-works.liquid), and paste the generated code in. Save, then open the theme editor and use “Add section” on the homepage or product page to place it.

How to Use

Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions