Connecting with Shopify's Product Reviews app

  • Last updated

Use this guide to integrate the Shopify Product Reviews app with Pixel Union's themes. Add the app, then follow the theme-specific guides below to complete the installation.

Customer_reviews_in_Superstore_theme.png

Looking for a more robust reviews app?

We recommend Junip

Upgrade to Junip

Start your 14-day free trial and 25% off the first two months

Which theme are you working with?

  • Empire

    Empire is integrated with the app by default. There are no code changes necessary. To activate the app in the theme, go to Customize > Theme settings > Products > Enable product reviews and ratings

    Empire's theme settings: Products

    Activate_in_Empire_s_theme_settings.png

  • Atlantic

    Step 1: Access the theme files

    Go to your Online Store and locate your Atlantic theme. Select Actions, then Edit code to open the theme files.

    Select_edit_code_to_access_the_theme_files.png

    Step 2: Add the product page review snippet

    Locate the Snippets folder to open the product.liquid file. At the very end of this file, add the following code:

    <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

    Save the file.

    Add_code_to_product_in_Atlantic_s_Snippets_.png

     

    Step 3: Add the review badge snippet

    Include an average review rating badge on the collection page and product page by adding the following code:

    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

    Collection page badge

    In the Snippets, open the product-item.liquid file. In this file, locate this line of code:

    {% capture product_card_details_overlay %}

    Below this code, add the code snippet, then Save.

    Adding_the_snippet_to_the_product_item_file.png

    Badge not appearing?

    Depending on the Colors setup, you may need to add an additional code to change the color of the badge to reveal it in the storefront. If this is the case, go to the Assets folder to access the theme.scss.liquid file. At the very bottom of this file, add this code:

    .spr-badge {color: #fff;font-size:16px;}

    Product page badge

    Back in the product.liquid file, locate the product title and price code blocks. Between these code blocks, add the code, then Save.

     Add_reviews_badge_to_product_page_file.png

  • Superstore

    Superstore is integrated with the app by default. There are no code changes necessary. To activate the app in the theme, go to Customize > Theme settings > Products > Enable product reviews and ratings

    Activating the Product Reviews app

    Activate_the_product_reviews_in_Superstore_s_theme_settings.png

  • Grid

    Step 1: Access the theme files

    Go to your Online Store and locate your Grid theme. Select Actions, then Edit code to open the theme files.

    Select_edit_code_to_access_the_theme_files.png

    Step 2: Add the product page review snippet

    Locate the Snippets folder to open the product.liquid file. At the very end of this file, add the following code:

    <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

    Save the file.

    Add_reviews_code_to_product_liquid_in_snippets.png

    Step 3: Add the review badge snippet

    Include an average review rating badge on the collection page and product page by adding the following code:

    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

    Collection page badge

    In the Snippets, open the product-list-item.liquid file. In this file, locate the product title and price codes. Between these blocks, add the code snippet, then Save.

    Add_code_to_product_list_item_file_for_badge.png

    Product page badge

    Back in the product.liquid file, locate the product title and price code blocks. Between these code blocks, add the code, then Save.

    Add_badge_code_to_product_liquid_file.png

    Badge not appearing?

    Depending on the Colors setup, you may need to add an additional code to change the color of the badge to reveal it in the storefront. If this is the case, go to the Assets folder to access the theme.scss.liquid file. At the very bottom of this file, add this code:

    .spr-summary{
     font-size: 16px
    }
    .spr-form-label+.spr-form-input{
     font-size: 16px;
    }
    .spr-form-message-success{
     font-size: 16px;
    }

  • Pacific

    Step 1: Access the theme files

    Go to your Online Store and locate your Pacific theme. Select Actions, then Edit code to open the theme files.

    Select_edit_code_to_access_the_theme_files.png

    Step 2: Add the product page review snippet

    Locate the Snippets folder to open the product-description.liquid file. At the very end of this file, add the following code:

    <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

    Save the file.

    Step 3: Add the review badge snippet

    Include an average review rating badge on the collection page and product page by adding the following code:

    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

    Collection page badge

    In the Snippets, open the product-list-item.liquid file. In this file, locate the product title and price codes. Between these blocks, add the code snippet, then Save.

    Add_the_code_to_the_product_list_item_file_for_badge.png

    Product page badge

    Open the page-header.liquid in the Snippets folder to look for this block of code:

    {% if template contains 'product' %}
     <div class="product-details">
     <h1 class="page-title" itemprop="name">{{ product.title }}</h1>
     <a class="product-vendor vendor" href="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</a>
     </div>

    Place the code between the page title and vendor link.

    Add_badge_code_to_the_page_header_file.png

  • Startup

    Step 1: Access the theme files

    Go to your Online Store and locate your Startup theme. Select Actions, then Edit code to open the theme files.

    Select_edit_code_to_access_the_theme_files.png

    Step 2: Add the product page review snippet

    Locate the Snippets folder to open the product-additional-information.liquid file. At the very end of this file, add the following code:

    <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

    Save the file.

    Add_code_for_product_page_in_startup.png

    Step 3: Add the review badge snippet

    Include an average review rating badge on the collection page and product page by adding the following code:

    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

    Collection page badge

    In the Snippets, open the product-list-item.liquid file. In this file, locate the product vendor and title codes. Between these blocks, add the code snippet, then Save.

    Add_code_to_product_list_item_file_in_startup_for_badge.png

    Product page badge

    Open the product-details.liquid file to locate the product title and vendor code blocks. Between these code blocks, add the code, then Save.

    Add_badge_code_to_the_product_details_file_in_startup.png

  • Launch

    Step 1: Access the theme files

    Go to your Online Store and locate your Launch theme. Select Actions, then Edit code to open the theme files.

    Select_edit_code_to_access_the_theme_files.png

    Step 2: Add the product page review snippet

    Locate the Snippets folder to open the product-main.liquid file. Locate the product description code block.

    searching_for_description_block.png

    At the end of this code block with be an {% endif %} control tag. On the line below this add the following code:

    <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

    Save the file.

    Add_the_review_snippet_below_the_product_description_block.png

    Step 3: Add the review badge snippet

    Include an average review rating badge on the collection page and product page by adding the following code:

    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

    Collection page badge

    In the Snippets, open the product-list-item.liquid file. In this file, locate the product title and price codes. Between these blocks, add the code snippet, then Save.

    Add_product_review_badge_to_product_list_item_file_in_Launch.png

    Product page badge

    Back in the product-main.liquid file, locate the product title code block. Searching for the H1 tags, locate the closing H1 tag:

    </h1>

    Between the closing tag and the </div>  below it, add the code, then Save.

    Add_the_snippet_aftet_the_closing_header_tag.png

  • Handy

    Step 1: Access the theme files

    Go to your Online Store and locate your Handy theme. Select Actions, then Edit code to open the theme files.

    Select_edit_code_to_access_the_theme_files.png

    Step 2: Add the product page review snippet

    Locate the Sections folder to open the static-product.liquid file. At the very end of this file, add the following code:

    <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

    Save the file.

    Add_reviews_code_to_end_of_static_product_section_file.png

     

    Step 3: Add the review badge snippet

    Include an average review rating badge on the collection page and product page by adding the following code:

    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

    Collection page badge

    In the Snippets, open the product-item.liquid file. In this file, locate the product title and vendor codes. Between these blocks, add the code snippet, then Save.

    Add_review_badge_for_collection_page_in_handy.png

    Product page badge

    Back in the product.liquid file, locate the product vendor and title code blocks. Between these code blocks, add the code, then Save.

    Add_badge_code_for_product_page_header.png

  • Vogue

    Step 1: Access the theme files

    Go to your Online Store and locate your Vogue theme. Select Actions, then Edit code to open the theme files.

    Select_edit_code_to_access_the_theme_files.png

    Step 2: Add the product page review snippet

    Locate the Snippets folder to open the product.liquid file. At the very end of this file, add the following code:

    <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

    Save the file.

    Add_code_for_product_page_in_Vogue.png

    Using the single product view?

    Add this code to the product-details.liquid in Snippets instead

    Step 3: Add the review badge snippet

    Include an average review rating badge on the collection page and product page by adding the following code:

    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

    Collection page badge

    In the Snippets, open the product-item.liquid file. In this file, look for this block of code:

    <div class="product-list-item-details {% if item.price %}has-price{% endif %}">
    <h1 class="product-list-item-title">

    Between these two lines, include the provided code, then Save.

    Add_the_code_for_collection_pages_in_vogue.png

    Product page badge

    Open the product-details.liquid file to locate the product vendor and title code blocks. Between these code blocks, add the code, then Save.

    Add_badge_code_to_product_details_file.png

  • Reach

    Step 1: Access the theme files

    Go to your Online Store and locate your Reach theme. Select Actions, then Edit code to open the theme files.

    Select_edit_code_to_access_the_theme_files.png

    Step 2: Add the product page review snippet

    Locate the Snippets folder to open the product.liquid file. At the very end of this file, add the following code:

    <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

    Save the file.

    Add_reviews_code_to_end_of_product_snippet_file.png

    Step 3: Add the review badge snippet

    Include an average review rating badge on the collection page and product page by adding the following code:

    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

    Collection page badge

    In the Snippets, open the product-item.liquid file. In this file, locate the product title and price codes. Between these blocks, add the code snippet, then Save.

    Add_badge_code_to_product_item_snippet_file.png

    Product page badge

    Back in the product.liquid file, locate the product title and vendor code blocks. Between these code blocks, add the code, then Save.

    Add_reviews_badge_to_product_liquid_file_in_Reach.png

  • Editions

    Step 1: Access the theme files

    Go to your Online Store and locate your Editions theme. Select Actions, then Edit code to open the theme files.

    Select_edit_code_to_access_the_theme_files.png

    Step 2: Add the product page review snippet

    Locate the Snippets folder to open the product.liquid file. At the very end of this file, add the following code:

    <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

    Save the file.

    Add_code_to_editions_product_snippet.png

    Step 3: Add the review badge snippet

    Include an average review rating badge on the collection page and product page by adding the following code:

    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

    Collection page badge

    In the Snippets, open the small-product-item.liquid file. In this file, locate the product title and price codes. Between these blocks, add the code snippet, then Save.

    Add_collection_page_snippet_for_editions.png

    Product page badge

    Open the product-title.liquid file to locate the product title and vendor code blocks. Between these code blocks, add the code, then Save.

    Add_the_product_header_badge_for_Editions.png

Was this article helpful?
3 out of 3 found this helpful
Have more questions? Submit a request

Related articles