Generate Customer Success Stories Section

Build a customer success stories section with narrative cards, transformation highlights, product journeys, and expandable full stories.

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

Create a customer success stories section:

Story Card Content:

  Customer photo or avatar
  Customer name and location: [NAME], [LOCATION]
  Story title/headline
  Short preview text (2-3 sentences)
  Key transformation metric: [METRIC_BEFORE] to [METRIC_AFTER]
  Products used (linked to product pages)
  “Read Full Story” expand button
  Date or duration of customer journey


Expanded Story View:

  Full narrative text (rich text with paragraphs)
  Additional photos (gallery or inline)
  Timeline of customer journey milestones
  Products used with images and links
  Customer quote pullout
  Related stories suggestions


Layout Options:

  Card grid: [2/3] cards per row
  Featured story with supporting stories below
  Carousel slider for story cards
  List view with image left, content right
  Card style: [clean/bordered/image-header]


Section Settings:

  Section heading: [SECTION_HEADING]
  Subheading: [SUBHEADING]
  Background color: [BACKGROUND_COLOR]
  Padding: [TOP_PADDING]px / [BOTTOM_PADDING]px
  CTA: [CTA_TEXT] linking to [CTA_URL] (e.g., “Share Your Story”)
  Filter by product or category (optional)


Design Settings:

  Card image aspect ratio: [16:9/4:3/square]
  Accent color: [ACCENT_COLOR]
  Typography: heading [SIZE]px, body [SIZE]px
  Hover effect: [elevate/image-zoom/highlight]
  Expand animation: [slide-down/modal/new-page]


Requirements:

  Responsive layout
  Accessible expand/collapse with ARIA attributes
  Lazy load images
  Schema markup for customer stories
  Support for at least [NUMBER] stories
  Smooth expand animation
  SEO-friendly with proper heading hierarchy


Generate the Liquid, CSS, and JavaScript for this customer success stories 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/customer-success-stories.liquid), and paste the generated code in. Save, then open the theme editor and use “Add section” on the homepage or a dedicated success-stories 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