Shopify: Installing Yotpo Reviews on a Vintage Theme

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.

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

To install Yotpo automatically on your store:

1. From the Yotpo Installation Wizard, customize your automatic review request and 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.

Installing Yotpo manually

Watch the video to see how to install Yotpo manually:

Step-by-step guide

When reaching the Yotpo Installation Wizard, go through the two initial steps of customizing your automatic review request and The Reviews Widget.

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

1. Add Yotpo's JavaScript (required)

1. Go to your Shopify Themes menu.
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

   <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
6. Click Save.

2. Install the Reviews Widget (required)

1. Go to your Shopify Themes menu.
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

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

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:

<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

7. Click Save.

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

1. Go to your Shopify Themes menu.
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

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

For a more comprehensive article on installing the Star Rating on Product Pages, click here

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

1. Go to your Shopify Themes menu.
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):

<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 

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.