Product reviews

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.

Choose how to show them

Each way needs something different on the page:

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.

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.

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. For three products:

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.

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

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

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

From the definition to the page:

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.

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.

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.

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.

Automate it with Shopify Flow. Three workflows from the Flow library finish the job: Review moderation notice emails you when a review is waiting, Review request after delivery asks the customer for one five days after the order is fulfilled, and Product rating from your reviews 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