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.

Add the badge to your product page

1. In your Froonze dashboard, go to 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.

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 → ⋯ → 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:

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):

<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.

Good to know

• If you need help with any of these steps, contact Froonze support and we'll add the badge to your theme for you.

Updated on: 12/10/2026