Add Reviews Carousel to Shopify Vintage Themes

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

Prerequisites

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

Reviews carousel widget setup

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

• Create a new snippet in the Snippets folder named recenio-reviews-carousel-widget.liquid
• Paste the following code inside the recenio-reviews-carousel-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

  Show Header
  Description: display header with product rating above the review carousel
  Values: 'true' or 'false'

  Header Text
  Description: display a title for the review carousel
  Values: 'true' or 'false'

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

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

  Show Media
  Values: 'true' or 'false'

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

  Show Reply
  Values: 'true' or 'false'

{%- 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-show-header="true"
    data-header-text="Product Reviews"
    data-page-size="12"
    data-sorting-order="mostRecent"
    data-show-media="true"
    data-show-product-details="true"
    data-show-reply="false"
{% endcapture %}

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

• Now you can use the following snippet to place the widget where you want it in your vintage Shopify theme.

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

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

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