> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.froonze.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Reviews Preview Badge: Installation Guide

# How to add the reviews preview badge to your store

The preview badge shows the average star rating and the number of review. Add it to your product page, your collection pages, or both.

![Collection page with reviews badge added](https://storage.crisp.chat/users/helpdesk/website/-/8/7/3/1/873182aab5747000/slide001_8au8j.png)
---

## Add the badge to your product page

1. In your Froonze dashboard, go to [**Reviews → Installation**](https://admin.shopify.com/apps/froonze-app/reviews/installation).
2. Find the **Preview badge** card and choose your theme from the dropdown.
3. Click **Install**.

The theme editor opens on your product template, with the **Reviews preview badge** block already added.

4. Click and drag the block to where you want it to appear (for example, under the product title or price).
5. Click **Save**.

---

## Add the badge to your collection pages

1. In the theme editor, open the **Default collection** template (or any collection template you use).
2. Under **Collection**, click **Product card**.
3. Click **Add block** → **Apps** → **Reviews preview badge**.
4. Drag the block to where you want it on the card (for example, between the product image and the title).
5. Click **Save**.


| The badge now appears on every product card in that collection template.

---

## If the badge doesn't show: add it manually with Liquid

Some themes don't support app blocks inside product cards. In that case, you can add the badge directly in the theme code.

1. In Shopify, go to [**Online Store → Themes**](https://admin.shopify.com/themes) → **⋯** → **Edit code**.
2. Open your product card file. In most themes it's `snippets/product-card.liquid`.
3. At the top of the file, inside the existing `{%- liquid -%}` block, add:

```liquid
assign reviews_metafield = product.metafields["app--5845775"].reviews.value

if reviews_metafield.group_handle != blank
  assign group_metaobject = metaobjects["app--5845775--reviews_group"][reviews_metafield.group_handle]
  if group_metaobject != blank
    assign reviews_metafield = group_metaobject.cache.value
  endif
endif

assign number_of_reviews = reviews_metafield.number_of_reviews | plus: 0
assign avg_rating = reviews_metafield.rating | plus: 0
```

4. Place this span wherever you want the badge to appear on the card (for example, under the price):

```html
<span class="frcp-preview-badge" data-rating="{{ avg_rating }}" data-number-of-reviews="{{ number_of_reviews }}"></span>
```

5. Make sure the **Reviews preview badge** block is added at least once on the page (see the steps above). It loads the script that draws the stars and the review count.
6. Click **Save**.

|| **Reviews groups:** if you group reviews across products (for example, colour variants), the `if` block in step 3 makes the badge show the group's combined rating and review count instead of the single product's.

---

## Good to know

* If you need help with any of these steps, contact [**Froonze support**](mailto:support@froonze.com) and we'll add the badge to your theme for you.