The Shopify Connect app will walk you through the entire setup process to begin collecting and displaying reviews, including submitting your product feed to collect product reviews.
Below are step-by-step instructions on how to add Shopper Approved code to your Shopify website after configuring the Shopify app.
Now that you have configured your widgets within the Shopify app, you are ready to place the code snippets in your Shopify store to display your widgets on your website.
You can do this simultaneously as you go through the Shopify app steps or you can do this later.
If you are doing this later, we recommend that you copy and paste the code or you can log in to your Shopper Approved account to find the code snippets under their respective sections. If you didn't rename the presets, they are named "Shopify Integration Preset".
Reviews Page
If you enabled the Reviews page from within the Shopify app, the Reviews page was created for you in Shopify. That page is located within your Shopify store. You can find it by going to Shopify Dashboard > Sales Channels > Online Store > Pages > Reviews.
Adding a reviews page link
You will want to add a link to the newly created Reviews page in your footer (or wherever you'd like) so users can easily find your reviews. The Reviews page, with our Review Page Widget, can rank highly in organic search results and drive more traffic to your site.
The link is most commonly placed in the footer, however, you can place it in the header if you would like.
To add a reviews page link, go to your Shopify Dashboard > Content > Menu to find the menu options and then select the menu you would like to place the reviews page. This link is usually placed in either the footer, header, or both.
After selecting the menu you want, click "Add menu item" at the bottom. Enter "Reviews" under the label to create the link name. Under Link, click Pages and attach the Reviews page. Then click "Save"
3. Once you have added the link, you should see a "Reviews" link on your website.
Once you have collected reviews, the reviews page will look similar to this and be customized to how you set it up in the app.
For the remainder of the code, you will want to work on the current theme of your website by going to Online Store > Themes > select the current theme you would like the code added to > Click the triple dots on the right side (...) and choose ‘Edit Code’.
Seal
You can find the seal code snippet in your Shopper Approved account under Seals & Widgets > Seal. If you didn't rename the preset it will be called "Shopify Integration Preset."
The seal is most commonly placed in the footer, but you can place it in the header if you prefer, or you can add more than one.
To add the seal code snippet, locate the desired location under Sections, either the footer.liquid or header.liquid template in most cases, within your Shopify theme.
2. Place the copied seal code snippet to the desired location on your site. It should be customized to how to you styled it in the app.
Note: The seal will not display until you have collected 10 or more seller reviews.
Rotating Widget
The Rotating Widget is a good way to display some of your best reviews. It is typically placed on the home page. This can be added from your Shopify page builder.
You can find the Rotating Widget code snippet in your Shopper Approved account under Seals & Widgets > Rotating Widget. If you didn't rename the preset it will be called "Shopify Integration Preset".
1. To add the Rotating Widget code snippet, navigate in Shopify to Online Store > Themes > Choose the current theme you’re working on > Customize > Homepage > Custom Liquid or Custom HTML and place the code in the desired location. Make sure to save it and display it.
Your rotating widget will be customized to how you set it up in the app.
If you are collecting product reviews with us, continue on for how to add the category and product page widgets.
Category Page Code
Placing category widgets on your site allows for your star rating and review count to display below the product listings on collection pages.
You can find the category page code in your Shopper Approved account under Setup > Category Page Code.
1. You will add code to the collection page once and then add divs to each category listing so the star rating and review count appear below each product. This code acts as an anchor and is placed before the ending body tag </body> on layout > theme.liquid.
The default behavior is that if no reviews are found no star containers will be shown.
If you would like empty stars to show please reach out to support at [email protected].
2. The code to display the star rating and review count can now be placed below the product title. You will place that code in Snippets > product-grid-item.liquid.
You might be using these common templates if you are not using product-grid-item.liquid:
product-card.liquid
card-product.liquid
You will need to replace product_id_here with the variable that will pass the parent ID for the respective product - {{product.id}}.
Product Page Code
You can find the product page code in your Shopper Approved account under Setup > Product Page Code. If you didn't rename the preset it will be called "Shopify Integration Preset".
Both the star rating and widget code is typically placed in Sections > product-template.liquid.
However, depending on your Shopify theme layout, it might be under these locations instead:
sections/product.liquid
sections/main-product.liquid
snippets/product.liquid
snippets/main-product.liquid
templates/product.liquid
Customize Theme > Products > Default product > Custom Liquid or HTML
We recommend placing the code to display both the star rating and review count near the product name.
To place the product review widget, place the code snippet where you would like it to display on the product page.
You will have to replace the product ID placeholder - [PRODUCT ID] - with the variable to pass that particular product's ID anywhere you place this code, such as sa_product = {{product.id}}.
Your integration should now be complete.
If you need any help, please reach out to [email protected].