Everything ReviewSender shows on your storefront is done via Javascript. The Javascript itself is automatically loaded when you shop loads, so there is no need for you to insert our script. Additionally, our script tries to find the proper places for our widgets automatically, so you may not have to do anything. :)

However, if you are not satisfied with the automatic placements or they don't work (mostly happening when you use a custom theme) on this page we will show you all you need to properly place our widgets.

The following sections cover how to set up your storefront with our system:

  • General Principles
  • Product Page
  • List Page

Let's go through them!

General Principles

Here are the general principles which you should keep in mind while going through the setup:

  • Our script tries to find everything automatically first. If you don't have the desired result you can always override the automatic placements.
  • Your widgets are turned off by default.
  • Our script is looking for HTML tags with either classes or IDs. So if you don't have suitable tags available you can create them.
  • In the following two sections we show you how to create such tags, you can however also add the IDs or classes to existing tags if desired.
  • Our script will always insert HTML code after the correlating tag is found.
  • To make testing easy we made so that you add the term "rstest" to any given URL, our script will run and display demo content so you can verify it functions as intended. So for example, if you are on a product page, you could just add "?rstest" to the URL and our script would show everything as it would with real content. This test mode by-passes your widget settings and displays them even if your shop has turned widget off still. This way you can work on setting up the frontend correctly without having to worry about showing unfinished widgets to your users.
  • If you have any questions please do email us at support@reviewsender.com

Alright, let's get started with the product page.

Product Page

There are two places that we want to cover here:

  1. Review/Rating display next to the product title
  2. Review/Rating section displaying all the reviews.

For you to add these snippets you need to edit the code of your theme. You do that by doing the following:

  1. Select Online Store (1) in your Sales Channels section.
  2. Then click on Themes.
  3. Now select Actions (2) and finally:
  4. Select Edit Code (3)

Which file you need to open mostly depends on your individual template/theme. The following assumes you are using a standard template. If you need help please reach out to support and we will gladly help you.

Now you want to open the product-template.liquid (2) which you find under Sections (1):

The first section our scripts tries to identify by looking for an element that has the ID "reviewsender-rating-widget". So you can either add this ID to the title element for your product or in case you already have an ID and cannot change it, you can also create an empty element with that ID, like this:

<span id="reviewsender-rating-widget"></span>

In the product-template.liquid for the standard template you will find the place to put this widget at line 125, after the title:

Our script will insert the rating section after the empty element or headline has been found.

The second section is integrated the same way: Our script is looking for an element with the ID "reviewsender--review-section". Again, if you need to create a new element for this enter the following:

<span id="reviewsender--review-section"></span>

Since this is a whole new section we recommend placing it under the product section, in the product-template.liquid this is after line 258:

That should be all, now you can call a product page with "?rstest" in the URL to see if it works. The URL in your browser should look like this: 


List Page

The list page is what you see when you show categories, vendors, or collections. Anything that contains a list of products. Again, everything here might be different for you if your theme code varies. But do not dispair, we'll gladly help you out, just email support@reviewsender.com :]

To open the list page in the code editor select Snippets first and then product-card-grid.liquid. You can then add the code to the correct lines, for example under the title:

On list pages, our script is looking for elements that have the class "reviewsender--product-card". That class should be placed on the <a> tag that points to the product. Then our script is looking for all elements with a class "reviewsender--reviews-snippet", to place the rating section right after. You can attach this class to the title element of your listing HTML.

If you need help with any of this we are more than happy to assist you, please do reach out to us either through our chat or email us at support@reviewsender.com

That should be all, now you can call a catalog/collection page with "?rstest" in the URL to see if it works. The URL in your browser should look like this: