Add Media Carousel to Shopify Vintage Themes
Instructions on how to set up the media carousel widget on vintage Shopify themes.
If you need any help setting up widgets on vintage themes let us know and we would be happy to help!
Prerequisites
This tutorial assumes that you've already completed the initial Recenio widget setup.
Media carousel widget setup
- Open your Shopify Admin and navigate to your online store themes. Select a theme where you want to add the media carousel widget, click on the actions menu and select 'Edit code'.
- Create a new snippet in the Snippets folder named recenio-media-carousel-widget.liquid
- Paste the following code inside the recenio-media-carousel-widget.liquid snippet.
{% 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 %}
<div class="recenio-media-carousel" {{ product_id }}>
{{ product_metadata }}
</div>
- Now you can use the following snippet to place the media carousel widget wherever you want in your theme.
{% render 'recenio-media-carousel-widget' %}
- If you would like to show media from a specific product instead of all products, use the following snippet instead.
{% render 'recenio-media-carousel-widget', product: product %}