Shopify (Manual)

[CommunityJedi22]

This guide will walk you through the process of integrating the PowerReviews platform into your Shopify store. By following these steps, you can add Reviews and other powerful social proof features to your site. We also offer a Professional Services integration where we integrate the JavaScript code into your Shopify store for you. To learn more about Shopify Professional Services, click here.

Before You Begin

Before you start, please have the following credentials from your PowerReviews Welcome Email on hand:

• API Key
• Locale
• Merchant Group ID
• Merchant ID

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

Step 1: Create the Core PowerReviews Snippet

This central snippet will contain all the necessary JavaScript and logic to power the PowerReviews components on your store.

1. From your Shopify Admin, go to Online Store > Themes.
2. On your current theme, click Actions > Edit code.

3. 

4. In the file explorer on the left, open the Snippets directory.
5. Right-click the Snippets directory and add a New File. Name it powerreviews.liquid.
6. Copy the code below and paste it into your new powerreviews.liquid file.
7. Important: Replace the placeholder values for api_key, locale, merchant_group_id, and merchant_id with your actual PowerReviews credentials.
8. Click Save.

<!-- PowerReviews Code Start -->
<script src="https://ui.powerreviews.com/stable/4.1/ui.js" async></script>
{{ 'powerreviews.css' | asset_url | stylesheet_tag }}
<script>
  window.pwr = window.pwr || function () {
    (pwr.q = pwr.q || []).push(arguments);
  };

  {%- assign powerreviews_domain = shop.url -%}

  function prRandomNumber() {
    return Math.round((Math.random() * 100000000));
  };

  const pwrCredentials = {
    api_key: '<API_KEY>',
    locale: '<LOCALE>',
    merchant_group_id: '<MERCHANT_GROUP_ID>',
    merchant_id: '<MERCHANT_ID>'
  }

  function loadPowerReviews() {
    let pwrElements = [];

    /* PDP Code Start */
    if (document.getElementById('pr-reviewdisplay') && !document.getElementById('pr-reviewdisplay').dataset.prMounted) {
      const pdpComponents = {
        ReviewSnippet: "pr-reviewsnippet",
        ReviewDisplay: "pr-reviewdisplay"
      }
      if (document.getElementById('pr-questiondisplay')) {
        pdpComponents.QuestionDisplay = "pr-questiondisplay";
      }
      pwrElements.push({
        ...pwrCredentials,
        page_id: '{{ product.id }}',
        review_wrapper_url: '{{ powerreviews_domain }}/pages/write-a-review?pr_page_id={{ product.id }}',

        /* Feedless Product Code Start */
        product: {
          name: {{ product.title | replace: '+', ' ' | strip | json }},
          url: {{ powerreviews_domain | append: product.url | json }},
          {%- if product.featured_image -%}
          image_url: {{ product.featured_image | image_url: width: 600 | prepend: "https:" | json }},
          {%- else -%}
          image_url: "",
          {%- endif -%}
          description: {{ product.description | strip_html | strip_newlines | default: " " | json }},
          category_name: {{ product.type | default: "Default" | json }},
          brand_name: {{ product.vendor | json }},
          price: {{ product.price | money_without_currency | json }},
          variants: [
            {%- for variant in product.variants -%}
            {
              page_id_variant: "{{ variant.id }}",
              {%- if variant.title != blank and variant.title != 'Default Title' -%}
              name: {{ product.title | append: " - " | append: variant.title | json }},
              {%- else -%}
              name: {{ product.title | json }},
              {%- endif -%}
              {%- if variant.image -%}
              image_url: {{ variant.image | image_url: width: 600 | prepend: "https:" | json }},
              {%- elsif product.featured_image -%}
              image_url: {{ product.featured_image | image_url: width: 600 | prepend: "https:" | json }},
              {%- else -%}
              image_url: "",
              {%- endif -%}
              price: {{ variant.price | default: product.price | money_without_currency | json }},
              upc: {{ variant.barcode | remove: ' ' | remove: '-' | json }}
            }{%- if forloop.last == false -%},{%- endif -%}
            {%- endfor -%}
          ]
        },
        /* Feedless Product Code End */
        components: pdpComponents
      });
    };
    /* PDP Code End */

    /* PLP Code Start */
    document.querySelectorAll('[data-pr-component="CategorySnippet"]').forEach(el => {
      if (!el.dataset.prMounted) {
        el.id = 'snippet-' + prRandomNumber();
        pwrElements.push({
          ...pwrCredentials,
          page_id: el.dataset.prPageId,
          ENABLE_CLIENT_SIDE_STRUCTURED_DATA: false,
          components: {
            CategorySnippet: el.id
          }
        })
      }
    });
    /* PLP Code End */

    /* WAR Form Code Start */
    if (document.getElementById('pr-write') && !document.getElementById('pr-write').dataset.prMounted) {
      pwrElements.push({
        ...pwrCredentials,
        page_id: '{{ product.id }}',
        on_submit: function (config, data) {
          window.scrollTo(0, 0);
        },
        components: {
          Write: 'pr-write'
        }
      })
    }
    /* WAR Form Code End */

    if (pwrElements.length > 0) {
      pwr("render", pwrElements);
    }
  }

  loadPowerReviews();
</script>
<!-- PowerReviews Code End -->

Step 2: Add PowerReviews to Your Theme

Now, you'll include the snippet you just created in your main theme file so it loads on every page.

1. In the Layout directory of your theme code, open the theme. Liquid file.
2. Scroll to the very bottom of the file.
3. Just before the closing </body> tag, paste the following line:
   {%- render 'powerreviews' -%}
4. Click Save.

Step 3: Implement Product Detail Page (PDP) Components

You will now create the section and snippet needed to display reviews on your product pages.

A. Create the Review Display Section

This section will house the main review content, including the review list, histogram, and sorting/filtering options.

1. Under the Sections directory, right-click the directory name and add a New File.
2. Name it powerreviews-pdp-review-display. Liquid.
3. Paste the following code into the file and save.

<!-- PowerReviews Code Start -->
<div id="pr-reviewdisplay"></div>
<!-- PowerReviews Code End -->

{% schema %}
{
  "name": "PowerReviews: Reviews",
  "tag": "section",
  "settings": []
}
{% endschema %}

B. Create the PDP Review Snippet

This snippet displays the star rating and review count, typically near the product title.

1. Under the Snippets directory, right-click the directory name and add a New File.
2. Name it powerreviews-pdp-snippet. Liquid.
3. Paste the following code into the file and save.

<!-- PowerReviews Code Start -->
<div id="pr-reviewsnippet"></div>
<!-- PowerReviews Code End -->

C. Create the Q&A Display Section

1. Click Add a new section

2. Name the file:

   powerreviews-pdp-question-display

D. Place the PDP Components in Your Theme

1. For Shopify OS 2.0 Themes (Most common):
   • Open Templates/main-product.json
   • Find the bottom of "sections" and add:

<!-- PowerReviews Code Start --> 
<div id="pr-questiondisplay"></div> 
<!-- PowerReviews Code End -->  

{% schema %} 
{ 
"name": "PowerReviews: Q&A", 
"tag": "section", 
"settings": [ 
] 
} 
{% endschema %} 

• Add "powerreviews-pdp-review-display" and "powerreviews-pdp-question-display" at the bottom of the "order" section*
• Navigate to Sections and open main-product. Liquid.
• Find the product title, which often looks like <h1 class="product__title">.
• Directly below the line with the product title, add the following code to render the star snippet:

{%- render 'powerreviews-pdp-snippet' -%}

• Go to your Shopify Admin > Online Store > Themes and click Customize.
• Navigate to a product page. On the left panel, click Add section and add your PowerReviews: Reviews section. Drag it to your desired location on the page.

2. For Older (OS 1.0) Themes:
   • Navigate to Templates and open the product. liquid.
   • Find the product title (e.g., <h1>{{ product.title }}</h1>) and paste directly below it.

{%- section 'powerreviews-pdp-review-display' -%}

• At the bottom of the file, add the following line to render the display section:

{%- section 'powerreviews-pdp-review-display' -%}

3. Click Save.

Step 4: Implement Product Listing Page (PLP) Snippets

This will add star ratings to your products on collection and search results pages.

1. Under the Snippets directory, right-click the directory name and add a New File.
2. Name it powerreviews-plp-snippet. Liquid.
3. Paste the following code into the file and save.

<!-- PowerReviews Code Start -->
<div data-pr-component="CategorySnippet" data-pr-page-id="{{ product.id }}"></div>
<!-- PowerReviews Code End -->

4. Now, you need to find your product grid/card snippet/product card. This file's name varies by theme but is often called product-card. Liquid, product-grid-item. Liquid, or similar.
5. Open this file and locate where the product title or price is displayed. Paste the following line in a suitable location (e.g., below the title):

{%- render 'powerreviews-plp-snippet', product: product -%}

Note: Depending on the file, you may need to adjust product: product to match the variable used for the product in that context (e.g., product: item or product: card_product).

6. Click Save.

Step 5: Create the Write-a-Review Page

This page will host the form your customers use to submit reviews.

1. From your Shopify Admin, go to Online Store > Pages.
2. Click Add page.
3. For the Title, enter Write-a-Review.
4. In the content editor, click the Show HTML (<>) button.
5. Paste the following code into the editor:

<!-- PowerReviews Code Start -->
<div id="pr-write"></div>
<!-- PowerReviews Code End -->

6. Click Save.

Step 6: Install the Checkout Beacon

The Checkout Beacon is essential for collecting order data, which powers your Follow-Up Email campaigns to solicit reviews from customers post-purchase.

1. From your Shopify Admin, go to Settings > Customer events.
2. Click Add custom pixel. Name it PowerReviews Checkout Beacon and click Add pixel.
3. Paste the following code into the Code box.
4. Important: Remember to replace the placeholder values for <MERCHANT_GROUP_ID>, <MERCHANT_ID>, and <LOCALE> with your credentials.
5. Click Save, and then click Connect.

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: '<MERCHANT_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
          });
        }
      });

      const orderFeed = {
        merchantGroupId: '<MERCHANT_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,
        orderItems: products
      };

      prBeacon.trackCheckout(orderFeed);

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

Your PowerReviews implementation is now complete! Please review your product pages, collection pages, and test the checkout process to ensure everything is displaying and functioning correctly.

Optional Steps: Additional Functionality

We do support some additional functionality through the use of Callback functions, two of which are included below, but more can be found in our JavaScript Reference Guide. 

Scroll to reviews in the tab

This will scroll a user down to the review display and open the tab that the display is nested into. 

on_read_reviews_click: function() {
	if (document.getElementById("//---- <tab id> ----//")) {
		document.getElementById("//---- <tab id> ----//").click();
		(document.getElementById("//---- <tab id> ----//").scrollIntoView({
			block: "start",
			behavior: "smooth"
		});
	}
},

Make stars clickable

This will make the stars clickable and scroll the user down to the review display.

on_render: function (data,config) {
  if(config.component === 'ReviewSnippet') {
	let reviewSnippet = document.querySelector('.pr-snippet-review-count'),
	    scrollToReviews = function() {
		document.getElementById('pr-reviewdisplay').scrollIntoView({block: 'start', behavior: 'smooth'})
	};
	reviewSnippet.addEventListener('click', scrollToReviews);
}
},