Customer Review

Every value below lives inside the snippet, so you can adapt Customer Review to your brand without touching the rest of the theme.

• Colours — the snippet uses #fafafa, #e0e0e0, #d3d3d3, #333. Replace those values inside the style block with your brand palette, keeping at least a 4.5:1 contrast ratio between text and background so the block stays accessible.
• Gradient — swap the linear-gradient(...) declaration for a flat background colour if you want a more minimal, theme-native look.
• Sizing — adjust the font-size values (14px, 16px, 12px) and the padding so the block carries the same visual weight as the elements around it.
• Corners — border-radius: 12px controls the roundness. Set it to 0 for a sharper editorial look, or increase it for a softer, app-like feel.
• Images — replace the placeholder image URLs with your own assets. Upload them under Content → Files in Shopify admin and use the generated CDN URL, or reference a theme asset with {{ 'my-image.png' | asset_url }}.
• Copy — rewrite the hard-coded text (for example “Customer Review”) in your own brand voice, and translate it if you sell in more than one language.
• Responsive behaviour — the @media query defines the mobile breakpoint. Adjust the pixel value if your theme uses a different breakpoint scale.

These are the issues merchants run into most often when installing a snippet like this one.

• Editing the live theme directly. Duplicate it first — a single unbalanced Liquid tag can take a storefront down mid-campaign.
• Pasting the code into the wrong file. Dropped into layout/theme.liquid instead of sections/main-product.liquid, this block will render on every page of the store, including ones where it makes no sense.
• Renaming the CSS classes in the markup but not in the style block, or vice versa. The class names have to match exactly or the styling silently disappears.
• Leaving the demo images in place. They are hosted on third-party domains, can disappear at any time and slow the page down. Re-upload them to Shopify Files before going live.
• Publishing without testing on a real phone. Most Shopify traffic is mobile, and layout problems almost always surface there first.

What this block costs you in load time, and how to keep that cost at zero.

• The CSS is inline and scoped to this block, so it adds no extra network request. At a few kilobytes it has no measurable effect on your Lighthouse score.
• Add loading="lazy" plus explicit width and height attributes to every image in the snippet. That prevents Cumulative Layout Shift, which is a Core Web Vitals ranking factor.
• The animation runs on CSS keyframes. Animate only transform and opacity where you can — animating width, height or top forces a layout recalculation on every frame.
• Third-party image URLs bypass the Shopify CDN and add extra DNS lookups. Self-hosting those assets usually saves 100–300ms on first paint.
• Run PageSpeed Insights before and after you add the block so you have a concrete number rather than a guess.

How to add this block without damaging your on-page structure or your rich results.

• Nothing in this snippet should replace your page <h1>. Keep product and page headings intact and use <h2> or <h3> for the block's own heading so the document outline stays clean.
• Write a descriptive alt attribute for every image. Empty or generic alt text is one of the most common accessibility and SEO issues on Shopify stores.
• If the block shows review or rating content, keep it consistent with the structured data your review app already outputs. Duplicating or contradicting rating markup can cost you the rich result entirely.
• The block does not create a new URL, so there is no canonical or indexing change to make. It improves on-page engagement signals rather than crawlability.