> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/features-and-advanced-setup/product-rating.md). # Product rating How star ratings appear in Avante, which review apps the theme works with, and where to switch the rating on, including the product page. A row of stars under a product name is one of the cheapest pieces of persuasion a store can add. Shoppers scanning a collection page use it to decide which product to open first, and on a store with no other social proof it is often the only signal they have. Avante displays ratings on **product cards** — in collection grids, sliders, search results, recommendations and quick view — and on the **product page** itself. The theme does not collect reviews itself: it reads the rating your review app has already saved on the product, and draws it in the theme's own style so it matches your typography and colours instead of looking like a bolted-on widget. *** ### How it works Shopify has a pair of standard product metafields for ratings — a rating value and a review count. Review apps write to them, and Avante reads from them. That is the whole mechanism, and it is why the theme works with any app that follows the Shopify standard rather than only with one vendor. So there are two halves to the setup: install an app that fills the metafields, then switch the rating on where you want it. *** ### How to set it up {% stepper %} {% step %} #### Install a review app Install a product review app from the Shopify App Store. Popular choices that write to the standard rating metafields include **Judge.me**, **Loox**, **Okendo**, **Yotpo** and **Air Reviews**. Check the app's listing for “product rating metafield” or “theme star rating” support before you commit. {% endstep %} {% step %} #### Collect or import reviews Follow the app's setup instructions. Let it collect or import reviews. A product gets a rating only once it has at least one review. {% endstep %} {% step %} #### Open the theme editor In the Shopify admin, go to **Online Store → Themes** and click **Customize**. {% endstep %} {% step %} #### Choose a product-card section Open a section that shows product cards. This can be a collection grid, **Featured products** or **Product recommendations**. {% endstep %} {% step %} #### Enable ratings In the section settings, find **Show product rating** and turn it on. {% endstep %} {% step %} #### Enable other sections Repeat this for every section where you want stars. The setting is per section, not global. {% endstep %} {% step %} #### Add the rating block On the product page, open the **Product overview** section, click **Add block** and choose **Rating**. The block draws the same stars from the same metafields, and clicking it scrolls to the reviews on the page. {% endstep %} {% endstepper %} {% hint style="info" %} If you have just installed the app, give it time to sync. Ratings appear on the storefront only after the app has written them to the products. {% endhint %} *** ### Good to know * **Products without a rating show nothing — not empty stars.** A new product with no reviews simply has no star row, and the card layout closes up around it. You do not need to worry about a wall of grey zeros on a fresh catalogue. * **The setting is per section.** Turning the rating on in your collection grid does not turn it on in Product recommendations or in the search results. Walk through each section once. * **Partial stars are drawn properly.** A 4.3 average renders as four full stars and a partial fifth, not a rounded 4. * **The star colour is a theme setting, not a section one.** It lives in the theme settings under **Colors**, in the **Extra** group, as **Rating** — so one change updates every star on the store. * **Quick view shows the rating too**, using the same source, so a shopper who opens the quick view from a grid sees a consistent card. * **The product page uses the same stars.** Add the **Rating** block to **Product overview** and the theme draws them itself. The full written reviews below it still come from your review app's own block. * **Switching review apps resets the display.** The new app writes its own values to the metafields; until it does, the stars disappear. Plan the switch for a quiet period and re-import your reviews first if the app supports it. * **An app that does not use the standard metafields will not show stars.** If you have installed a review app and nothing appears anywhere, this is the usual cause — ask the app's support whether it writes the Shopify product rating metafields. *** ### Customization ideas * **Set the star colour to your accent** rather than the default. Ratings are one of the few places where a touch of brand colour reads as information, not decoration. * **Show the rating in search results.** Shoppers who search already know what they want; the rating helps them pick between near-identical results. * **Keep it off the smallest cards.** In a six-column grid the stars become decorative noise — reserve them for layouts where the card has room. * **Pair ratings with a testimonials section** on the home page so the proof is visible before the shopper reaches a product. *** ### Where to switch it on The **Show product rating** setting appears in every section that renders product cards, including the collection grid, search results, Featured products, Selected products, Product recommendations, Recently viewed products, Cart recommendations, the collection and new-arrivals tab sections, Banner with product, Stories slideshow, Testimonials and Quick view. On the product page and in Featured product, the stars come from the **Rating** block instead. *** ### Best practices * Turn the rating on only after the app has synced. Half a catalogue with stars and half without looks worse than none at all. * Collect reviews on your bestsellers first — they are the products shoppers compare, and a rating does the most work there. * Keep one review app. Two apps writing to the same metafields will fight over the value. * After enabling, check a product with no reviews and a product with many, on both desktop and mobile, to confirm the card layout holds in both states. *** ### Related * [Testimonials](/docs/avante-themes/sections/trust-and-social-proof/testimonials.md) * [Default product](/docs/avante-themes/templates/default-product.md) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://staylime.com/docs/avante-themes/features-and-advanced-setup/product-rating.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.