# Product reviews

> Show product reviews and star ratings from Judge.me, Loox or Klaviyo Reviews, build your own stars from Shopify's rating metafields, or keep your own reviews in Shopify with a form, without a review app.

Status: Ready (Smootify 2.0)  
1.x page: https://docs.smootify.io/docs/apps/judge-me-reviews  
URL: https://www.smootify.io/docs/features/reviews  
Updated: 2026-10-13

Reviews usually come from a review app installed on your Shopify store. The app collects and stores them, and your Webflow site shows them. This page covers three ways to show them: Smootify’s elements for Judge.me, the widgets of other apps such as Loox and Klaviyo Reviews, and stars you design in Webflow from the rating the app saves in Shopify. A fourth way needs no review app at all: your own reviews, kept in Shopify.

> [!NOTE]
> Install the review app on Shopify first. Its widgets must be allowed on a site that is not a Shopify theme: check the app's plan and its guide for other platforms.

## Choose how to show them

Each way needs something different on the page:

| You want | Use | Works with |
|---|---|---|
| the app's own stars and review list | the Judge.me elements, `judge-me-stars` and `judge-me-reviews` (step 1), with Judge.me's script in the Head code | Judge.me |
| stars designed in Webflow, and the rating on Google | the rating metafields (step 2), with no app code on the page | any app that saves them |
| the widgets of another app | the app's code (step 3); product widgets need the product id without its prefix | Loox, Klaviyo Reviews and others |
| your own reviews, with no review app | a `metaobject-creator` form to collect them and `smootify-metaobjects` to show them (step 4); the form needs the Server plan | Shopify alone: the reviews are metaobject entries in your store |

You can mix them. For example, the app’s review list on the product page and your own stars on the product cards.

## 1. Judge.me

**In Judge.me.** Turn on the widgets for other platforms: in the Judge.me admin, **General settings › Advanced › Platform-independent review widget**. Judge.me then gives you a script. Paste it at the end of **Site settings › Custom code › Head code** in Webflow.

**In Webflow.** Two Custom elements show the widgets of one product. Both go inside a `smootify-product`, on the product page or in a product card:

- `judge-me-stars`: the star rating badge;
- `judge-me-reviews`: the reviews of the product.

```html
<judge-me-stars></judge-me-stars>
<judge-me-reviews></judge-me-reviews>
```

Leave them empty: Smootify replaces what is inside with the Judge.me widget of the product, then asks Judge.me’s script to draw it. Outside a `smootify-product`, they are removed. Their place on the page and their size are up to your design.

Judge.me’s other widgets, such as all the store’s reviews or a carousel, do not belong to one product. Add them as Judge.me’s guide for other platforms explains: Smootify does not touch them.

## 2. Stars from the rating metafields

Shopify has two standard product metafields for reviews: `reviews.rating`, the average rating, and `reviews.rating_count`, the number of reviews. Review apps can keep them up to date: check that option in your app’s settings. Smootify then shows them like any other metafield, with no app code on the page.

In Shopify, under **Settings › Custom data**, both definitions need **Storefront access**.

Inside a `smootify-product`:

- `metafield="rating"` with `namespace="reviews"` shows the average. On an element without children it writes the value, such as `4.5`. It always sets the CSS variable `--metafield-rating`: the rating as a share of its scale, such as `90%` for 4.5 out of 5.
- `metafield="rating_count"` with `namespace="reviews"` shows the number of reviews.
- `if-metafield="rating_count"` with `namespace="reviews"` shows an element only when the product has at least one review.

```html
<div if-metafield="rating_count" namespace="reviews">
  <div metafield="rating" namespace="reviews" data-attr="aria-label"><div>★★★★★</div></div>
  <div><span metafield="rating_count" namespace="reviews">0</span> reviews</div>
</div>
```

For the stars, the element with the rating holds a fill with a row of stars inside. Give the fill a width of `var(--metafield-rating)` and hide its overflow: it covers that share of the row. `data-attr="aria-label"` gives the value to screen readers. Ratings in detail: [Metafields on the page](https://www.smootify.io/docs/build/metafields). For three products:

| Product | `--metafield-rating` | What shows |
|---|---|---|
| 4.5 out of 5, 12 reviews | 90% | the fill covers 90% of the row of stars |
| 3.8 out of 5, 5 reviews | 76% | the fill covers 76% of the row |
| no review yet | not set | the element with `if-metafield="rating_count"` hides the whole block |

The same markup works in a product card, inside the card’s `smootify-product`.

**On Google.** On a product page, Smootify adds the rating to the product’s structured data when the page shows both metafields, `rating` and `rating_count`. Google wants a marked-up rating to be visible on the page, so show both. See [SEO and structured data](https://www.smootify.io/docs/start/seo).

## 3. Loox, Klaviyo Reviews and other apps

Smootify has no element for these apps. Add their widgets as each app explains for sites outside Shopify:

- **The app’s script** goes in the site’s custom code, where the app’s guide says. Loox also asks you to add your site’s domain in its settings. Klaviyo Reviews needs Klaviyo’s own script on the site.
- **Widgets for the whole store**, such as all reviews or a review carousel, go in a Code Embed where they should show.
- **Product widgets** need the product’s id as a plain number, such as `1234567890`. The **Shopify ID** field of your Products collection holds it with a prefix, `gid://shopify/Product/1234567890`. On the product template page, insert the field in the Code Embed with **Add Field**, and add the short script of the examples below, which removes the prefix.

### Klaviyo Reviews

Turn on Klaviyo’s App embed or add Klaviyo’s script to the site (see [Shopify apps on a Webflow site](https://www.smootify.io/docs/features/theme-apps)), then add each widget in a Code Embed, inside the wrapper Klaviyo reads, a Div with `data-block-handle`. The product reviews, on the product template page, where `{Shopify ID}` is the field inserted with **Add Field**:

```html
<div class="shopify-block shopify-app-block" data-block-handle="product-reviews">
  <div id="fulfilled-reviews-all" data-id="{Shopify ID}"></div>
</div>
<script>
  document.currentScript.closest(".w-embed").querySelectorAll("[data-id]").forEach((el) => {
    el.dataset.id = el.dataset.id.split("/").pop();
  });
</script>
```

The other widgets follow the same pattern, with their own handle and inner element:

- **all reviews** (any page): handle `all-reviews`, inner `<div id="klaviyo-reviews-all" data-id="all"></div>`;
- **featured reviews carousel** (any page): handle `featured-reviews-carousel`, inner `<div id="klaviyo-featured-reviews-carousel"></div>`;
- **reviews list** and **reviews summary** (product page): handles `product-reviews-list` and `product-reviews-summary`, inner `<div id="klaviyo-reviews-list" data-id="{Shopify ID}"></div>` and `<div id="klaviyo-reviews-summary" data-id="{Shopify ID}"></div>`, with the same script;
- **average rating** (product page): handle `average-rating`, inner `<span class="klaviyo-star-rating-widget" data-id="{Shopify ID}" data-product-title="{Name}"></span>`, with the same script.

### Loox

Loox shows its widgets outside Shopify on its **Convert** plan and above. In Loox, open **Settings › General**, and under **External domains** add your site’s domain, with `www`. Then add the widgets in Code Embeds: all reviews is `<div id="looxReviews" data-loox-aggregate></div>`. On the product template page, the product’s reviews and its stars:

```html
<div id="looxReviews" data-product-id="{Shopify ID}"></div>
<div class="loox-rating" data-fetch data-id="{Shopify ID}"></div>
<script>
  document.currentScript.closest(".w-embed").querySelectorAll("[data-product-id], [data-id]").forEach((el) => {
    if (el.dataset.productId) el.dataset.productId = el.dataset.productId.split("/").pop();
    if (el.dataset.id) el.dataset.id = el.dataset.id.split("/").pop();
  });
</script>
```

Loox’s other widgets, such as carousels and the pop-up, are in Loox’s own guide for external sites.

For stars on product cards, the rating metafields of step 2 need no app code at all.

## 4. Your own reviews, kept in Shopify

Without a review app, reviews can live in your own store. A form on your site saves each review as a metaobject entry in Shopify, you approve it there, and the site lists the approved ones with their stars. The customers’ words stay in your store, and there is no monthly fee for it.

> [!NOTE]
> The form needs the **Server** plan and the **Metaobject creator** add-on turned on in the Smootify dashboard. See [Collect data with forms](https://www.smootify.io/docs/features/metaobject-creator).

From the definition to the page:

1. **Settings › Custom data › Metaobjects**: the definition Review, type `review`, with the fields rating (Rating, scale 1 to 5), body (Multi-line text), author (Single line text), product (Product reference) and photo (File). Active-draft status on, to approve each review; Storefronts access on, to show them.
2. **Content › Metaobjects › Review**: a review sent from the site, waiting as a draft: rating 4, "The coffee was perfect", by Anna. You make it active to publish it.
3. **On the site**, `smootify-metaobjects` with `data-type="review"` lists the active reviews. `metaobject="rating"` sets `--metafield-rating` (80% for 4 out of 5), and the stars inside fill to that width.

**The definition.** In Shopify, under **Settings › Custom data › Metaobjects**, add a definition of type `review` with a `rating` field of type **Rating** on a scale from 1 to 5, a `body`, an `author`, and if you want a `product` reference and a `photo` file. Turn on **Active-draft status**, to approve each review before it shows, and **Storefronts** access, to show them.

**The form.** A `metaobject-creator` with `data-type="review"` and `data-draft="true"` around a Webflow Form Block. The rating is a Select field or Radio buttons named `rating`, with the values 1 to 5: Smootify’s server writes the number on the field’s scale. On a product page, a Custom element with the tag `input`, `type="hidden"`, the Name `product` and its `value` bound to the `Shopify ID` field links the review to the product.

```html
<metaobject-creator data-type="review" data-draft="true">
  <div class="w-form">
    <form>
      <select name="rating"></select>
      <textarea name="body"></textarea>
      <input name="author">
      <file-input name="photo"></file-input>
      <input type="submit" value="Send my review" data-wait="Sending…">
    </form>
    <div class="w-form-done"><div>Thank you. Your review shows once we have read it.</div></div>
    <div class="w-form-fail"><div>Something went wrong</div></div>
  </div>
</metaobject-creator>
```

**Approve.** Each review arrives as a draft under **Content › Metaobjects › Review**: make it active to publish it. Without `data-draft`, every review goes live the moment it is sent.

**Show them.** `smootify-metaobjects` with `data-type="review"` lists the active reviews. Inside its `smootify-metaobject` template, `metaobject="rating"` sets the CSS variable `--metafield-rating`, the rating as a share of its scale: draw the stars as in step 2, with a fill as wide as that share.

```html
<smootify-metaobjects data-type="review" data-limit="6">
  <div>
    <smootify-metaobject>
      <div metaobject="rating" data-attr="aria-label"><div>★★★★★</div></div>
      <p metaobject="body">Review</p>
      <div metaobject="author">Name</div>
    </smootify-metaobject>
  </div>
  <empty-state>No reviews yet</empty-state>
  <button data-action="load-more">More reviews</button>
</smootify-metaobjects>
```

**Only the reviews of this product.** `smootify-metaobjects` with `data-type="review"` lists every active review of the store: it does not filter them by their `product` field. For a product page, keep each product’s reviews in a product metafield:

- In Shopify, under **Settings › Custom data › Products**, add a metafield definition of type **Metaobject** (list of entries) that points to the Review definition, such as `custom.reviews`, with **Storefronts** access.
- On each product, under **Metafields**, pick the reviews that belong to it.
- On the product page, set `data-type` to `metafield.custom.reviews` and bind `data-product-id` to the `Shopify ID` field. The template inside stays the same.

```html
<smootify-metaobjects data-type="metafield.custom.reviews" data-product-id="{Shopify ID}">
  <div>
    <smootify-metaobject>
      <div metaobject="rating" data-attr="aria-label"><div>★★★★★</div></div>
      <p metaobject="body">Review</p>
      <div metaobject="author">Name</div>
    </smootify-metaobject>
  </div>
  <empty-state>No reviews yet</empty-state>
</smootify-metaobjects>
```

A product with no reviews in its metafield shows the empty state, or hide the whole section while the list is empty: `smootify-metaobjects` takes `is-empty`. More on metafield lists in [Show metaobjects](https://www.smootify.io/docs/features/metaobjects).

**Automate it with Shopify Flow.** Three workflows from the Flow library finish the job: [Review moderation notice](https://www.smootify.io/flows/review-moderation) emails you when a review is waiting, [Review request after delivery](https://www.smootify.io/flows/review-request) asks the customer for one five days after the order is fulfilled, and [Product rating from your reviews](https://www.smootify.io/flows/review-rating) adds the approved reviews to each product’s average and count every night, in the standard metafields `reviews.rating` and `reviews.rating_count`, which `metafield="rating"` with `namespace="reviews"` turns into stars on cards and product pages. All three are ready to import. The request’s buttons open the product page at `#reviews`: give the section that holds your reviews the ID `reviews`, in its settings.

## Before you publish

> [!STUCK]
> - **The Judge.me widgets are missing.** They are not inside a `smootify-product`, which removes them.
> - **The Judge.me widgets stay empty.** Judge.me's script is not in the Head code, or the widgets for other platforms are not turned on in Judge.me.
> - **The rating stays empty.** The two definitions need Storefront access, and each element needs `namespace="reviews"`: without it, Smootify reads the namespace `custom`.
> - **The stars do not fill.** The fill must be inside the element with `metafield="rating"`, with a width of `var(--metafield-rating)`.
> - **No rating on Google.** The page must show both `rating` and `rating_count`, and the product needs at least one review.
> - **Your own reviews do not show.** They are drafts waiting in **Content › Metaobjects › Review**, or the definition has no Storefronts access.
> - **A review is refused.** Its rating is outside the field's scale, such as 6 on a scale of 1 to 5: the form's Error message shows Shopify's reason.
> - **A Loox or Klaviyo product widget stays empty.** It received the Shopify ID with its `gid://shopify/Product/` prefix.