← All Skills
Theme 💎 Built for Sidekick ✍️ Sidekick drafts it — you apply it
shopify sidekick theme reviews

Generate Star Rating Showcase Section

Build a star rating showcase section with aggregate score, rating breakdown, review platform badges, and highlighted top reviews.

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 star rating showcase section that I can paste into my theme as a custom section, with these specifications:

Aggregate Rating Display:

  Large star rating graphic: [RATING] out of 5
  Numeric score in large text
  Total review count: “Based on [NUMBER] reviews”
  Rating source badge(s): [Google/Trustpilot/Judge.me/Shopify/Yelp]


Rating Breakdown:

  5-star bar: [PERCENTAGE]% ([COUNT] reviews)
  4-star bar: [PERCENTAGE]% ([COUNT] reviews)
  3-star bar: [PERCENTAGE]% ([COUNT] reviews)
  2-star bar: [PERCENTAGE]% ([COUNT] reviews)
  1-star bar: [PERCENTAGE]% ([COUNT] reviews)
  Animated progress bars on scroll


Highlighted Reviews:

  Top [NUMBER] selected reviews displayed below breakdown
  Review text, author, date, star rating per review
  “Verified Purchase” badge
  Helpful count


Layout Options:

  Display style: [compact-banner/detailed-section/sidebar-widget]
  Compact: single row with stars, score, count
  Detailed: breakdown chart with highlighted reviews
  Alignment: [center/left]


Design Settings:

  Star color (filled): [FILLED_COLOR]
  Star color (empty): [EMPTY_COLOR]
  Progress bar color: [BAR_COLOR]
  Background color: [BACKGROUND_COLOR]
  Section heading: [SECTION_HEADING]
  Padding: [TOP_PADDING]px / [BOTTOM_PADDING]px


Requirements:

  Schema markup for AggregateRating
  Half-star support in display
  Responsive layout
  Accessible star rating announcements
  Click-to-filter by star rating
  Support for multiple review source badges


Where to paste this: In Shopify admin, go to Online Store > Themes > Edit code, create a new file at sections/star-rating-showcase.liquid, and paste in the generated Liquid, CSS, and JavaScript. Save, then add the section to a page via the theme customizer (Online Store > Themes > Customize > Add Section).

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