How to install Klaviyo Reviews on Shopify (vintage themes and headless)

Estimated 6 minute read

|

Updated Aug 6, 2025, 12:00 AM EST

Table of contents

• You will learn
• Before you begin
• Installing with headless architecture on Shopify
• Add the code snippets
• SEO / All reviews widget (optional)
• Outcome
• Additional resources

You will learn

Learn how to install Klaviyo Reviews with a vintage Shopify theme or headless architecture. This process involves copying several code snippets and pasting them into your site’s code.

If you are using a Shopify 2.0 theme, you can install Klaviyo Reviews without using code. Head to our article on getting started with Klaviyo Reviews to learn more. If you use WooCommerce, learn how to install Klaviyo Reviews for WooCommerce.

This process requires directly editing your site’s code. If you aren’t comfortable doing this yourself, reach out to your developer or contact a Klaviyo partner for assistance.

Before you begin

Before you paste these code snippets in your site’s code, add the Klaviyo Reviews app to your Shopify store. For vintage themes, enable Klaviyo's onsite tracking.

Installing with headless architecture on Shopify

To integrate Klaviyo Reviews with a headless Shopify store, add Klaviyo's JavaScript tracking snippet, also known as Klaviyo.js, to all pages where you’d like to add reviews widgets (e.g., product pages). You may have already installed this snippet if you've configured Klaviyo's onsite tracking or sign-up forms.

Learn how to install Klaviyo.js for Shopify stores.

After installing Klaviyo.js, add the widgets to your headless storefront using the steps below. The Shopify theme-editing instructions in the widget sections apply to vintage themes.

1. Copy each widget snippet you want to use from the sections below into the page template or component where the widget should appear.
2. For product-specific widgets, replace {{product.id}} with the product’s numeric Shopify product ID, for example data-id=“123456789”. Supply the correct ID for each product page. In the star rating snippet, also replace {{product.title}} and {{product.type}} with that product’s title and type.
3. Keep data-id=“all” unchanged for the SEO / All reviews widget. The featured review carousel snippet does not need a product ID.
4. Save your changes and preview the storefront. Check a product page with published reviews and any other pages where you added widgets before deploying your changes.

Add the code snippets

The code snippets below allow certain reviews widgets to appear in different areas of your store.

• The star rating widget displays the current star rating for a particular product, and is most often installed beneath your product’s name.
• The review summary widget shows a chart breaking down all the ratings selected for a product, user images submitted with reviews, and the most common feedback the product has received. It’s usually installed near the bottom of a product page.
• The product reviews widget is a combination of the reviews summary and review list widgets. If you add the product reviews widget to your site, you don’t need to add the review list and review summary widgets separately.
• The review list widget displays a list of all published reviews and customer questions, along with a search bar, filters, a Write a Review button, and an Ask a Question button. It’s typically installed immediately below the review summary widget.
• The featured review carousel widget displays highlighted reviews from all your products. This can be featured on your homepage, on a standalone reviews page, or anywhere else on your site. You can select the reviews that are featured in this widget. If available, customer-submitted images accompany each review; your product images are used if no image was submitted alongside the review.
• The SEO / All reviews widget displays all your reviews across all products on a single page. Use this widget to improve your SEO and provide a single place for potential customers to see what your current customers love. This widget is most often added to a standalone Reviews page on your site.

Star rating widget

Use the star rating widget to prominently feature a product’s average rating and the number of reviews it has received.

For a vintage theme, install this widget beneath your product’s title:

1. Open your Shopify store admin.
2. Under Sales channels click Online Store.
3. Click the three dots menu next to your current theme > Duplicate to create a clone of your current theme.
4. From the duplicate theme’s three dots menu, click Edit code.

1. Search “product” in the file search bar and locate the file used for your product page content. It might be product.liquid, product-template.liquid, or something similar. (If you use a custom product page template, select that instead.)

1. Select the file, then search for {{ product.title }} to locate the code that displays your product’s title.

1. Add a new line beneath this code.
2. On the new line, paste this code snippet: <div class=“klaviyo-star-rating-widget” data-id=“{{product.id}}” data-product-title=“{{product.title}}” data-product-type=“{{product.type}}”></div>

1. Click Save.
2. Click Preview store.
3. Navigate to a product page within your store preview for a product that has published reviews. You should see a star widget beneath the product’s title. A product without reviews can have its star rating widget hidden by your widget settings.

Product reviews widget

Use the review summary and review list widget (or just the product review widget) to add a summary and list of all published reviews for each product on your site.

To install the summary and list widgets separately, head to the separate review summary and review list widgets section below.

For a vintage theme, install this widget in the same theme as your star rating widget:

1. Open your Shopify store admin.
2. Under Sales channels click Online Store.
3. Select the same theme you used for the star rating widget. If you skipped that widget, choose your current theme to edit it, or click its three dots menu > Duplicate to edit a copy.
4. From the selected theme’s three dots menu, click Edit code.

1. Search “product” in the file search bar and locate the file used for your product page content. It might be product.liquid, product-template.liquid, or something similar. (If you use a custom product page template, select that instead.)

1. Select the file, then navigate to the very bottom (or wherever you’d like the reviews summary and list widget to appear).
2. Add a new line, then paste this code snippet: <div id=“klaviyo-reviews-all” data-id=“{{product.id}}”></div>

1. Click Save.
2. Click Preview store.
3. Navigate to a product page within your store preview for a product that has reviews. You should see a reviews summary and list view widget near the bottom of the page.

Separate review summary and review list widgets

If you’d prefer to install the review summary and review list widgets separately (rather than together, as outlined in the section above), use the following code snippets:

Review summary widget

<div id=“klaviyo-reviews-summary” data-id=“{{product.id}}”></div>

Review list widget

<div id=“klaviyo-reviews-list” data-id=“{{product.id}}”></div>

Featured review carousel widget (optional)

The featured reviews carousel displays hand-selected reviews on any page you choose (e.g., your home page).

To add a carousel displaying your featured reviews, first select published product reviews that include review text. Star ratings without text and store reviews cannot be selected using the Feature control.

1. In Klaviyo’s main navigation, select Website > Reviews.
2. Click All reviews.
3. Beside a review you’d like to feature, click the Feature icon. If you see More feature options instead, open it and select Add to featured reviews.

Once you’ve selected several reviews to feature on your site, you can install a review carousel widget on any page. Navigate to the page where you’d like the carousel to appear, then paste the following snippet in that page’s code:

<div id=“klaviyo-featured-reviews-carousel”></div>

Save your changes, then preview the page to confirm that the carousel displays the reviews you selected.

SEO / All reviews widget (optional)

The SEO / All reviews widget displays all published reviews across every product. Add this to a standalone Reviews page, or to your About page. Paste the following snippet where you want the widget to appear in that page’s code.

<div id=“klaviyo-reviews-all” data-id=“all”></div>

Save your changes, then preview the page to confirm that the widget displays your published reviews.

Outcome

If you edited a duplicate Shopify theme, publish it after confirming the widgets appear as expected in your preview. For a headless storefront, deploy your changes after previewing them. Your reviews will appear on product pages and any other pages where you installed the widgets.

Additional resources

• How to create custom review questions

Learn how to add questions for your customers to answer when they review your products. The answers can help contextualize their review and provide valuable data on your products. If your customers answer custom review questions, future site browsers can filter reviews based on their responses. - Klaviyo Reviews data reference

Learn about the additional data available in Klaviyo when you start using reviews. This data falls into two broad categories: delivery metrics (Shopify only) and reviews metrics (available for WooCommerce and Shopify).

Was this article helpful?

YesNo

Use this form only for article feedback. Learn how to contact support.

Explore more from Klaviyo

Community

Connect with peers, partners, and Klaviyo experts to find inspiration, share insights, and get answers to all of your questions.

Visit Community

Partners

Hire a Klaviyo-certified expert to help you with a specific task, or for ongoing marketing management.

Hire a partner

Support

Access support through your account.

Email support (free trial and paid accounts) Available 24/7

Chat/virtual assistance Availability varies by location and plan type

Log in