Manually installing Shopify Widget - Sections

If, for any reason, you're not able to use the app blocks to install your widgets, you can do this with custom sections.

Requirements:

Active REVIEWS.io account (any plan)
Active Shopify account

Guide:

Firstly, check that you can add sections to the Shopify page you are trying to edit allows you to add sections. Within the theme customiser, you should have the option to "add a section" if this isn't available you will need to use snippets instead. If the option is there, you can proceed with the rest of the guide.

Step one - Create a new section

In the following example, we are going to install the carousel widget, however, the steps are mostly

Firstly, click the three dots in the theme customiser and press "Edit Code"

You will then need to create a new section. You can call this whatever you like but we recommend something like reviewsio-WIDGET_NAME as this makes it easy to find the file if you need to make changes in the future.

The code which is included by default can be deleted and replaced with the following:

<!-- Reviews.io Widget START -->


<!-- Reviews.io Widget END -->

{% schema %}
  {
    "name": "WIDGET NAME",
    "settings": [
        {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Reviews"
        }
    ],
    "presets": [
        {
            "name": "WIDGET NAME",
            "category": "Text"
        }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

You will need to replace the "WIDGET NAME" with the name of the widget. In this case, will use Reviews Carousel Widget. If you are installing multiple versions of the widget on different pages, you can add more descriptions to this, such as Reviews Carousel Widget Home.

Step Two - Getting & Installing the Widget Code

Navigate to the REVIEWS.io dashboard and go to Publishing >> Widget Library here you can find all of the widgets we offer.

Select the widget you'd like to use, make any style changes you'd like and press "Get Code".

You can then copy and past this into the section file you created within Shopify. This code needs to go in between the start and end widget code comments.

Press Save.

Step Three - Adding the section to your site

Within the theme customiser, you can add a new section.

Search for the widget name you entered into the code and click this. You can then drag and drop this wherever you'd like on the page.

Note: Our widgets don't always display in the preview, you may need to save the theme and refresh the page before it will show up as expected