The reason for this is our apps are not technologically compatible at this moment, but our teams are in talks of helping close this gap in the following months.

If you need an alternative for a filtering app to use in your collection pages you can use one of our partners Fast Simon.

Our main product review widget comes with 4 different themes layout you can choose from: Default, Modern, Minimal, and Carousel.

Opinew’s review widget settings are divided into three main components:

• General Settings
• Colour Settings
• Font Size Settings

General Settings

First, you will need to choose between our 4 different themes. Read more about each of our new review widgets layouts here.

Language

Then, you will be asked to choose the main language of your reviews. Choose between more than 80+ languages to display in your store.

Sorting of Reviews

Default sorting controls the order in which reviews are sorted by default on the store. The merchant can choose to sort by:

• Smart Reviews

Smart reviews are available as an add-on for Growth and Advanced plans and included in the Enterprise plan.

• By time (newest reviews first)
• By review photos and videos, then by time

On your Shopify store, the customer will see the following sort by options:

• Photos & Videos
• Verified purchase
• Default (only if Smart Reviews is enabled)
• Recent
• Highest Rated
• Lowest Rated

No Reviews

Controls whether an empty state widget is shown to customers in the store. The product may have ratings or not.

Review Source

The label displays if the control is on and if the reviews have been imported from Amazon, eBay, or Aliexpress.

Verified Label

The label displays if the control is on and if we can match the email address of the review to an email that made a purchase or if the review was verified at the time of import.

Search

Display a search bar on your review widget and let your customers search for specific reviews.

Separate Reviews

Available only on Enterprise plans.

This will display International reviews on the segmented control navigation menu. Any reviews in a different language will be displayed on your review widget in a different tab called International Reviews.

Star Bars

Stars bars are only available on the Default theme layout.

The customer will be able to filter the reviews by a given star rating by hovering over the star bar.

Date Format

The date controls whether a date is shown for each review and in which format.

Options for the date format:

• day/month/year
• month/day/vear
• year/month/day
• Relative (Ebay’s date format) eg. The past month

Reviews per page

Reviews per page are only available on the Default, Modern, Minimal theme layouts.

Controls how many reviews are visible per page on the store.

Review Columns

Review columns are only available on the Default and Minimal theme layouts.

Controls whether the reviews display on one or two columns on the store.

Review Images

The review images settings control:

• Whether to display review images or not.
• Whether the first image for any given review is displayed larger, the user can also toggle the max height.

The main review image is only available on the Default and Minimal theme layouts, with a review column set to 1.

Controls the aspect of your review cards.

• Pick between card style and flat style.
• Activate and choose a border or a shadow colour
• Set your border-radius
• Set your review card colour

Search

Colors Settings

Widget Elements

Controls the colour of the stars rating and the search icon colour.

Font Colours

• Body text: Controls the review text, total number of reviews and date colours.
• Large rating
• Tabs text color
• Verified label: Controls the colour of the font and icon
• Review source label: Controls the colour of the font and icon
• Reviewer Name: Controls the colour of the name of the reviewer
• Search placeholder: Controls the colour of the ‘Search’ placeholder text in the search bar

The search placeholder is only available on Growth, Advanced and Enterprise plans.

• Navbar text: Controls the colour of the Reviews | Q&A | International

Q&A is only available for the Growth plan and onwards. The search feature is only available on the Enterprise plan.

Button Colours

• Write a review button: Controls the colour of the button
• Write a review button text: Controls the colour of the text inside the button
• Sort by / Filter by button: Controls the colour of the filter and sort by button border and font

Pagination Colours

Controls the colour of the arrows to go to the previous or next page of reviews and the colour of the review page number.

Font Size

You can set a font size in rem or pixels for the Main review text, this is the body of the review. The other fonts will scale in relation to this.

If you happen to have any issues when customizing the widgets, feel free to contact our support center via the live chat at the bottom right of this page.

The first thing one see when the Customize Footer Badge page is opened is the section with the two most important elements of it.

The not detected label:

If the ‘Not detected’ label shown in the picture below is present in your customize page it means the widgets were not automatically installed, to solve this problem contact our customer support team via the chat window displayed on the bottom right corner of the Opinew dashboard.

The displaying/not displaying label:

When the widget is correctly installed one can hide it and display it at any desired moment with the flip of the main switch next to the widget’s name. The status of the label will change automatically after the action.

2. General Settings

General

Link: One can set the link to open up when the footer badge is clicked.

Language: The language is shared with the Product Review Widget so you can follow this help center article guide.

Colors

Stars: Color used by the stars inside the footer badge.

Text: Color for the average rating.

Secondary text: Color for the text element with the number of reviews.

Background: The color for the background of the entire footer badge widget.

Border: The fine line covering the card for the footer badge widget.

Fonts

Main: For badges with two lines of text this covers the top line, and the only line in style with only one line.

Secondary: For badges with two lines of text this covers the bottom line.

Avg. Score: The size for the stars.

The first thing one see when the Customize Product Review Widget page is opened is the section with the two most important elements of it.

The not detected label:

If the ‘Not detected’ label shown in the picture below is present in your customize page it means the widgets were not automatically installed, to solve this problem contact our customer support team via the chat window displayed on the bottom right corner of the Opinew dashboard.

The displaying/not displaying label:

When the widget is correctly installed one can hide it and display it at any desired moment with the flip of the main switch next to the widget’s name. The status of the label will change automatically after the action.

2. General Settings

Display

Show dates: Inside every review item inside the carousel showing the date of publication is optional.

Auto scroll: Users can choose to whether let the carousel change pages automatically or leave it static until the users change the pages manually.

Show product name: The review cards can be set to display also the name of the product or just the review body.

Color

Stars: The color for the stars displayed at the top of each review card.

Text: Each review body’s main text color.

Secondary Text: The color for the author name, and review date.

Background: Color for the complete review card’s background.

Verified badge: Badge displayed at the same level as the stars element at the top of the review card.

Controls: The arrow elements to the left and right side of the carousel, and the page pickers at the bottom of the widget.

Product name: The color for product name.

Fonts

Main: Font size option for the review’s body inside each carousel element.

Secondary: Font size for date of publication, review date, and product name.

3. Add & Manage Reviews

By default the carousel widget will start empty and therefore it will not be displayed in your store, after the first one or more reviews are added to it then it will be shown on your homepage. (or custom place of installation)

The first thing one see when the Customize Product and Collection stars page is opened is the section with the two most important elements of it.

The displaying/not displaying label:

One can hide it and display it at any desired moment with the flip of the main switch next to the widget’s name. The status of the label will change automatically after the action.

2. General Settings

 The style of the all reviews floating widget is shared with the product review widget. If you want to change the styling, please go to the product review widget settings.

Color

Using the two shown color pickers a user can chang the background color and text color for the floating widget element.

Alignment

The floating widget can be displayed on either side of the screen and that option can be changed with the shown picker.

The first thing one see when the Customize Product and Collection stars page is opened is the section with the two most important elements of it.

The not detected label:

If the ‘Not detected’ label shown in the picture below is present in your customize page it means one or the two widgets were not automatically installed, to solve this problem contact our customer support team via the chat window displayed on the bottom right corner of the Opinew dashboard

The displaying/not displaying label:

When the widgets are correctly installed one can hide them and display them at any desired moment with the flip of the main switch next to the widgets’ names. The status of the label will change automatically after the action.

2. General Settings

In this page one can customize the options explained in the next section:

Color: Using the color picker the stars shown in product pages or collection pages will have the color chosen configured in this page.

Dispĺay if no reviews: The default configuration for the product & collection stars is to be displayed only if a product has 1 or more reviews otherwise the stars will be hidden temporarily. This behavior can be changed and the stars can be shown empty on each product.

Center stars on mobile: Some product pages need a different star alignment for large screens and another configuration for mobile devices, with this optional text input a user can set a breakpoint for the screen to display the stars on a different alignment.

Stars Alignment: Users can set the alignment for the two standard sets of stars, one for individual product pages, and the alignment for collection pages.

This feature lets you show reviews from international languages separately to your local language. When switched it will show international reviews in its own separate section below your local reviews. Your visitors can translate each international review separately by clicking the ‘Translate’ button on the review card. Your visitors can also translate all international reviews at once by clicking the ‘Translate All’ button at the start of the international reviews section.

How do you distinguish between local and international reviews.

We detect the language of each review and use that to split them into local/international review sections

How can I set my local language

When placing the headless code for the review widget, add a lang attribute and specify an ISO language string eg.

<opinew-plugin type="product" product-id="12343244" domain="myshop.myshopify.com" lang="fr"></opinew-plugin>

This will let our system know that you picked French to be your main language for this frontend.

One way to summarize your complete number of reviews in your shop and display the average rating is using our review badges. These can give your customers a sense of trust showing in a small space the feedback you’ve had so far.

What kind of reviews it shows :

The footer & email badge will show a list of stars filled with the aggregated rating calculated with all the reviews you have on your products, you can choose one of the three available styles.

Where it should be used in the store :

This widget is meant to be displayed on the footer of your store.

More information :

Besides basic styling options available to customize your badges you can select which URL the user will be redirected to when the badge is clicked.

Installation Instructions

Watch our tutorial video below to quickly add an All Reviews Badge to your Shopify store.

Method 1: App Blocks (Storefront 2.0)

What types of pages can the element be drag-and-dropped:

Product pages, collection pages

Watch App Blocks Tutorial Video

See the full help center article tutorial for App Blocks.

Method 2: Javascript

1. Place the footer badge

Insert the code to indicate where you want the footer badge to show. It can be any type of html element but we recommend div or span element. It needs to have the required class and data attributes as described below.

<div class="opinew-badge-plugin-dynamic"></div>

Method 3: Shopify Liquid

There are 3 designs to choose from:

Design 1

<div style="clear:both;"></div><div id="opinew-reviews-all-reviews-code"><span id="opinew-shop-plugin">{{ shop.metafields.opinew['opinew_badge_wide_average'] }}</span></div>

Design 2

<div style="clear:both;"></div><div id="opinew-reviews-all-reviews-code"><span id="opinew-shop-plugin">{{ shop.metafields.opinew['opinew_badge_small'] }}</span></div>

Design 3

<div style="clear:both;"></div><div id="opinew-reviews-all-reviews-code"><span id="opinew-shop-plugin">{{ shop.metafields.opinew['opinew_badge_wide'] }}</span></div>

Sometimes you would want to show some of the best reviews across your shop on the same place, with our review carousel you can showcase handpicked reviews from different products and show them on your homepage for your customers to see.

What kind of reviews it shows :

Each review carousel will display blocks of text displaying the product name, the body of the review, and the date of the publication.

Where it should be used on the store :

The widget is meant to be displayed on the homepage of your store.

More information :

Besides some basic styling options that can be changed, the dates and product names can be turned on and off as it is needed.

Installation Instructions

Watch our video tutorial below to quickly add a review carousel to your Shopify’s store homepage.

Method 1: App Blocks (Storefront 2.0)

What types of pages can the element be drag-and-dropped:

Homepage, collection pages

Watch App Blocks Tutorial Video

See the full help center article tutorial for App Blocks.

Method 2: Javascript

1. Place the footer badge

Insert the code to indicate where you want the review carousel to show. It can be any type of html element but we recommend div or span element. It needs to have the required class and data attributes as described below.

<div class="opinew-carousel-plugin-dynamic"></div>

Method 3: Shopify Liquid

If you want to add the carousel to page other than a homepage (blog, custom product page etc.) You can just add this code into the liquid template of that page:

{% section 'opinew_review_carousel' %}

Our stars widget is our quickest way of showing your customers the amount of reviews each product has, either on the individual pages or on the collection pages. This color of this stars can be changed to fit your shop as well as the alignment for how to be shown (left, center ,right).

What kind of reviews it shows :

This element displays in simple but clear way the number of reviews on each product.

Where it should be used on the store :

This widget is meant to be placed between the title and the price, this helps on both the individual product page, or the collection pages.

More information :

There is an option to display the widget with empty stars if the users wants it, if this option is switched off the widget won’t be displayed until the product receives one or more reviews.

Installation Instructions

Watch our video tutorial below to quickly add product & collection star ratings to your Shopify store.

Method 1: App Blocks (Storefront 2.0)

What types of pages can the element be drag-and-dropped:

Product pages, collection pages (On collection pages you need to add the liquid snippet manually or ask our customer support for help with the installation)

Watch App Blocks Tutorial Video

See the full help center article tutorial for App Blocks.

Method 2: Javascript

Opinew uses metafields to render stars. However metafields don’t work if you have a product collection or use a template builder like shogun that use javascript to render its contents.

In this case you need to use our JavaScript library instead. It helps you render stars where meta fields are not accessible. Here is how to use it.

1. Place the stars

Insert the code to indicate where you want the stars to show. It can be any type of html element but we recommend div or span element. It needs to have the required class and data attributes as described below.

Product page stars

Insert html object with class opw-dynamic-stars and propertydata-product-id containing current product id in the template wherever You want to render the stars.

<div class="opw-dynamic-stars" data-product-id="123" ></div>

<div class="opw-dynamic-stars" data-product-id="{{product.id}}" ></div>

Collection stars

For the collection of products use opw-dynamic-stars-collection class. It will create anchors to the product pages. Example:

<div class="opw-dynamic-stars-collection" data-product-id="123" ></div>

<div class="opw-dynamic-stars-collection" data-product-id="{{product.id}}" ></div>

Method 3: Shopify Liquid

To install this widget with pure shopify liquid codes use the snippets bellow.

This is the recommended method for keeping fast loads times and avoiding website flash.

For review stars on your product pages use this:

<div id='opinew-stars-plugin-product'>{% render 'opinew_review_stars_product' product:product %}</div>

For review stars on your collections/product lists pages use this:

<div class='opinew-stars-plugin-product-list'>{% render 'opinew_review_stars_lists' product:product %}</div>