Add Reviews Badge to Shopify Vintage Themes

Instructions on how to set up the reviews badge widget on Shopify vintage themes.

Prerequisites

This tutorial assumes that you've already completed the initial Recenio widget setup.

Reviews badge widget setup

• Open your Shopify Admin and navigate to your online store themes. Select a theme where you want to add the reviews badge widget, click on the actions menu and select 'Edit code'

• Create a new snippet in the Snippets folder named recenio-reviews-badge-widget.liquid

• Paste the following code inside the recenio-reviews-badge-widget.liquid snippet.

{%- comment -%}
  Settings:

  Alignment
  Description: horizontal alignement of the widget
  Values: 'left', 'center', 'right'

  Top Padding
  Description: widget top padding in px
  Values: between 0 and 50

  Bottom Padding
  Description: widget bottom padding in px
  Values: between 0 and 50

{%- endcomment -%}

{% if product != blank %}
    {% capture product_id %} data-product-id="{{ product.id }}"{% endcapture %}
    {% capture product_metadata %}
        <script type="application/json" data-product-metadata>{{ product.metafields.recenio.metadata }}</script>
    {% endcapture %}
{% endif %}

{% capture settings %}
    data-alignment="left"
    data-top-padding="20"
    data-bottom-padding="20"
{% endcapture %}

<div class="recenio-reviews-badge" {{ settings }} {{ product_id }}>{{ product_metadata }}</div>

• Now you can use the following snippet to place the reviews badge widget wherever you want in your theme.

{% render 'recenio-reviews-badge-widget' %} 

• If you would like to show the rating of a specific product instead of all products, use this snippet instead.

{% render 'recenio-reviews-badge-widget', product: product %}