All Collections
Integrations
Shopify
Installing Widgets - Shopify 2.0
Installing Widgets - Shopify 2.0
Use App Embeds to install our widgets
Kai Jensen avatar
Written by Kai Jensen
Updated over a week ago

If you have a Shopify 2.0 Theme, you are able to use the App Embeds to drag and drop the widgets onto your site, without needing to know how to code.

Requirements

  • Available on all of our plans
    Note: some widgets will require a bolt-on, but this will be highlighted in the article.

Navigation

  • In REVIEWS.io, navigate to Integrations

  • Navigate to Shopify

There are two steps to getting the widgets installed on a 2.0 theme. The first is to enable the relevant app embeds, & then you will need to add this onto the theme.

Step 1: Enable App Embeds

Core Snippet

The Core Snippet is required to make sure that the widgets work on your page. This provides all of the widgets with your Store ID to allow the widgets.

Your store ID can be found on the Shopify Integrations page.

If you press "Enable Core Snippet" this will direct you to your live Shopify theme, so you can enable this.

If you are working on a draft theme, you can also find the Core Snippet by going to App Embeds within the Shopify theme customiser.

You then need to enable the Core Snippet & enter your Store ID. This also allows you to set the language for your widgets.

Rating Snippet

Within the App Embeds section, you can enable the rating snippet.

Here you can define how the stars will show up on the page. You can change the colour, text, what happens when the customer clicks on the stars & if the rating is visible when there are no reviews for the product.

Floating Widget

The Floating widget will be installed globally across all pages on your site. Once you have enabled this, you will need to include your widget ID. To find this you can click the REVIEWS.io Dashboard link within Shopify. This will take you to the widget editor to allow you to make your desired style changes.

After you have made your desired changes, you can press the save widget button and this will open up the installation code. Copy the data-widget-id value as highlighted in the below screenshot, and paste this into the app block

Note: If you make further changes to the widget, this will update on the live side provided you save existing changes and don't create a new version of the widget.

If you want to hide the widget on certain pages, you can change the settings within the editor. If you want more control over which pages this shows on, it will require a manual install of the widget.

Replays & Analytics

You will need to enable the Replays & Analytics app Embed.

Click on this code and it'll take you to the REVIEWS.io dashboard, where you can copy the highlighted section from the screenshot below.

After this navigate to your Shopify Settings and Checkout and scroll to Order Status Page & paste the code into the Additional scripts section.

Step 2: Adding Widgets

Rating Stars

Within the Product Page press Add block and select the Ratings Snippet you can then drag this wherever you'd like it to display within the product page.

NOTE: Rating Stars on collection pages requires a manual install.

Product Review Widget

Press Add section and select the Product Reviews Widget, you can then drag the block to where you'd like to display this on the widget.

If you click on the app, you will have style options that you can alter to customise the look and feel of the widget.

Note: We are limited by Shopify on how many options we can provide in the app block, if there is further customisation you want to do, it will require a manual install

Carousel Widget

Press Add section and select the Card Carousel, you can then drag the block to where you'd like to display this on the widget.

If you click on the app, you will have style options that you can alter to customise the look and feel of the widget.

Note: We are limited by Shopify on how many options we can provide in the app block, if there is further customisation you want to do, it will require a manual install

Nuggets, Rating Bar & UGC

Note: The UGC widget requires the bolt-on to be added to your account.

Add a new section, or block, and select which widget you'd like to use.

Click on the block, and enter in the Widget ID. You can do this by clicking the REVIEWS.io Dashboard link. This will then open the Widget Editor.

You can then make any style changes to the widget and press save. This will open up the widget code where you can find the ID you need, this is shown in the screenshot below

Did this answer your question?