Shopify: Installing Yotpo Reviews on a Vintage Theme

      Shopify: Installing Yotpo Reviews on a Vintage Theme


        Article summary

        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:

        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:

        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 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 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.
        Want to add the Star Rating to your shop?
        If you want to add 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 guide or the Installing the Star Rating on Category Pages guide further down this page.

        Installing Yotpo manually

        Watch the video to see how to install Yotpo manually:

        Please note:
        Changing your 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 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 and The Reviews Widget.

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

        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 to contact our support team to help you find the way.

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

        5. 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 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:
        <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>
        5. Click Save.

        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.


        Was this article helpful?