Installing the VideoPeel Video Carousel is easy. Simply get your plugin code from your Videos Tab, and follow the video instructions below. Your implementation will depend on your Shopify Template. This example is intended as a directional suggestion, you may need to customize as needed for your specific template. For example, you may want to install a different Video Carousel instance in each of your product pages, rather than the same Video Carousel in every product page. In that case, using Metafields may be your best option to manage multiple attributes for different product pages. See Shopify's article about Metafields.

Watch this How To Video: https://app.videopeel.com/v/klsefe8a




Reference Code:

Create new “dynamic” section:
(Be sure that you replace your actual plugin code below for the script: "<script.....></div>")

Title:

home-video-peel.liquid

<div class="shopify-section" id="videopeelwrapper">

<h2 class="module-title">

{{ section.settings.title | escape }}

</h2>

<script type="text/javascript" id="videoPeelPlugin"

data-plugin="77db58b5-10c8-4011-b96e-75781fefc" src="https://plugin.videopeel.com/plugin.js"></script>

<div id="embed-widget-container"></div>

</div>

{% schema %}

{

"name": "VideoPeel",

"settings": [

{

"type": "text",

"id": "title",

"label": "Heading",

"default": "Headline Text"

}

],

"presets": [

{

"name": "VideoPeel",

"category": "Testimonials"

}

]

}

{% endschema %}

<style>

#videopeelwrapper{

padding-top:30px;

padding-bottom:30px;

text-align:center;

}

</style>

{% stylesheet %}

{% endstylesheet %}

{% javascript %}

{% endjavascript %}

Create New Snippet:

(Be sure that you replace your actual plugin code below for the script: "<script.....></div>")

Title:

video-peel.liquid

{% comment %}

to include in a template:

{% include 'video-peel' %}

{% endcomment %}

<div class="shopify-section" id="videopeelwrapper">

<h2 class="module-title">

See what our customers are saying:

</h2>

<script type="text/javascript" id="videoPeelPlugin"

data-plugin="77db58b5-10c8-4011-b96e-75781fefc34f" src="https://plugin.videopeel.com/plugin.js"></script>

<div id="embed-widget-container"></div>

</div>

<style>

#videopeelwrapper{

padding-top:30px;

padding-bottom:30px;

text-align:center;

}

</style>

Did this answer your question?