Introduction
In today’s fast-paced eCommerce world, customers prefer watching videos over reading long product descriptions. That’s why Shopify store owners are now using the Shopify Reels Section to showcase products with engaging videos, product variants, pricing, and even an Add to Cart button — all in one place.
In this guide, I’ll walk you through:
- What is the Shopify Reels Section?
- Benefits of using video in your Shopify store
- How to add the Reels Section step-by-step
- Tips to optimize Reels for higher conversions & SEO
What is Shopify Reels Section?
The Shopify Reels Section is a customizable block in your Shopify theme that allows you to:
- Upload a product video
- Display product title, price & variants
- Add an Add to Cart button directly below the video
- Customize background, spacing, text, and layout
- Make the section mobile-friendly & responsive
This feature helps store owners showcase their products in a modern and interactive way, similar to Instagram Reels or TikTok videos, but directly inside their Shopify store.
Benefits of Shopify Reels Section
1. Increases Customer Engagement
Videos grab attention faster than text or images. A well-placed video can stop a visitor from scrolling and make them explore your product.
2. Boosts Sales with Quick Checkout
Since the Add to Cart button is visible right under the video, customers can instantly purchase the product without navigating to multiple pages.
3. Fully Customizable
You can change the title, description, spacing, background, and video to match your brand style.
4. Works on All Devices
The section is 100% responsive, meaning it works on desktops, tablets, and mobile devices.
5. Perfect for Product Showcases
If you sell apparel, gadgets, or lifestyle products, showing a real-life demo video increases trust and conversion rates.
How to Add Shopify Reels Section (Step-by-Step)
- Log in to your Shopify Admin Panel.
- Go to Online Store > Themes > Edit Code.
- Create a new section file under the Sections folder (e.g.,
reel-section.liquid). - Paste the custom code.
{% schema %}
{
“name”: “reel Section”,
“settings”: [
{
“type”: “text”,
“id”: “section_title”,
“label”: “Section Title”,
“default”: “Your Title Here”
},
{
“type”: “textarea”,
“id”: “section_description”,
“label”: “Section Description”,
“default”: “Your description here.”
},
{
“type”: “image_picker”,
“id”: “section_background_image”,
“label”: “Background Image”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 40
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 52
}
],
“blocks”: [
{
“type”: “reel”,
“name”: “Add Product “,
“settings”: [
{
“type”: “video”,
“id”: “reel_video”,
“label”: “Upload Video”
},
{
“type”: “product”,
“id”: “featured_product”,
“label”: “Select Product”
}
]
}
],
“presets”: [
{
“name”: “reel section”
}
]
}
{% endschema %}
<div class=”cv-{{ section.id }} reel-section page-width” style=”background-image: url({% if section.settings.section_background_image %} {{ section.settings.section_background_image | img_url: ‘master’ }} {% endif %});”>
<div class=”section-header”>
<h1 class=”first”>{{ section.settings.section_title }}</h1>
<p>{{ section.settings.section_description }}</p>
</div>
<div class=”reel-grid slider”>
{% for block in section.blocks %}
{% if block.type == ‘reel’ %}
<div class=”reel-item”>
{% if block.settings.reel_video != blank %}
<video muted autoplay class=”reel-video”>
<source src=”{{ block.settings.reel_video | video_tag}}”>
</video>
{% endif %}
{% if block.settings.featured_product != blank %}
{%- assign product = all_products[block.settings.featured_product] -%}
<div class=”reel-product”>
<a class=”anchor” href=”{{ product.url }}”>
<img src=”{{ product.featured_image | img_url: ‘medium’ }}” alt=”{{ product.title }}”>
<h3 class=”head”>{{ product.title }}</h3>
<p class=”price”>{{ product.price | money }}
{% if product.compare_at_price > product.price %}
<span class=”compare-at”>{{ product.compare_at_price | money }}</span>
{% endif %}
</p>
</a>
<form method=”post” action=”/cart/add”>
<input type=”hidden” name=”id” value=”{{ product.variants.first.id }}” class=”variant-id”>
<select name=”id” class=”variant-selector”>
{% for variant in product.variants %}
<option value=”{{ variant.id }}” {% if variant == product.variants.first %} selected {% endif %}>
{{ variant.title }} – {{ variant.price | money }}
</option>
{% endfor %}
</select>
<div class=”quantity-wrapper”>
<button type=”button” class=”quantity-decrease”>-</button>
<input type=”number” name=”quantity” value=”1″ min=”1″ class=”quantity-selector”>
<button type=”button” class=”quantity-increase”>+</button>
</div>
<button type=”submit”>Add to Cart</button>
</form>
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
<style>
.cv-{{ section.id }}.reel-section {text-align: center; padding-top: {{ section.settings.padding_top }}px; padding-bottom:{{ section.settings.padding_bottom }}px;}
.cv-{{ section.id }} .first{ margin: 0; margin-bottom: 28px;}
.cv-{{ section.id }} .section-header {margin-bottom: 20px;}
.cv-{{ section.id }} .section-header h2 {font-size: 24px;font-weight: bold;margin-bottom: 10px;}
.cv-{{ section.id }} .section-header p {font-size: 16px;color: #666;}
.cv-{{ section.id }} .reel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: 20px; justify-content: center; }
.cv-{{ section.id }} .reel-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cv-{{ section.id }} .reel-video { width: 100%; max-width: 170px; }
.cv-{{ section.id }} .reel-product { cursor: pointer; position: relative; bottom: 40px; text-align: center; width: 100%; max-width: 250px; }
.cv-{{ section.id }} .reel-product img { position:relative; left:88px; width: 50px; height: 60px; }
.cv-{{ section.id }} .reel-product .price { color: #333; font-weight: bold; font-size: 11px; }
.cv-{{ section.id }} .reel-product .compare-at { text-decoration: line-through; color: #888; margin-left: 5px; font-size: 9px; }
.cv-{{ section.id }} .head { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.2; height: 2.4em; }
.cv-{{ section.id }} .reel-product button { font-weight: bolder; background-color: #f6fffc; color: #49ad91; border: none; padding: 5px 10px; cursor: pointer; border-radius: 5px; }
.cv-{{ section.id }} .anchor { text-decoration: none; }
.cv-{{ section.id }} .quantity-wrapper { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 5px; }
.cv-{{ section.id }} .quantity-decrease, .cv-{{ section.id }} .quantity-increase { background-color: ; border: none; padding: 5px; cursor: pointer; font-weight: bold; }
.cv-{{ section.id }} .quantity-selector { height: 32px; background: #49ad91; color:white; width: 40px; text-align: right; border: 1px solid #ccc; }
@media (max-width: 768px){
.cv-{{ section.id }} .quantity-selector { text-align:center; }
.cv-{{ section.id }} .reel-product img { left: 63px; }
}
.cv-{{ section.id }} .variant-selector {width: 60%;padding: 10px;font-size: 14px;background-color: #f6f6f6;border: 1px solid #ccc;border-radius: 5px;color: #333;cursor: pointer;appearance: none; -webkit-appearance: none; -moz-appearance: none; text-align: left; outline: none; transition: border-color 0.3s ease, background-color 0.3s ease;}
.cv-{{ section.id }} .variant-selector:hover {border-color: #49ad91; background-color: #e9f7f3;}
.cv-{{ section.id }} .variant-selector:focus { border-color: #49ad91; background-color: #e9f7f3; outline: none;}
</style>
<script>
$(document).ready(function(){
$(‘.variant-selector’).on(‘change’, function() {
const selectedVariantId = $(this).val();
$(‘.variant-id’).val(selectedVariantId);
});
$(‘.quantity-wrapper’).each(function() {
const $wrapper = $(this);
const $input = $wrapper.find(‘.quantity-selector’);
const $decreaseBtn = $wrapper.find(‘.quantity-decrease’);
const $increaseBtn = $wrapper.find(‘.quantity-increase’);
$decreaseBtn.on(‘click’, function() {
let value = parseInt($input.val());
if (value > 1) {
$input.val(value – 1);
}
});
$increaseBtn.on(‘click’, function() {
let value = parseInt($input.val());
if (!isNaN(value)) {
$input.val(value + 1);
} else {
$input.val(1);
}
});
$input.on(‘input’, function() {
let value = parseInt($input.val());
if (isNaN(value) || value < 1) {
$input.val(1);
}
});
});
$(‘.slider’).slick({
infinite: true,
dots: true,
slidesToShow: 5,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
}
]
});
});
</script>
5. Save changes and open your Theme Customizer.
6.Add the Reels Section, upload your video, select a product, and customize the design.
7. Save and preview — your store now has a fully functional Shopify Reels Section!
Conclusion
The Shopify Reels Section is not just a design upgrade — it’s a sales booster. By combining product videos, add-to-cart buttons, and customization options, this section helps increase engagement, trust, and conversions.
If you’re serious about growing your Shopify store in 2025, start adding video content with Reels Section today.
👉 Need help with setup? Contact me for a custom Shopify development service.
