Skip to main content

Shopify (Manual)

  • Updated

If you use Shopify or Shopify Plus as your eCommerce platform, this article will guide you through the Manual Installation of the PowerReviews JavaScript code. We also offer a Professional Services integration where we integrate the JavaScript code to your Shopify store for you. To learn more about Shopify Professional Services, click here.

This article contains the following sections:

 

Product Data

For the PowerReviews code to work effectively, you need to ensure that the appropriate and correct product information is provided. As you add products via the Products navigation menu, ensure you add the following required fields at minimum:

  • Key - this Shopify field is required and should state PR Field
  • Title - the name of your product
  • Description - a brief description of your product
  • Product Type - the category of your product (for example: Shoes)
  • Image - the publicly-hosted URL of the product image
  • Vendor - the brand of the product
  • Variants - any variants of your product (if you aren't using product variants, ignore this field)

Additionally, you must include the following fields if you participate in PowerReviews Syndication:

  • Barcode - the UPC of the product
  • SKU - the manufacturer ID of the product
  • Variant Barcodes - the UPCs of the variant of the product

 

Adding the PowerReviews Code Manually

To add the PowerReviews code to your themes in Shopify:

1. Click Online Store from the left-hand navigation
2. Click Actions > Edit code from the dropdown on the right-hand side of the screen

Shopify_Manual_-_Edit_Code.png

3. Select the appropriate .liquid file based on the code you want to add
4. Copy and paste the following linked code snippets in the appropriate places in each .liquid file:

5. Copy and paste the following optional linked code snippets in the appropriate places in each .liquid file:

    • Category Page Snippet Code - place this code in the sections/collection.liquid file (and also in the snippets-product-card-grid.liquid and snippets-product-card-list.liquid files, if they exist)
    • Search Page Snippet Code - place this code in the templates/product.liquid file (or equivalent file)

 

Product Page Review Snippet Code

You should place the Review Snippet div in the product template within the Layout folder. The Layout folder is most commonly located in sections/product.template.liquid.

We recommend that the Review Snippet appears below the product title, though you can move it around to find the best PDP placement. You can search for the element in the code:

<h1 class="product-single title">{{ product.title }} </h1>
<!-- start_production_section_review_snippet_seciton -->

	<div id="pwr-snippets">
		<div id="pr-reviewsnippet" style=""></div>
	</div>
<!-- end_product_section_review_snippet_section -->


If you have an older theme and can't locate the product.template.liquid file, use the product.liquid file instead. If you're using the theme Clean, install the Review Snippet code in snippet/product-list-repeatable-item.liquid file, after the following line:

<p class="title"><a href="{{ producturl }}">{{product-list-repeatable-item.title }}</a></p>


To have this component render, you must also add the component to the function from the Product Page Review Display Code section. Specifically, the line ReviewSnippet: "pr-reviewsnippet" needs to be added to the listed components so it appears as below:

components: {
     ReviewDisplay: "pr-reviewdisplay",
     ReviewSnippet: "pr-reviewsnippet"
}

 

Product Page Review Display Code

You should place the Review Display code in the product file within the Templates folder. This file is most commonly located in templates/product.liquid, or whatever the equivalent file is in your theme (such as product-template.liquid).

Place the following code at the bottom of your file and below all other code. Update the API Key, Locale, Merchant Group ID, and Merchant ID variables with your unique account information provided by PowerReviews.

You can include product variants in your code, but this is optional. If you don't want or need to include product variants for your installation, remove the variants section from the code. For more information about variants, see Page IDs and Page ID Variants. 

<!-- start_review_render_code_widget_section -->
<script src="https://ui.powerreviews.com/stable/4.1/ui.js" async></script>
<div id="pr-reviewdisplay" style=""></div>
<!-- end_review_render_code_widget_section -->  

<!-- start_review_render_code_js_section -->

<script>
  window.pwr = window.pwr || function () {
    (pwr.q = pwr.q || []).push(arguments); 
  };
  pwr("render", {
	api_key: "<API KEY>",
	locale: "<LOCALE>",
	merchant_group_id: "<GROUP ID>",
	merchant_id: "<MERCHANT ID>",
	page_id: "{{ product.id }}",
	review_wrapper_url: "https://<STORE>.myshopify.com/pages/write-a-review/?pr_page_id={{ product.id }}",
	product: {
		name: "{{ product.title | replace: "+", " " }}",
		url: "https://<STORE>.myshopify.com{{ product.url }}",
		image_url: "https:{{ product.featured_image | product_img_url: "large" }}",
		description: "{{ product.description | strip_html | strip_newlines | replace: "%0A", "%20" | replace: '"', '%27' | escape }}",
		category_name: {% if product.type != '' %}"{{ product.type }}"{% else %} "Default" {% endif %},
		upc: "{{ product.barcode }}",
		brand_name: "{{ product.vendor }}",
		price: "{{ product.price | money_without_currency }}",
		in_stock: "{{ product.available }}",
               variants: [ {% for variant in product.variants %}
               {% assign product_name = product.title %}
               {% if product.variants.size > 1 %}{% assign product_name = variant.title %}{% endif %}
		{
		   name: "{{ product_name | replace: "+", " " }}",
		   description: "{{ product_name | escape }}",
		   page_id_variant: "{{variant.id}}",
		   upc: "{{ variant.barcode }}"
		}{% if forloop.last == false %}, {% endif %} {% endfor %}
	]},
       components: {
	  ReviewDisplay: "pr-reviewdisplay"
       }	
  });
</script> 
<!-- end_review_render_code_js_section -->

 

Write-a-Review Page

You'll need to create a Write-a-Review (WAR) form wrapper page in Shopify to house the WAR form code that allows customers to leave and submit a review.

1. Click Online Store from the left-hand navigation
2. Click Pages > Add page
3. Name the page Write-a-Review and place the following code on the page:

<script src="https://ui.powerreviews.com/stable/4.1/ui.js" async></script>
<div id="pr-write"></div>
<script>
  window.pwr = window.pwr || function () {
    (pwr.q = pwr.q || []).push(arguments); 
  };
   pwr("render", {
    api_key: '<API KEY>',
    locale: '<LOCALE>',
    merchant_group_id: '<GROUP ID>',
    merchant_id: '<MERCHANT ID>',
    on_submit:function(config, data){
         window.scrollTo(0,0); 
     },
    components: {
      Write: 'pr-write'
    }
  });
</script>

 

Checkout Beacon Code (Recommended Method)

The Checkout Beacon captures your online orders and sends them to PowerReviews for analytics and Follow-Up Email purposes. You will add the Checkout Beacon code with the Customer event/Pixel feature. 

1. Go to Settings >  Customer events in Shopify

2. Click Add custom pixel button. Enter a name, such as PowerReviews Checkout Beacon, in the dialog box, and click Add pixel button.

3. Under Customer privacy, set Permission to Not Required and Data sale to Data collected does not qualify as data sale
Screenshot of correct selections

4. Copy and paste the code below into the Code section on Shopify. Be sure to update the Merchant Group ID and Merchant ID.

analytics.subscribe('checkout_completed', (event) => {
  const pwrScript = document.createElement('script');
  pwrScript.src = 'https://static.powerreviews.com/t/v1/tracker.js';
  document.body.appendChild(pwrScript);
  let count = 0;
  const prCheck = function () {
    count += 1;
    if (typeof POWERREVIEWS != 'undefined') {
      clearInterval(prIntervalSet);
      const prBeacon = POWERREVIEWS.tracker.createTracker({ merchantGroupId: '<GROUP ID>'});

      const checkout = event.data.checkout;
      const lineItems = checkout.lineItems;
      const products = [];

      lineItems.forEach(item => {
        if (item.variant.price.amount > 0) {
          products.push({
            page_id: item.variant.product.id,
            product_name: item.title,
            quantity: item.quantity,
            unit_price: item.variant.price.amount,
            page_id_variant: item.variant.id
          })
        }
      });

      var orderFeed = {
        merchantGroupId: '<GROUP ID>',
        merchantId: '<MERCHANT ID>',
        locale: '<LOCALE>',
        merchantUserId: checkout.order.customer.id,
        marketingOptIn: true,
        userEmail: checkout.email,
        userFirstName: checkout.billingAddress.firstName,
        userLastName: checkout.billingAddress.lastName,
        orderId: checkout.order.id.length > 0 ? checkout.order.id : event.id,
        orderItems: products
      }

      prBeacon.trackCheckout(orderFeed);

    } else if (count > 10) {
      clearInterval(prIntervalSet);
    }
  }
  let prIntervalSet = setInterval(prCheck, 50);
})

4. Click Save at the bottom of the page

5. Click Connect at the top of the page

 

Checkout Beacon Code (Legacy Method)

Historically, PowerReviews has recommended adding the Checkout Beacon Code to the Additional Scripts section of the Order Status page. Since Shopify is phasing out this method, we recommend using their Customer events feature as described above. This method should only be used if Customer events aren't available in your store.

For more information, see Add Additional Scripts on Shopify's documentation site.

In order for the Checkout Beacon to only fire when an order is placed, and not when an order status is checked later, this code should be placed within the appropriate tag to ensure it only runs once. You can find more information on this in Shopify's script documentation.

1. Add the following code to the Additional Scripts section of the Order Status page

<!-- Start PowerReviews Conversion Beacon Code -->

<script type= "text/javascript" src= "//static.powerreviews.com/t/v1/tracker.js"></script>

// Conversion scripts you want to run only once
{%if first_time_accessed  %}
<script type= "text/javascript" >
(function() {try {
  var tracker = POWERREVIEWS.tracker.createTracker({merchantGroupId: "<GROUP ID>"});
  var orderFeed = {
    merchantGroupId: "<GROUP ID>",
    merchantId: "<MERCHANT ID>",
    locale: "<LOCALE>",
    merchantUserId: "{{ customer.id }}",
    marketingOptIn: true,
    userEmail: "{{ customer.email | url_param_escape }}",
    userFirstName: "{{ customer.first_name }}",
    userLastName: "{{ customer.last_name }}",
    orderId: "{{ order.order_number }}",
    orderItems: [
	{% for line_item in line_items %}
	  {
	    page_id: "{{line_item.product.id}}",
            page_id_variant: "{{line_item.variant.id}}",
            product_name: "{{line_item.title | url_param_escape}}:",
            quantity: {{ line_item.quantity }},
	    unit_price: {{ line_item.price | money_without_currency }}
          }
          {% if forloop.last == true %}
          {% else %}
            ,
          {% endif %}
	{% endfor %}
    ]
  }
  tracker.trackCheckout(orderFeed);

}catch(e){window.console && window.console.log(e)}}());
{% endif %}
</script>
<!-- End PowerReviews Conversion Beacon Code -->

 

Advanced Code Installation

You can place code snippets on your Search or Category pages within the files of your theme, to show Review Snippets for your products on more areas of your website. The Category, Search, Collection, and Grid templates can vary widely across Shopify templates, so installation of this code is more advanced. The following instructions are for the most common configurations of Category and Search pages only.

Your Implementation Team and PowerReviews Technical Support will not be able to troubleshoot your unique storefront and any custom template configurations you may have, so please plan to leverage your own developer resources for any advanced code installations. 

 

Category Page Snippet Code

We recommend placing two pieces of code on your Collection pages to support Review Snippets. Add the first piece of code after the product-card-grid reference within the sections/collection.liquid file:

<!-- start_pwr_category_snippet -->
  <div class="pwr-category-snippets" style="">
    <div id="snippet-{{ product.id }}"></div>
  </div>
<!-- end_pwr_category_snippet -->


Place the second piece of code after the last line of code within the sections/collection.liquid file. Update the API Key, Locale, Merchant Group ID, and Merchant ID variables with your unique account information provided by PowerReviews.

<!-- start_collection_js_code -->
<script src="https://ui.powerreviews.com/stable/4.1/ui.js" async></script> 
<script>
  window.pwr = window.pwr || function () {
    (pwr.q = pwr.q || []).push(arguments); 
  };
  pwr('render', [
    {% for product in collection.products limit: product_limit %}
      {
        api_key: '<API KEY>',
        locale: '<LOCALE>',
        merchant_group_id: '<GROUP ID>',
        merchant_id: '<MERCHANT ID>',
        page_id: '{{ product.id }}',
        components: {
          CategorySnippet: 'snippet-{{ product.id }}'
        }
      } {% if forloop.last == false %}, {% endif %}
    {% endfor %}
  ]);
</script>
<!-- end_collection_js_code -->

 

Product Card Grid

We recommend placing the following code below all other file code within the snippets/product-card-list.liquid file, if it exists. This code ensures Review Snippets appear on a product card grid display:

<!-- start_pwr_category_snippet -->
  <div class="pwr-category-snippets" style="">
    <div id="snippet-{{ product.id }}"></div>
  </div>
<!-- end_pwr_category_snippet -->

 

Product Card List

We recommend placing the following code after the <div class="list-view-item_title">{{product.title}} reference within the snippets/product-card-list.liquid file, if it exists. This code ensures Review Snippets appear on a product card list display:

<!-- start_pwr_category_snippet -->
<div class="pwr-category-snippets" style="">
  <div id="snippet-{{ product.id }}"></div>
</div>
<!-- end_pwr_category_snippet -->

 

Search Page Snippet Code

We recommend placing the following code after the 'endpaginate' reference at the end of the templates/search.liquid file. Update the API Key, Locale, Merchant Group ID, and Merchant ID variables with your unique account information provided by PowerReviews.

<!-- start_search_collection_js_code -->
  <script src="https://ui.powerreviews.com/stable/4.1/ui.js" async></script>
  <script>
    window.pwr = window.pwr || function () {
      (pwr.q = pwr.q || []).push(arguments); 
    };
    pwr('render', [
      {% for product in search.results %}
      {
        api_key: '<API KEY>',
        locale: '<LOCALE>',
        merchant_group_id: '<GROUP ID>',
        merchant_id: '<MERCHANT ID>',
        page_id: '{{ product.id }}',
        components: {
          CategorySnippet: 'snippet-{{ product.id }}'
        }
        } {% if forloop.last == false %}, {% endif %}
      {% endfor %}
    ]);
  </script>
<!-- end_search_collection_js_code -->

 

Product Page Recommended Products/Carousel Snippets

Inserting Review Snippets into the Recommended Products sections or carousels of your PDPs requires custom development by your team. Doing so requires one call to be made on the PDP for both the main PDP elements (Review Snippet and Review Display) as well as any Recommended Products.

PowerReviews clients have been able to achieve this by creating an array to push all items to, then calling that array in the pwr("render") function. Ask your Implementation Team for examples of this, if needed.

 

 

 

Was this article helpful?
0 out of 0 found this helpful
Return to top