Generate Social Proof Counter Section

Create an animated social proof counter section displaying key store metrics like customers served, orders shipped, and satisfaction rates.

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

Generate the Liquid, CSS, and JavaScript for a social proof counter section with animated statistics that I can paste into my theme as a custom section, with these specifications:

Counter Items (each counter includes):

  Large number value: [NUMBER]
  Number prefix (optional): e.g., “$”, “#”
  Number suffix (optional): e.g., “+”, “%”, “K”, “M”
  Label text below number: [LABEL_TEXT]
  Small icon above or beside number (optional)


Suggested Counters:

  Happy customers: [NUMBER]+
  Orders shipped: [NUMBER]+
  Products sold: [NUMBER]+
  Countries served: [NUMBER]+
  Years in business: [NUMBER]+
  5-star reviews: [NUMBER]+
  Satisfaction rate: [NUMBER]%


Animation Settings:

  Count-up animation from 0 to target number
  Animation duration: [DURATION] milliseconds
  Animation easing: [linear/ease-out/ease-in-out]
  Trigger: animate when section scrolls into viewport
  Animate only once or every time in view: [once/always]


Layout Options:

  Counters per row: [3/4/5/6]
  Counter alignment: [center/left]
  Dividers between counters: [none/vertical-line]
  Layout style: [inline-row/cards/icon-boxes]


Design Settings:

  Background: [color/gradient/image]
  Number color: [NUMBER_COLOR]
  Number font size: [SIZE]px
  Label color: [LABEL_COLOR]
  Section heading: [SECTION_HEADING]
  Padding: [TOP_PADDING]px / [BOTTOM_PADDING]px


Requirements:

  IntersectionObserver for scroll-triggered animation
  Responsive: 2 per row on tablet, 1-2 on mobile
  Accessible: numbers readable without animation
  Lightweight (no heavy animation libraries)
  Support for [NUMBER] counter items


Where to paste this: In Shopify admin, go to Online Store > Themes > Edit code, create a new file at sections/social-proof-counter.liquid, and paste in the generated Liquid, CSS, and JavaScript. Save, then open the theme customizer (Online Store > Themes > Customize) and use Add Section to place it on the page you want.

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