---
title: "Shopify: Installing Yotpo Reviews on a Vintage Theme"
slug: "shopify-installing-yotpo-reviews-on-a-vintage-theme"
updated: 2024-07-21T05:58:11Z
published: 2024-07-21T05:58:11Z
canonical: "support.yotpo.com/shopify-installing-yotpo-reviews-on-a-vintage-theme"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.yotpo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify: Installing Yotpo Reviews on a Vintage Theme

Products

  
Reviews

###### Supported plans

Free, Starter, Pro, Premium, Enterprise

###### eCommerce Platform

Shopify, Shopify Plus

Yotpo Reviews is a plug-and-play Shopify app. This means you can add Yotpo Reviews to your Shopify store with just one click, and start collecting reviews immediately. With Yotpo's Shopify integration, you can easily import your existing reviews from other platforms over to Yotpo, and use your customer content to increase conversion rate, establish trust, and drive more traffic from social.

In this article, you'll learn how to install Yotpo Reviews on a Shopify store using a vintage theme.

**Available for:**

- Merchants using Yotpo Reviews with a Shopify vintage theme
- If you’re using Shopify Online Store 2.0, refer to our [Shopify Online Store 2.0 guide](/v1/docs/shopify-installing-yotpo-reviews-on-online-store-20). If you’re not sure which theme version you’re using, refer to the [instructions in Shopify](https://help.shopify.com/en/manual/online-store/themes/versions).

## Getting started

Before you install Yotpo on your store, first add the Yotpo app to your Shopify account:

1. From Shopify, go to **Apps** > **Visit Shopify App Store**.
2. Search and select [**Yotpo Product Reviews & UGC**](https://apps.shopify.com/yotpo-social-reviews).
3. Click **Add App**.
4. Click **Install app**.
5. Create a password for your Yotpo account.

## Installing Yotpo automatically

We highly recommend automatically installing Yotpo to easily implement everything you need for the app to run smoothly. You'll install the following:

- Yotpo's JavaScript
- [The Reviews Widget](/v1/docs/adding-the-reviews-widget)

**Heads up!**Some shop themes are **more complex** than others and may require manual installation. If you already have Yotpo automatically installed, you can easily **remove and re-install the Yotpo app** on your [Shopify](https://www.yotpo.com/integrations/shopify/) account and choose the manual installation path. **All your reviews and modifications made to your account will be saved** and you can start just where you left off.

To install Yotpo automatically on your store:

1. From the Yotpo Installation Wizard, customize your [**automatic review request**](/v1/docs/creating-a-review-request-premium-enterprise) and [**Reviews Widget**](/v1/docs/adding-the-reviews-widget).
2. When you reach the last step of the Installation Wizard, under **Automatic Installation**, select **Install Now.**
3. Click **Install Automatically.**
4. Wait for the installation process to complete and then click **Continue to admin.**

**Want to add the Star Rating to your shop?**If you want to add the [**Star Rating**](/v1/docs/adding-the-star-rating) feature to your product pages and/or your category pages, you can easily do so by following the [Installing the Star Rating on Product Pages](/v1/docs/shopify-installing-the-yotpo-star-rating-on-product-pages) guide or the [Installing the Star Rating on Category Pages](/v1/docs/shopify-installing-the-yotpo-star-rating-on-categorycollection-pages) guide further down this page.

## Installing Yotpo manually

Watch the video to see how to install Yotpo manually:

[Embedded content](https://yotpo-1.wistia.com/embed/iframe/95vehe21vf)

**Please note:**Changing your [Shopify](https://www.yotpo.com/integrations/shopify/) theme will cause all of **Yotpo's features** (and maybe some other apps as well) to **disappear**, and will require to be [manually re-installed](/v1/docs/shopify-installing-yotpo-reviews-on-online-store-2-0) on your new theme files.

#### Step-by-step guide

When reaching the Yotpo Installation Wizard, go through the two initial steps of customizing your [automatic review request](/v1/docs/) and [**The Reviews Widget**](/v1/docs/).

When reaching the last step on the Installation Wizard, click on **See Instructions** under **Manual Installation**:

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/6e3f89ec-896c-48e2-9e87-9d971c50f23c.png?sv=2026-02-06&spr=https&st=2026-10-31T18%3A17%3A23Z&se=2026-10-31T19%3A17%3A23Z&sr=c&sp=r&sig=Li%2FhlF6ShYDaM8TJ1TEFDIU1qzF7jJncPlwn1vVb7hk%3D)

**Please note:**

The following guide contains the most frequently used files for implementing Yotpo's features. Don't worry if you can't find them or if using them doesn't work. You can either explore the files on your own until you find the right spot, or you can use the [online support form](https://yap.yotpo.com/#/?modal=contact_support) to contact our support team to help you find the way.

### 1. Add Yotpo's JavaScript (required)

1. Go to your [Shopify Themes menu](https://www.shopify.com/admin/themes).
2. Click **Actions** > **Edit Code**.
3. Locate the file that you use for your layout. This is usually called **theme.liquid** or **theme-template.liquid**.
4. Copy and paste the following code right above the </head> section:JavaScriptJavaScript 

```javascript
<script type="text/javascript">
(function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/###APP_KEY###/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
</script>
```
5. Replace the ###APP_KEY### portion of the text in the code above with your store's Yotpo app key. To learn how to find your app key, see [Finding your Yotpo App Key and Secret Key](/v1/docs/finding-your-yotpo-app-key-and-secret-key)
6. Click **Save**.

### 2. Install the Reviews Widget (required)

1. Go to your [Shopify Themes menu](https://www.shopify.com/admin/themes).
2. Click **Actions** > **Edit Code**.
3. Locate the file that manages your basic product page content and settings. This is usually called **product.liquid** or **main-product.liquid**.
4. Paste the following code into the file.
  1. If you're using Shopify Online Store 2.0, paste the code above the { % schema % } section
  2. If you're using an older theme, paste the code under the last line of code

```javascript
<div class="yotpo yotpo-main-widget"
data-product-id="{{ product.id }}"
data-name="{{ product.title | escape }}"
data-url="{{ shop.url }}{{ product.url }}"
data-image-url="{{ product.featured_image | product_img_url: 'large' |replace: '?', '%3F' | replace: '&','%26'}}"
data-price="{{ variant.price | money_without_currency }}"
data-currency="{{ shop.currency }}"
data-description="{{ product.description | escape }}">
</div>
```

Mark5. Click **Save**.

Please note:Changes made to on-site widgets (Reviews Widget, Reviews Tab, etc.) may not be immediately reflected on your live site. [Click here](/v1/docs/adding-the-reviews-widget#widget-performance) to learn more

### 3. Install the conversion tracking code (required)

1. Go to your Shopify Settings.
2. Click **Checkout**.
3. Click **Order Processing**.
4. Click **Additional Scripts**:'
5. Paste the following code in the box:

```javascript
<script type="text/javascript">(function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/##APP_KEY##/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
<script>yotpoTrackConversionData = {source:"pixel_v2", platform:"shopify", orderId:"{{order_id}}", orderNumber:"{{order_number}}", orderName:"{{order_name|handleize}}", orderAmount:"{{subtotal_price|money_without_currency}}", orderCurrency:"{{shop.currency}}"}</script>

<noscript><img src="//api.yotpo.com/conversion_tracking.gif?app_key=##APP_KEY##&source=pixel_v2&platform=shopify&noscript=1&order_id={{order_id}}&order_number={{order_number}}&order_name={{order_name|handleize}}&order_amount={{subtotal_price|money_without_currency}}&order_currency={{shop.currency}}" width="1" height="1"/></noscript>
```

6. Replace both ##APP_KEY## portions of the text in the code above with your store's Yotpo app key. Please note that there are two ##APP_KEY## portions in this code. To learn how to find your app key, see [Finding your Yotpo App Key and Secret Key](/v1/docs/finding-your-yotpo-app-key-and-secret-key)

7. Click **Save**.

### 4. Install the Star Rating on product pages (optional, yet highly recommended)

1. Go to your [Shopify Themes menu](https://www.shopify.com/admin/themes).
2. Click **Actions** > **Edit Code**.
3. Locate the file that you use for your product pages. This is usually called **product-template.liquid** or **main-product.liquid**.
4. Paste the following code into the file.
  - If you're using Shopify Online Store 2.0, paste the code under the  <div class="product__info-wrapper grid__item"> element
  - If you're using an older theme, paste the code under the {{ product.title }} element

```javascript
<div class="yotpo bottomLine"
data-product-id="{{ product.id }}">
</div>
```

5. Click **Save**.

For a more comprehensive article on installing the Star Rating on Product Pages, click [here](/v1/docs/)

### 5. Installing the Star Rating on category pages (optional, yet highly recommended)

1. Go to your [Shopify Themes menu](https://www.shopify.com/admin/themes).
2. Click **Actions** > **Edit Code**.
3. Locate the file that contains the code for the category pages on your site.
4. Paste the following code between the product title class and the price class (or wherever you'd like the star rating to appear):

```javascript
<div class="yotpo bottomLine"
    data-appkey="##APP_KEY##"
    data-domain="{{shop.permanent_domain | escape }}"
    data-product-id="{{ product.id }}"
    data-product-models="{{ product.id }}"
    data-name="{{ product.title | escape }}"
    data-url="{{ shop.url }}{{ product.url }}"
    data-image-url="{{ product.featured_image | product_img_url: 'large' |replace: '?', '%3F' | replace: '&','%26'}}"
    data-description="{{ product.description | escape }}"
    data-bread-crumbs="{% for tag in product.tags %}{{ tag | escape }};{% endfor %}">
</div>
```

5. Replace the ##APP_KEY## portion of the text in the code above with your store's Yotpo app key. To learn how to find your app key, see [Finding your Yotpo App Key and Secret Key](/v1/docs/finding-your-yotpo-app-key-and-secret-key)

6. Click **Save**.

## Keeping your Yotpo product catalog up-to-date

Our integration with Shopify enables you to keep your Yotpo product catalog up-to-date at all times. Learn more about pushing updates from your Shopify product catalog to your Yotpo product catalog in [Shopify: Automatic Product Catalog Update](/v1/docs/keeping-your-shopify-and-yotpo-product-catalogs-updated).