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 the same.
▶️ 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. So as we're installing the carousel we'll label it reviewsio-carousel!
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.
In these videos below you will see how this process works 👇
▶️ First, add a new section as previously shown and remove the schema that is there by default:
▶️ Next, change the name of the widget within the provided schema like so:
Remember, this is because we're installing the carousel code in this example!
▶️ Now, return to your REVIEWS.io dashboard and head to Publishing ▶️ Card Carousel Widget. Edit this using the Widget Editor and when you're ready click Get Installation Code! Copy this code! ✅
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, above we are using the Carousel widget, make any style changes you'd like and press "Get Installation Code"
▶️ You can then copy and paste this into the section file you created within Shopify. This code needs to go in between the start and end widget code comments. In my example, I'm pasting it above the schema.
Press Save ✅
Step Three - Adding the section to your site
Within the theme customizer, 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. You've just installed a widget manually 🎉
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 📢
Related Articles