To display a Ratings & Reviews widget on your website, you need to add a few small snippets to your site's templates.
Configuring the R&R Widget
1. Log in to your Shopify account, go to 'Online Store' and click on 'Themes':
2. Click on the 3 dots and 'Edit code':
3. Click on 'Sections', 'New File' and name your file:
4. Copy paste the following code an click on 'Save' (top-right corner):
{{% assign product_identifier = '' %}
{% if section.settings.product_identifier == 'sku' %}
{% assign product_identifier = product.selected_or_first_available_variant.sku %}
{% elsif section.settings.product_identifier == 'id' %}
{% assign product_identifier = product.id %}
{% endif %}
<script>
(function (w, d, id, src) {
if (!w.flowboxReviews) {
var f = function () {
f.q.push(arguments)
}
f.q = []
w.flowboxReviews = f
}
if (d.getElementById(id)) return
var s = d.createElement('script'),
fjs = d.scripts[d.scripts.length - 1]
s.id = id
s.async = 1
s.src = src
fjs.parentNode.insertBefore(s, fjs)
})(window, document, 'js-flowbox-rr', 'https://reviews-widget.getflowbox.com/main.js')
</script>
<div id="js-flowbox-reviews-{{ section.settings.flowKey }}" style="display:block !important;"></div>
<script>
window.flowboxReviews('init', {
container: '#js-flowbox-reviews-{{ section.settings.flowKey }}',
key: '{{ section.settings.flowKey }}',
locale: '{{ section.settings.flowLocale }}',
productId: '{{ product_identifier }}'
});
</script>
{% schema %}
{
"name": "flowboxReviewsWidget",
"class": "flowbox-reviews-section",
"settings": [
{
"type": "text",
"id": "flowKey",
"label": "Flow Key"
},
{
"type": "text",
"id": "flowLocale",
"label": "Locale",
"default": "en-EU"
},
{
"type": "select",
"id": "product_identifier",
"label": "Product Identifier",
"options": [
{ "value": "sku", "label": "Variant SKU" },
{ "value": "id", "label": "Product ID" }
],
"default": "sku"
}
],
"presets": [
{
"name": "flowboxReviewsWidget"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
In this code, we're using a Section named 'flowboxReviewsWidget'. If you want to change the name, make sure to update both "name" fields within the schema section of the code.
5. Go back to your "online store" and click on customize (bottom-right corner) :
6. Select your Product Page. To add the Widget to your Shopify store, click "Add section" and search your widget by typing the name that was previously set up. Then, select it from the dropdown menu:
7. Click on the newly added section:
8. Add your Flow key and locale.
Get the Flow Key by acessing your R&R Widget and copying the last part of the URL:
https://app.getflowbox.com/ratings-and-reviews/widgets/31ad9f5d-b353-4bf0-ae60-8520e97d67fa
You will see a default locale set to 'en-EU'. Please update this to match the locale used in your Catalogs, as seen in the "Catalogs" section from your Flowbox dashboard.
The locale combines a language code and a region code, and serves two main purposes:
Translate the widget's text and forms to the selected language.
Specify the catalog from which we should fetch data for assigned products (such as the product titles) and the language of the reviews.
If you wish to apply a different setup for a specific country, you can override the default settings as follows :
Select the desired country.
Adjust the relevant settings (e.g., tags, locale, etc.).
Click Save to apply the changes
9. Drag the widget to where you want to position it on the page, and then click 'Save' (top-right corner) to see a preview of your flow.
More Shopify manual guides