Add Star Rating to Shopify Vintage Themes

Instructions on how to set up the star rating widget on Shopify vintage themes.

Prerequisites

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

Star rating widget setup

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

• Create a new snippet in the Snippets folder named recenio-star-rating-widget.liquid

• Paste the following code inside the recenio-star-rating-widget.liquid snippet.

{%- comment -%}
  Settings:

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

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

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

  Star Height
  Description: height of the stars in px
  Values: between 10 and 30

  Show Without Reviews
  Description: whether to show the widget if a product has no reviews
  Values: 'true' or 'false'

  Show Label
  Description: whether to show the label (with review count or average rating)
  Values: 'true' or 'false'

  Label Type:
  Description: whether to show the review count or the average rating
  Values: 'true' or 'false'
{%- endcomment -%}

{% if product != blank %}
    {% 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="0"
    data-bottom-padding="0"
    data-star-height="14"
    data-show-without-reviews="true"
    data-show-label="true"
    data-label-type="reviewCount"
{% endcapture %}

<div class="recenio-star-rating" {{ settings }}>{{ product_metadata }}</div>

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

{% render 'recenio-star-rating-widget', product: product %}