← All Skills
Theme 💎 Built for Sidekick ✍️ Sidekick drafts it — you apply it
shopify sidekick theme social-proof testimonials

Generate Customer Quote Wall Section

Create a masonry-style customer quote wall with varied card sizes, highlight colors, and dynamic loading for social proof impact.

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 quote wall section with these features:

Quote Card Content:

  Customer quote text
  Customer name
  Customer title/role and company (optional)
  Customer photo (optional, circular)
  Star rating (optional)
  Source platform icon (optional)
  Date of quote


Wall Layout:

  Masonry grid with varied card heights based on quote length
  Columns: [3/4/5] on desktop
  Column gap: [GAP]px
  Row gap: [GAP]px
  Optional: highlight [NUMBER] quotes with accent color background


Card Styles:

  Regular cards: white/light background
  Highlighted cards: [ACCENT_COLOR] background with contrasting text
  Card border radius: [RADIUS]px
  Card padding: [PADDING]px
  Quote mark decoration: [large-quote-mark/line-left/none]
  Shadow: [none/subtle/medium]


Section Settings:

  Section heading: [SECTION_HEADING]
  Subheading: [SUBHEADING]
  Background color: [BACKGROUND_COLOR]
  Padding: [TOP_PADDING]px / [BOTTOM_PADDING]px
  “Load More” button after [NUMBER] visible quotes
  Total quotes supported: at least [NUMBER]


Design Options:

  Quote text font: [serif/sans-serif/custom]
  Quote text size range: [MIN_SIZE]px to [MAX_SIZE]px (larger for shorter quotes)
  Hover effect: [elevate/highlight/none]
  Animate cards in on scroll: [fade-up/fade-in/none]


Requirements:

  True masonry layout (CSS grid or JavaScript-assisted)
  Responsive: fewer columns on smaller screens
  Lazy render quotes below the fold
  Accessible card structure
  Randomize highlight card positions


Generate the Liquid, CSS, and JavaScript for this customer quote wall 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-quote-wall.liquid), and paste the generated code in. Save, then open the theme editor and use “Add section” on the homepage or a dedicated page (like an About or Reviews page) to place it.

  Smooth “Load More” with no page jump

How to Use

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