A video gallery section is a part of a website where you can find and watch a collection of videos. It is neatly arranged so you can easily browse through different videos, like product demonstrations, tutorials, or other content related to the website.
Benefits of a video gallery section:
- For complex products: If you sell items that are hard to understand, like electronics or fitness machines, videos make it easier for customers to see how they work.
- For fashion and beauty products: Videos show clothes and beauty items in action, helping people see how they look and how to use them.
- For luxury brands: If you sell expensive, exclusive products, videos can highlight their unique features and high quality.
- For storytelling brands: If your brand has a story, like being eco-friendly or supporting a cause, videos can share that story in a powerful way.
- For products needing guidance: If your product is tricky to use, like DIY kits or tools, videos can guide customers on how to use it properly.
How to implement this section on your store:
To implement video gallery section on your Shopify store,Here’s a step-by-step guide to help you set it up:
Customize Your Shopify Theme Code
- Go to Online Store > Themes > Actions > Edit Code.
- Create file named grt_video_gallary in section.
- Insert code in the created section.
Copy The Code From Here
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<style>
.posrel{position:relative;}
.posrel .posoverlay{position:absolute; top:0; left:0; right:0; bottom:0; display: block;}
.heading {
text-align: {{ section.settings.heading_alignment }};
}
.heading h1 {
color: {{ section.settings.heading_color }};
}
.row {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 992px) {
.col-md-12 {
width: 100%;
}
}
.clearfix:before,.clearfix:after{
display: table;
content: " ";
}
.clearfix:after{
clear: both;
}
.col-md-3{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
</style>
{% assign video_id = section.settings.video_url | split: 'v=' | last %}
<div class="page-width">
<div class="row cg2019-video">
<div class="heading">
<h1>{{ section.settings.title }}</h1>
</div>
<div class="col-md-12">
<div class="video-full">
<iframe width="100%" height="450" id="iframevideo" name="iframevideoa" src="https://www.youtube.com/embed/{{ video_id }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="clearfix"> </div>
<div class="video-slider">
{% for block in section.blocks %}
{% assign block_video_id = block.settings.video_url | split: 'v=' | last %}
<div class="col-md-3 posrel">
<a href="https://www.youtube.com/embed/{{ block_video_id }}" target="iframevideoa" class="posoverlay"></a>
<iframe width="100%" height="200" src="https://www.youtube.com/embed/{{ block_video_id }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<script>
$('.video-slider').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
{% schema %}
{
"name": "Video Section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Video Title"
},
{
"type": "url",
"id": "video_url",
"label": "Video URL"
},
{
"type": "select",
"id": "heading_alignment",
"label": "Heading Alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "color",
"id": "heading_color",
"label": "Heading Color",
"default": "#000000"
}
],
"blocks": [
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "url",
"id": "video_url",
"label": "Video URL"
}
]
}
],
"presets": [
{
"name": "Gr_Trading_video",
}
]
}
{% endschema %}
- Save the file .
- Now, go to your shopify customize theme
- Click on the Add section.
- You will see the Gr_trading_video section
- Now you can add the video .
- And save the section.
