Add Product Reviews to Shopify Vintage Themes

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

Prerequisites

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

Product reviews widget setup

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

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

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

{%- comment -%}
  Settings:

  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

  Layout
  Description: layout of product reviews
  Values: 'list', 'grid'

  Sorting Order
  Description: sorting order for product reviews
  Values: 'highestRated', 'mostRecent'

  Initial Size
  Description: how many reviews to initially display
  Values: between 3 and 10

  Page Size
  Description: how many reviews to additionally load on request
  Values: between 3 and 10

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

  Show "Write a review" Button
  Values: 'true' or 'false'

  Show Product Details
  Values: 'true' or 'false'

  Show Reply
  Values: 'true' or 'false'

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

{%- 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-top-padding="20"
    data-bottom-padding="20"
    data-layout="list"
    data-sorting-order="mostRecent"
    data-initial-size="5"
    data-page-size="5"
    data-show-without-reviews="true"
    data-show-write-review-button="true"
    data-show-product-details="true"
    data-show-reply="true"
    data-star-height="18"
{% endcapture %}

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

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

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

• If you would like to show reviews from all products instead of a specific product, use the following snippet instead.

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