The Shoppable Video section allows you to display videos with embedded products that customers can purchase directly. This interactive feature combines video content with e-commerce functionality, increasing engagement and conversions.
Manual Installation Step
Access Shopify Admin
Go to your Shopify admin panel
Navigate to Online Store → Themes
Edit Current Theme
Click Actions → Edit code
In the left sidebar, find Sections folder
Create New Section
Click “Add a new section”
Name the file:
shoppable-video.liquidCopy the entire code from the provided file and paste it here
Click Save
Add to Your Homepage
Go back to Themes → Customize
Click Add section
Search for “Shoppable video”
Add it to your desired location
{% comment %}
---------------------------------------------------------
Copyright © 2026 Section Store. All rights reserved.
---------------------------------------------------------
{% endcomment %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
{%- liquid
assign padding_horizontal = section.settings.padding_horizontal
assign padding_horizontal_mobile = section.settings.padding_horizontal_mobile
assign padding_top = section.settings.padding_top
assign padding_bottom = section.settings.padding_bottom
assign border_color = section.settings.border_color
assign border_thickness = section.settings.border_thickness
assign margin_top = section.settings.margin_top
assign margin_bottom = section.settings.margin_bottom
assign background_color = section.settings.background_color
assign background_gradient = section.settings.background_gradient
assign full_width = section.settings.full_width
assign content_width = section.settings.content_width
assign lazy = section.settings.lazy
assign heading = section.settings.heading
assign heading_size = section.settings.heading_size
assign heading_size_mobile = section.settings.heading_size_mobile
assign heading_color = section.settings.heading_color
assign heading_custom = section.settings.heading_custom
assign heading_font = section.settings.heading_font
assign heading_height = section.settings.heading_height
assign heading_align = section.settings.heading_align
assign heading_align_mobile = section.settings.heading_align_mobile
assign slider_view = section.settings.slider_view
assign slider_view_mobile = section.settings.slider_view_mobile
assign slider_gap = section.settings.slider_gap
assign slider_gap_mobile = section.settings.slider_gap_mobile
assign slider_mt = section.settings.slider_mt
assign card_radius = section.settings.card_radius
assign card_border_thickness = section.settings.card_border_thickness
assign card_border_color = section.settings.card_border_color
assign card_bg_color = section.settings.card_bg_color
assign card_shadow = section.settings.card_shadow
assign card_shadow_color = section.settings.card_shadow_color
assign video_ratio = section.settings.video_ratio
assign video_ratio_mobile = section.settings.video_ratio_mobile
assign video_overlay = section.settings.video_overlay
assign video_overlay_color = section.settings.video_overlay_color
assign arrow_bg_color = section.settings.arrow_bg_color
assign arrow_border_color = section.settings.arrow_border_color
assign arrow_icon_color = section.settings.arrow_icon_color
assign button = section.settings.button
assign button_soldout = section.settings.button_soldout
assign button_size = section.settings.button_size
assign button_size_mobile = section.settings.button_size_mobile
assign button_color = section.settings.button_color
assign button_hover_color = section.settings.button_hover_color
assign button_custom = section.settings.button_custom
assign button_font = section.settings.button_font
assign button_height = section.settings.button_height
assign button_padding_vertical = section.settings.button_padding_vertical
assign button_padding_vertical_mobile = section.settings.button_padding_vertical_mobile
assign button_padding_horizontal = section.settings.button_padding_horizontal
assign button_padding_horizontal_mobile = section.settings.button_padding_horizontal_mobile
assign button_bg_color = section.settings.button_bg_color
assign button_bg_hover_color = section.settings.button_bg_hover_color
assign reload_after_adding = section.settings.reload_after_adding
assign redirect_after_adding = section.settings.redirect_after_adding
assign image_border_color = section.settings.image_border_color
assign image_border_thickness = section.settings.image_border_thickness
assign image_radius = section.settings.image_radius
assign image_width = section.settings.image_width
assign image_width_mobile = section.settings.image_width_mobile
assign title_size = section.settings.title_size
assign title_size_mobile = section.settings.title_size_mobile
assign title_color = section.settings.title_color
assign title_custom = section.settings.title_custom
assign title_font = section.settings.title_font
assign title_height = section.settings.title_height
assign title_uppercase = section.settings.title_uppercase
assign price_size = section.settings.price_size
assign price_size_mobile = section.settings.price_size_mobile
assign price_color = section.settings.price_color
assign price_custom = section.settings.price_custom
assign price_font = section.settings.price_font
assign price_height = section.settings.price_height
assign option_size = section.settings.option_size
assign option_size_mobile = section.settings.option_size_mobile
assign option_color = section.settings.option_color
assign option_custom = section.settings.option_custom
assign option_font = section.settings.option_font
assign option_height = section.settings.option_height
assign option_mt = section.settings.option_mt
assign variants_price_size = section.settings.variants_price_size
assign variants_price_size_mobile = section.settings.variants_price_size_mobile
assign variants_price_color = section.settings.variants_price_color
assign variants_price_custom = section.settings.variants_price_custom
assign variants_price_font = section.settings.variants_price_font
assign variants_price_height = section.settings.variants_price_height
assign variants_price_mt = section.settings.variants_price_mt
assign variants_price_align = section.settings.variants_price_align
assign variants_price_align_mobile = section.settings.variants_price_align_mobile
assign modal_radius = section.settings.modal_radius
assign modal_border_thickness = section.settings.modal_border_thickness
assign modal_width = section.settings.modal_width
assign modal_width_mobile = section.settings.modal_width_mobile
assign modal_overlay = section.settings.modal_overlay
assign modal_border_color = section.settings.modal_border_color
assign close_size = section.settings.close_size
assign close_size_mobile = section.settings.close_size_mobile
assign close_radius = section.settings.close_radius
assign close_border_thickness = section.settings.close_border_thickness
assign close_bg_color = section.settings.close_bg_color
assign close_border_color = section.settings.close_border_color
assign close_icon_color = section.settings.close_icon_color
assign buttons_size = section.settings.buttons_size
assign buttons_size_mobile = section.settings.buttons_size_mobile
assign buttons_radius = section.settings.buttons_radius
assign buttons_border_thickness = section.settings.buttons_border_thickness
assign buttons_bg_color = section.settings.buttons_bg_color
assign buttons_border_color = section.settings.buttons_border_color
assign buttons_icon_color = section.settings.buttons_icon_color
assign modal_video_radius = section.settings.modal_video_radius
assign modal_video_border_thickness = section.settings.modal_video_border_thickness
assign modal_video_border_color = section.settings.modal_video_border_color
assign modal_video_ratio = section.settings.modal_video_ratio
assign modal_video_ratio_mobile = section.settings.modal_video_ratio_mobile
assign modal_heading_size = section.settings.modal_heading_size
assign modal_heading_size_mobile = section.settings.modal_heading_size_mobile
assign modal_heading_color = section.settings.modal_heading_color
assign modal_heading_custom = section.settings.modal_heading_custom
assign modal_heading_font = section.settings.modal_heading_font
assign modal_heading_height = section.settings.modal_heading_height
assign modal_heading_align = section.settings.modal_heading_align
assign modal_heading_align_mobile = section.settings.modal_heading_align_mobile
assign modal_text_size = section.settings.modal_text_size
assign modal_text_size_mobile = section.settings.modal_text_size_mobile
assign modal_text_color = section.settings.modal_text_color
assign modal_text_custom = section.settings.modal_text_custom
assign modal_text_font = section.settings.modal_text_font
assign modal_text_height = section.settings.modal_text_height
assign modal_text_align = section.settings.modal_text_align
assign modal_text_align_mobile = section.settings.modal_text_align_mobile
assign modal_text_mt = section.settings.modal_text_mt
assign modal_content_bg_color = section.settings.modal_content_bg_color
assign use_modal_product = section.settings.use_modal_product
assign modal_button = section.settings.modal_button
assign modal_button_soldout = section.settings.modal_button_soldout
assign modal_button_size = section.settings.modal_button_size
assign modal_button_size_mobile = section.settings.modal_button_size_mobile
assign modal_button_color = section.settings.modal_button_color
assign modal_button_hover_color = section.settings.modal_button_hover_color
assign modal_button_custom = section.settings.modal_button_custom
assign modal_button_font = section.settings.modal_button_font
assign modal_button_radius = section.settings.modal_button_radius
assign modal_button_border_thickness = section.settings.modal_button_border_thickness
assign modal_button_border_color = section.settings.modal_button_border_color
assign modal_button_border_hover_color = section.settings.modal_button_border_hover_color
assign modal_button_bg_color = section.settings.modal_button_bg_color
assign modal_button_bg_hover_color = section.settings.modal_button_bg_hover_color
assign modal_button_align_mobile = section.settings.modal_button_align_mobile
assign modal_button_align = section.settings.modal_button_align
assign modal_button_mt = section.settings.modal_button_mt
assign modal_image_radius = section.settings.modal_image_radius
assign modal_image_border_thickness = section.settings.modal_image_border_thickness
assign modal_image_border_color = section.settings.modal_image_border_color
assign modal_image_width = section.settings.modal_image_width
assign modal_image_width_mobile = section.settings.modal_image_width_mobile
assign modal_title_size = section.settings.modal_title_size
assign modal_title_size_mobile = section.settings.modal_title_size_mobile
assign modal_title_color = section.settings.modal_title_color
assign modal_title_custom = section.settings.modal_title_custom
assign modal_title_font = section.settings.modal_title_font
assign modal_title_height = section.settings.modal_title_height
assign modal_title_uppercase = section.settings.modal_title_uppercase
assign modal_price_size = section.settings.modal_price_size
assign modal_price_size_mobile = section.settings.modal_price_size_mobile
assign modal_price_color = section.settings.modal_price_color
assign modal_price_custom = section.settings.modal_price_custom
assign modal_price_font = section.settings.modal_price_font
assign modal_price_height = section.settings.modal_price_height
-%}
{%- style -%}
{{ heading_font | font_face: font_display: 'swap' }}
{{ button_font | font_face: font_display: 'swap' }}
{{ title_font | font_face: font_display: 'swap' }}
{{ price_font | font_face: font_display: 'swap' }}
{{ option_font | font_face: font_display: 'swap' }}
{{ select_font | font_face: font_display: 'swap' }}
{{ variants_price_font | font_face: font_display: 'swap' }}
{{ modal_heading_font | font_face: font_display: 'swap' }}
{{ modal_text_font | font_face: font_display: 'swap' }}
{{ modal_button_font | font_face: font_display: 'swap' }}
{{ modal_title_font | font_face: font_display: 'swap' }}
{{ modal_price_font | font_face: font_display: 'swap' }}
.section-{{ section.id }} {
border-top: solid {{ border_color }} {{ border_thickness }}px;
border-bottom: solid {{ border_color }} {{ border_thickness }}px;
margin-top: {{ margin_top | times: 0.75 | round: 0 }}px;
margin-bottom: {{ margin_bottom | times: 0.75 | round: 0 }}px;
}
.section-{{ section.id }}-settings {
margin: 0 auto;
padding-top: {{ padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ padding_bottom | times: 0.75 | round: 0 }}px;
padding-left: {{ padding_horizontal_mobile }}rem;
padding-right: {{ padding_horizontal_mobile }}rem;
}
.video-heading-{{ section.id }} {
text-align: {{ heading_align_mobile }};
}
.video-heading-{{ section.id }} * {
margin: 0;
font-size: {{ heading_size_mobile }}px;
color: {{ heading_color }};
line-height: {{ heading_height }}%;
text-transform: unset;
}
.video-slider-{{ section.id }} {
margin-left: -{{ padding_horizontal_mobile }}rem !important;
margin-right: -{{ padding_horizontal_mobile }}rem !important;
padding-left: {{ padding_horizontal_mobile }}rem !important;
padding-right: {{ padding_horizontal_mobile }}rem !important;
margin-top: {{ slider_mt | times: 0.75 | round: 0 }}px;
}
.video-slider-{{ section.id }} .swiper-wrapper {
align-items: stretch !important;
}
.video-slide-{{ section.id }} {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: {{ card_radius }}px;
border: {{ card_border_thickness }}px solid {{ card_border_color }};
background-color: {{ card_bg_color }};
box-sizing: border-box !important;
height: auto !important;
text-decoration: none;
overflow: hidden;
will-change: transform;
}
.video-top-{{ section.id }} {
overflow: hidden;
position: relative;
z-index: 0;
cursor: pointer;
background-image: linear-gradient(to top, #121212, #252525, #444444, #676767, #8b8b8b, #9e9e9e, #b1b1b1, #c5c5c5, #cbcbcb, #d0d0d0, #d6d6d6, #dcdcdc);
animation: pulse 0.5s infinite alternate;
}
@keyframes pulse {
0% {
background-size: 100% 100%;
}
100% {
background-size: 120% 120%;
}
}
.video-top-{{ section.id }}::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
cursor: pointer;
background-color: {{ video_overlay_color | hex_to_rgba: video_overlay }};
}
.video-top-{{ section.id }} video,
.video-top-{{ section.id }} iframe {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
box-shadow: none;
border: 0px;
}
.video-bottom-{{ section.id }} {
display: flex;
align-items: stretch;
flex: 1 1 0;
}
.video-bottom-{{ section.id }} .form {
flex: 1 1 auto;
}
.video-add-{{ section.id }} {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: {{ button_size_mobile }}px;
color: {{ button_color }};
line-height: {{ button_height }}%;
text-align: center;
text-transform: unset;
text-decoration: none;
padding: {{ button_padding_vertical_mobile }}px {{ button_padding_horizontal_mobile }}px;
background-color: {{ button_bg_color }};
border: 0px;
transition: all 0.25s ease 0s;
position: relative;
z-index: 2;
cursor: pointer;
}
.video-add-{{ section.id }}:hover {
color: {{ button_hover_color }};
background-color: {{ button_bg_hover_color }};
transition: all 0.25s ease 0s;
}
.video-arrow-{{ section.id }} {
flex: 0 0 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
background-color: {{arrow_bg_color}};
border-radius: 0px;
border: 0px;
box-shadow: none;
cursor: pointer;
border-left: 1px solid {{ arrow_border_color }};
}
.video-arrow-{{ section.id }} svg {
display: block;
width: 24px;
height: 24px;
}
.video-arrow-{{ section.id }} svg path {
fill: {{ arrow_icon_color }};
}
.video-product-{{ section.id }} {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: 1;
display: flex;
align-items: center;
gap: 10px;
padding: 5px;
will-change: transform;
}
.video-product-image-{{ section.id }} {
flex: 0 0 {{ image_width_mobile }}px;
height: {{ image_width_mobile }}px;
border-radius: {{ image_radius }}px;
border: {{ image_border_thickness }}px solid {{ image_border_color }};
overflow: hidden;
}
.video-product-image-{{ section.id }} img {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
}
.video-product-title-{{ section.id }} {
margin: 0px;
font-size: {{ title_size_mobile }}px;
color: {{ title_color }};
line-height: {{ title_height }}%;
text-transform: unset;
will-change: transform;
}
.video-product-price-{{ section.id }} {
margin: 0px;
font-size: {{ price_size_mobile }}px;
color: {{ price_color }};
line-height: {{ price_height }}%;
text-transform: uppercase;
margin-top: 3px;
will-change: transform;
}
.video-variants-{{ section.id }} {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: -1;
padding: 16px 12px;
border-radius: 10px;
background-color: #FFFFFF;
z-index: -1;
opacity: 0;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.video-variants-{{ section.id }}.active {
z-index: 1;
opacity: 1;
}
.video-option-{{ section.id }}:not(:first-child) {
margin-top: {{ option_mt | times: 0.75 | round: 0 }}px;
}
.video-option-name-{{ section.id }} {
margin: 0px;
font-size: {{ option_size_mobile }}px;
color: {{ option_color }};
line-height: {{ option_height }}%;
text-transform: uppercase;
}
.video-options-{{ section.id }} {
position: relative;
margin-top: 6px;
}
.video-options-{{ section.id }} > span {
pointer-events: none;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: calc(100% - 10px);
}
.video-options-{{ section.id }} > span svg {
stroke: unset;
fill: #121212;
}
.video-select-{{ section.id }} {
position: relative;
cursor: pointer;
height: 45px;
font-size: 14px;
line-height: 100%;
color: #646464;
font-weight: 500;
border: 1px solid #efefef;
border-radius: 6px;
background: #fafafa;
padding: 10px 30px 10px 10px;
width: 100%;
appearance: none;
outline: none;
box-shadow: none;
box-sizing: border-box;
}
.video-option-price-{{ section.id }} {
display: block;
margin: 0px;
width: 100%;
text-align: {{ variants_price_align_mobile }};
margin-top: {{ variants_price_mt | times: 0.75 | round: 0 }}px;
font-size: {{ variants_price_size_mobile }}px;
color: {{ variants_price_color }};
line-height: {{ variants_price_height }}%;
text-transform: uppercase;
}
.video-modal-{{ section.id }} {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
overflow-y: scroll;
pointer-events: none;
background: rgba(0, 0, 0, {{ modal_overlay | times: 0.01 }});
padding: 10px;
}
.video-modal-{{ section.id }}.active {
opacity: 1;
z-index: 100;
pointer-events: all;
transition: all 250ms ease-in 0s;
}
.video-modal-inner-{{ section.id }} {
position: relative;
width: 100%;
max-width: {{ modal_width_mobile }}%;
max-height: 95vh;
}
.video-modal-slide-{{ section.id }} {
display: grid !important;
grid-template-columns: repeat(1, 1fr);
overflow: hidden;
border: {{ modal_border_thickness }}px solid {{ modal_border_color }};
border-radius: {{ modal_radius }}px;
box-sizing: border-box !important;
background-color: {{ modal_content_bg_color }};
}
.video-modal-close-{{ section.id }} {
display: flex;
justify-content: center;
align-items: center;
width: {{ close_size_mobile }}px;
height: {{ close_size_mobile }}px;
top: 10px !important;
right: 10px !important;
padding: 6px;
background-color: {{ close_bg_color | hex_to_rgba: 0.2 }};
backdrop-filter: blur(100px);
-webkit-backdrop-filter: blur(100px);
border-radius: {{ close_radius }}px;
border: 0px;
box-shadow: none;
border: {{ close_border_thickness }}px solid {{ close_border_color }};
cursor: pointer;
z-index: 99;
position: fixed;
margin: 0px;
}
.video-modal-close-{{ section.id }} svg {
fill: {{ close_icon_color }};
}
.video-modal-prev-{{ section.id }},
.video-modal-next-{{ section.id }} {
display: flex;
justify-content: center;
align-items: center;
width: {{ buttons_size_mobile }}px;
height: {{ buttons_size_mobile }}px;
cursor: pointer;
z-index: 99;
position: fixed;
margin: 0px;
top: 50%;
transform: translateY(-50%);
padding: 6px;
background-color: {{ buttons_bg_color | hex_to_rgba: 0.2 }};
backdrop-filter: blur(100px);
-webkit-backdrop-filter: blur(100px);
border-radius: {{ buttons_radius }}px;
border: 0px;
box-shadow: none;
border: {{ buttons_border_thickness }}px solid {{ buttons_border_color }};
}
.video-modal-prev-{{ section.id }}.swiper-button-disabled,
.video-modal-next-{{ section.id }}.swiper-button-disabled {
opacity: 0.3;
cursor: not-allowed;
}
.video-modal-prev-{{ section.id }} {
left: 20px;
}
.video-modal-next-{{ section.id }} {
right: 20px;
}
.video-modal-prev-{{ section.id }} svg,
.video-modal-next-{{ section.id }} svg {
width: 75%;
height: 75%;
fill: {{ buttons_icon_color }};
}
.video-modal-left-{{ section.id }} {
width: 100%;
border-radius: {{ modal_video_radius }}px;
border: {{ modal_video_border_thickness }}px solid {{ modal_video_border_color }};
overflow: hidden;
max-height: 75vh;
position: relative;
}
.video-modal-left-{{ section.id }} video,
.video-modal-left-{{ section.id }} iframe {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
box-shadow: none;
border: 0px;
}
.video-modal-left-{{ section.id }}:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
cursor: pointer;
z-index: 1;
}
.video-modal-right-{{ section.id }} {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
padding: 16px;
background-color: {{ modal_content_bg_color }};
overflow-y: auto;
}
.video-modal-heading-{{ section.id }} {
text-align: {{ modal_heading_align_mobile }};
}
.video-modal-heading-{{ section.id }} * {
margin: 0;
font-size: {{ modal_heading_size_mobile }}px;
color: {{ modal_heading_color }};
line-height: {{ modal_heading_height }}%;
text-transform: unset;
}
.video-modal-text-{{ section.id }} {
text-align: {{ modal_text_align_mobile }};
margin-top: {{ modal_text_mt | times: 0.75 | round: 0 }}px;
}
.video-modal-text-{{ section.id }} * {
margin: 0;
font-size: {{ modal_text_size_mobile }}px;
color: {{ modal_text_color }};
line-height: {{ modal_text_height }}%;
text-transform: unset;
}
.video-modal-add-{{ section.id }} {
margin: 0px;
margin-top: {{ modal_button_mt | times: 0.75 | round: 0 }}px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: {{ modal_button_size_mobile }}px;
color: {{ modal_button_color }};
line-height: 100%
text-align: center;
text-transform: unset;
text-decoration: none;
padding: 12px;
border-radius: {{ modal_button_radius }}px;
border: {{ modal_button_border_thickness }}px solid {{ modal_button_border_color }};
background-color: {{ modal_button_bg_color }};
transition: all 0.25s ease 0s;
position: relative;
z-index: 2;
cursor: pointer;
}
.video-modal-add-{{ section.id }}:hover {
transition: all 0.25s ease 0s;
border: {{ modal_button_border_thickness }}px solid {{ modal_button_border_hover_color }};
background-color: {{ modal_button_bg_hover_color }};
color: {{ modal_button_hover_color }};
}
.video-modal-product-{{ section.id }} {
display: flex;
gap: 20px;
align-items: center;
}
.video-modal-product-image-{{ section.id }} {
flex: 0 0 {{ modal_image_width_mobile }}px;
height: {{ modal_image_width_mobile }}px;
border-radius: {{ modal_image_radius }}px;
border: {{ modal_image_border_thickness }}px solid {{ modal_image_border_color }};
overflow: hidden;
}
.video-modal-product-image-{{ section.id }} img {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
}
.video-modal-product-title-{{ section.id }} {
margin: 0px;
font-size: {{ modal_title_size_mobile }}px;
color: {{ modal_title_color }};
line-height: {{ modal_title_height }}%;
text-transform: unset;
}
.video-modal-product-price-{{ section.id }} {
margin: 0px;
margin-top: 6px;
font-size: {{ modal_price_size_mobile }}px;
color: {{ modal_price_color }};
line-height: {{ modal_price_height }}%;
text-transform: uppercase;
}
.video-modal-option-{{ section.id }} {
margin-top: {{ modal_option_mt | times: 0.75 | round: 0 }}px;
}
.video-modal-action-{{ section.id }} {
position: absolute;
top: 20px;
left: 20px;
width: 35px;
height: 35px;
border-radius: 50%;
background: rgba(157,157,157,.5);
display: flex !important;
align-items: center;
justify-content: center;
transition: all 0.3s ease 0s;
cursor: pointer;
-webkit-appearance: none;
transition: all 0.25s ease 0s;
z-index: 2;
}
.video-modal-action-{{ section.id }} svg {
height: 20px;
width: 20px;
}
.video-modal-action-{{ section.id }} svg {
fill: #FFFFFF;
}
.video-modal-action-{{ section.id }} .video-modal-unmute-{{ section.id }} {
display: none;
}
.video-modal-action-{{ section.id }}.active .video-modal-unmute-{{ section.id }} {
display: block;
}
.video-modal-action-{{ section.id }}.active .video-modal-mute-{{ section.id }} {
display: none;
}
@media(min-width: 1024px) {
.section-{{ section.id }} {
margin-top: {{ margin_top }}px;
margin-bottom: {{ margin_bottom }}px;
}
.section-{{ section.id }}-settings {
padding: 0 5rem;
padding-top: {{ padding_top }}px;
padding-bottom: {{ padding_bottom }}px;
padding-left: {{ padding_horizontal }}rem;
padding-right: {{ padding_horizontal }}rem;
}
.video-heading-{{ section.id }} {
text-align: {{ heading_align }};
}
.video-heading-{{ section.id }} * {
font-size: {{ heading_size }}px;
}
.video-slider-{{ section.id }} {
margin-left: 0rem !important;
margin-right: 0rem !important;
padding-left: 0rem !important;
padding-right: 0rem !important;
margin-top: {{ slider_mt }}px;
}
.video-add-{{ section.id }} {
font-size: {{ button_size }}px;
padding: {{ button_padding_vertical }}px {{ button_padding_horizontal }}px;
}
.video-arrow-{{ section.id }} svg {
width: 24px;
height: 24px;
}
.video-arrow-{{ section.id }} {
flex: 0 0 46px;
height: 46px;
}
.video-product-image-{{ section.id }} {
flex: 0 0 {{ image_width }}px;
height: {{ image_width }}px;
}
.video-product-title-{{ section.id }} {
font-size: {{ title_size }}px;
}
.video-product-price-{{ section.id }} {
font-size: {{ price_size }}px;
}
.video-option-{{ section.id }}:not(:first-child) {
margin-top: {{ option_mt }}px;
}
.video-option-name-{{ section.id }} {
font-size: {{ option_size }}px;
}
.video-select-{{ section.id }} {
font-size: {{ select_size }}px;
}
.video-option-price-{{ section.id }} {
text-align: {{ variants_price_align }};
margin-top: {{ variants_price_mt }}px;
font-size: {{ variants_price_size }}px;
}
.video-modal-{{ section.id }} {
padding: 100px;
}
.video-modal-inner-{{ section.id }} {
max-width: {{ modal_width }}px;
}
.video-modal-slide-{{ section.id }} {
grid-template-columns: repeat(2, 1fr);
}
.video-modal-close-{{ section.id }} {
width: {{ close_size }}px;
height: {{ close_size }}px;
top: 20px !important;
right: 20px !important;
}
.video-modal-prev-{{ section.id }},
.video-modal-next-{{ section.id }} {
width: {{ buttons_size }}px;
height: {{ buttons_size }}px;
}
.video-modal-left-{{ section.id }} {
max-height: calc(95vh - 100px);
}
.video-modal-heading-{{ section.id }} {
text-align: {{ modal_heading_align }};
}
.video-modal-heading-{{ section.id }} * {
font-size: {{ modal_heading_size }}px;
}
.video-modal-text-{{ section.id }} {
text-align: {{ modal_text_align }};
margin-top: {{ modal_text_mt }}px;
}
.video-modal-text-{{ section.id }} * {
font-size: {{ modal_text_size }}px;
}
.video-modal-product-image-{{ section.id }} {
flex: 0 0 {{ modal_image_width }}px;
height: {{ modal_image_width }}px;
}
.video-modal-product-title-{{ section.id }} {
font-size: {{ title_size }}px;
}
.video-modal-product-price-{{ section.id }} {
font-size: {{ price_size }}px;
}
.video-modal-add-{{ section.id }} {
margin-top: {{ modal_button_mt }}px;
font-size: {{ modal_button_size }}px;
padding: 12px;
}
.video-modal-option-{{ section.id }} {
margin-top: {{ modal_option_mt }}px;
}
.video-modal-product-title-{{ section.id }} {
font-size: {{ modal_title_size }}px;
}
.video-modal-product-price-{{ section.id }} {
font-size: {{ modal_price_size }}px;
}
}
{%- endstyle -%}
{% unless full_width %}
<style>
.section-{{ section.id }}-settings {
max-width: {{ content_width }}px;
}
</style>
{% endunless %}
{% if heading_custom %}
<style>
.video-heading-{{ section.id }} * {
font-family: {{ heading_font.family }}, {{ heading_font.fallback_families }};
font-weight: {{ heading_font.weight }};
font-style: {{ heading_font.style }};
}
</style>
{% endif %}
{% if button_custom %}
<style>
.video-add-{{ section.id }} {
font-family: {{ button_font.family }}, {{ button_font.fallback_families }};
font-weight: {{ button_font.weight }};
font-style: {{ button_font.style }};
}
</style>
{% endif %}
{% if title_custom %}
<style>
.video-product-title-{{ section.id }} {
font-family: {{ title_font.family }}, {{ title_font.fallback_families }};
font-weight: {{ title_font.weight }};
font-style: {{ title_font.style }};
}
</style>
{% endif %}
{% if price_custom %}
<style>
.video-product-price-{{ section.id }} {
font-family: {{ price_font.family }}, {{ price_font.fallback_families }};
font-weight: {{ price_font.weight }};
font-style: {{ price_font.style }};
}
</style>
{% endif %}
{% if option_custom %}
<style>
.video-option-name-{{ section.id }} {
font-family: {{ option_font.family }}, {{ option_font.fallback_families }};
font-weight: {{ option_font.weight }};
font-style: {{ option_font.style }};
}
</style>
{% endif %}
{% if select_custom %}
<style>
.video-select-{{ section.id }} {
font-family: {{ select_font.family }}, {{ select_font.fallback_families }};
font-weight: {{ select_font.weight }};
font-style: {{ select_font.style }};
}
</style>
{% endif %}
{% if variants_price_custom %}
<style>
.video-option-price-{{ section.id }} {
font-family: {{ variants_price_font.family }}, {{ variants_price_font.fallback_families }};
font-weight: {{ variants_price_font.weight }};
font-style: {{ variants_price_font.style }};
}
</style>
{% endif %}
{% if modal_heading_custom %}
<style>
.video-modal-heading-{{ section.id }} {
font-family: {{ modal_heading_font.family }}, {{ modal_heading_font.fallback_families }};
font-weight: {{ modal_heading_font.weight }};
font-style: {{ modal_heading_font.style }};
}
</style>
{% endif %}
{% if modal_text_custom %}
<style>
.video-modal-text-{{ section.id }} {
font-family: {{ modal_text_font.family }}, {{ modal_text_font.fallback_families }};
font-weight: {{ modal_text_font.weight }};
font-style: {{ modal_text_font.style }};
}
</style>
{% endif %}
{% if modal_button_custom %}
<style>
.video-modal-add-{{ section.id }} {
font-family: {{ modal_button_font.family }}, {{ modal_button_font.fallback_families }};
font-weight: {{ modal_button_font.weight }};
font-style: {{ modal_button_font.style }};
}
</style>
{% endif %}
{% if modal_title_custom %}
<style>
.video-modal-product-title-{{ section.id }} {
font-family: {{ modal_title_font.family }}, {{ modal_title_font.fallback_families }};
font-weight: {{ modal_title_font.weight }};
font-style: {{ modal_title_font.style }};
}
</style>
{% endif %}
{% if modal_price_custom %}
<style>
.video-modal-product-price-{{ section.id }} {
font-family: {{ modal_price_font.family }}, {{ modal_price_font.fallback_families }};
font-weight: {{ modal_price_font.weight }};
font-style: {{ modal_price_font.style }};
}
</style>
{% endif %}
{% if card_shadow %}
<style>
.video-slide-{{ section.id }} {
box-shadow: 0px 0px 10px {{ card_shadow_color | hex_to_rgba: 0.25 }} !important;
}
.video-slider-{{ section.id }} {
padding: 10px !important;
}
</style>
{% endif %}
{% if video_ratio_mobile == 'portrait' %}
<style>
.video-top-{{ section.id }} {
aspect-ratio: 9.6/16;
}
</style>
{% elsif video_ratio_mobile == 'landscape' %}
<style>
.video-top-{{ section.id }} {
aspect-ratio: 12/7;
}
</style>
{% elsif video_ratio_mobile == 'square' %}
<style>
.video-top-{{ section.id }} {
aspect-ratio: 12/12;
}
</style>
{% endif %}
{% if video_ratio == 'portrait' %}
<style>
@media(min-width: 1024px) {
.video-top-{{ section.id }} {
aspect-ratio: 9.6/16;
}
}
</style>
{% elsif video_ratio == 'landscape' %}
<style>
@media(min-width: 1024px) {
.video-top-{{ section.id }} {
aspect-ratio: 12/7;
}
}
</style>
{% elsif video_ratio == 'square' %}
<style>
@media(min-width: 1024px) {
.video-top-{{ section.id }} {
aspect-ratio: 12/12;
}
}
</style>
{% else %}
<style>
@media(min-width: 1024px) {
.video-top-{{ section.id }} {
aspect-ratio: auto;
}
}
</style>
{% endif %}
{% if modal_video_ratio_mobile == 'portrait' %}
<style>
.video-modal-left-{{ section.id }} {
aspect-ratio: 9.6/16;
}
</style>
{% elsif modal_video_ratio_mobile == 'landscape' %}
<style>
.video-modal-left-{{ section.id }} {
aspect-ratio: 12/7;
}
</style>
{% elsif modal_video_ratio_mobile == 'square' %}
<style>
.video-modal-left-{{ section.id }} {
aspect-ratio: 12/12;
}
</style>
{% else %}
<style>
.video-modal-left-{{ section.id }} {
aspect-ratio: auto;
}
</style>
{% endif %}
{% if modal_video_ratio == 'portrait' %}
<style>
@media(min-width: 1024px) {
.video-modal-left-{{ section.id }} {
aspect-ratio: 9.6/16;
}
}
</style>
{% elsif modal_video_ratio == 'landscape' %}
<style>
@media(min-width: 1024px) {
.video-modal-left-{{ section.id }} {
aspect-ratio: 12/7;
}
}
</style>
{% elsif modal_video_ratio == 'square' %}
<style>
@media(min-width: 1024px) {
.video-modal-left-{{ section.id }} {
aspect-ratio: 12/12;
}
}
</style>
{% else %}
<style>
@media(min-width: 1024px) {
.video-modal-left-{{ section.id }} {
aspect-ratio: auto;
}
}
</style>
{% endif %}
{% if modal_button_align_mobile == 'center' %}
<style>
.video-modal-add-{{ section.id }} {
margin-left: auto;
margin-right: auto;
}
</style>
{% elsif modal_button_align_mobile == 'right' %}
<style>
.video-modal-add-{{ section.id }} {
margin-left: auto;
}
</style>
{% endif %}
{% if modal_button_align == 'center' %}
<style>
@media(min-width: 1024px) {
.video-modal-add-{{ section.id }} {
margin-left: auto !important;
margin-right: auto !important;
}
}
</style>
{% elsif modal_button_align == 'right' %}
<style>
@media(min-width: 1024px) {
.video-modal-add-{{ section.id }} {
margin-left: auto !important;
margin-right: 0px !important;
}
}
</style>
{% else %}
<style>
@media(min-width: 1024px) {
.video-modal-add-{{ section.id }} {
margin-left: 0px !important;
margin-right: 0px !important;
}
}
</style>
{% endif %}
{% if title_uppercase %}
<style>
.video-product-title-{{ section.id }} {
text-transform: uppercase;
}
</style>
{% endif %}
{% if modal_title_uppercase %}
<style>
.video-modal-product-title-{{ section.id }} {
text-transform: uppercase;
}
</style>
{% endif %}
<style>
.video-modal-add-{{ section.id }} {
max-width: 100%;
}
</style>
{% comment %}PREVIEW{% endcomment %}
<style>
.video-slider-{{ section.id }}.preview .swiper-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
gap: {{ slider_gap }}px;
}
.video-slider-{{ section.id }}.preview .video-slide-{{ section.id }} {
width: 100%;
}
@media(min-width: 1024px) {
.video-slider-{{ section.id }}.preview .video-slide-{{ section.id }} {
width: calc(20% - {{ slider_gap }}px);
}
.video-slider-{{ section.id }}.preview .video-slide-{{ section.id }}:not(:first-child) {
margin-left: {{ slider_gap }}px;
}
}
</style>
<div
class="section-{{ section.id }} video-{{ section.id }}" id="home-ss-shopable-video"
style="background-color:{{ background_color }}; background-image: {{ background_gradient }};"
>
<div class="section-{{ section.id }}-settings">
{% if heading != blank %}
<div class="video-heading-{{ section.id }}">{{ heading }}</div>
{% endif %}
<div
class="video-slider-{{ section.id }} swiper preview"
data-gap="{{ slider_gap }}"
data-gap-mobile="{{ slider_gap_mobile }}"
data-view="{{ slider_view }}"
data-view-mobile="{{ slider_view_mobile }}"
>
<div class="swiper-wrapper">
{% for block in section.blocks %}
<div class="video-slide-{{ section.id }} swiper-slide">
<div class="video-top-{{ section.id }}" id="{{ section.id }}">
{% assign video_id = block.settings.video.id | default: block.settings.video_url.id %}
{%- if block.settings.video == null and block.settings.video_url != null -%}
{% assign loop = '&loop=1&playlist=' | append: video_id %}
{%- if block.settings.video_url.type == 'youtube' -%}
<iframe
{% if lazy %}
data-
{% endif -%}
src="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&mute={% if block.settings.autoplay %}1{% else %}0{% endif %}&autoplay={% if block.settings.autoplay %}1{% else %}0{% endif %}&controls=0{{ loop }}"
class="lazy"
allow="autoplay; encrypted-media"
allowfullscreen
{% if lazy %}
loading="lazy"
{% endif %}
title="Fixed Video"
></iframe>
{%- else -%}
<iframe
{% if lazy %}
data-
{% endif -%}
src="https://player.vimeo.com/video/{{ video_id }}?enablejsapi=1&mute=1&muted=1&autoplay={% if block.settings.autoplay %}1{% else %}0{% endif %}&controls=0&showinfo=0{{ loop }}"
class="lazy"
allow="autoplay; encrypted-media"
allowfullscreen
{% if lazy %}
loading="lazy"
{% endif %}
title="Fixed Video"
></iframe>
{% endif %}
{% else %}
{% assign poster_url = block.settings.poster | image_url %}
{% assign placeholder_video = 'https://cdn.shopify.com/videos/c/o/v/fbb140fd46e3429eba459e1549dbbe38.mp4' %}
<video
{% if lazy %}
data-
{% endif -%}
src="{% if block.settings.video != blank %}{{ block.settings.video.sources[1].url }}{% else %}{{ placeholder_video }}{% endif %}"
muted
playsinline
{% if block.settings.autoplay %}
autoplay
{% endif %}
preload="none"
class="lazy"
loop
poster="{{ poster_url }}"
></video>
{% endif %}
{% if block.settings.product != blank %}
<div class="video-product-{{ section.id }}">
<div class="video-product-image-{{ section.id }}">
{% if block.product.selected_or_first_available_variant.featured_image != blank %}
<img
src="{{ block.settings.product.selected_or_first_available_variant.featured_image | image_url }}"
alt="{{ block.settings.product.selected_or_first_available_variant.featured_image.alt }}"
{% if lazy %}
lazy="loading"
{% endif %}
data-shoppable-image--{{ forloop.index }}
>
{% else %}
<img
src="{{ block.settings.product.featured_image | image_url }}"
alt="{{ block.settings.product.featured_image.alt }}"
{% if lazy %}
lazy="loading"
{% endif %}
data-shoppable-image--{{ forloop.index }}
>
{% endif %}
</div>
<div clas="video-product-info-{{ section.id }}">
<p class="video-product-title-{{ section.id }}">{{ block.settings.product.title }}</p>
<p class="video-product-price-{{ section.id }}" data-shoppable-price--{{ forloop.index }}>
{{ block.settings.product.price | money }}
</p>
</div>
</div>
{% endif %}
{% if block.settings.use_variants %}
<div class="video-variants-{{ section.id }}">
{%- unless block.settings.product.has_only_default_variant -%}
{%- for option in block.settings.product.options_with_values -%}
<div class="video-option-{{ section.id }}">
<p class="video-option-name-{{ section.id }}">{{ option.name }}:</p>
<div class="video-options-{{ section.id }}">
<select
class="video-select-{{ section.id }}"
data-shoppable-select--{{ block.id | replace: '-', '' }}
>
{%- for value in option.values -%}
<option value="{{ value }}">{{ value }}</option>
{% endfor %}
</select>
<span>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokelinejoin="2"
strokelinecap="round"
class="feather feather-chevron-down"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</span>
</div>
</div>
{%- endfor -%}
{% endunless %}
<p class="video-option-price-{{ section.id }}" data-shoppable-option-price--{{ forloop.index }}>
{{ block.settings.product.price | money }}
</p>
</div>
{% endif %}
</div>
<div class="video-bottom-{{ section.id }}">
{%- assign product_form_id = 'product-form-' | append: block.id -%}
{% if block.settings.product != blank %}
{%- form 'product',
block.settings.product,
id: product_form_id,
class: 'form',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
<input
type="hidden"
name="id"
value="{{ block.settings.product.selected_or_first_available_variant.id }}"
data-shoppable-input--{{ forloop.index }}
>
<button
type="submit"
class="video-add-{{ section.id }}"
data-shoppable-button--{{ forloop.index }}
{% unless block.settings.product.selected_or_first_available_variant.available %}
disabled
{% endunless %}
>
{% if block.settings.product.selected_or_first_available_variant.available -%}
{{- button -}}
{%- else -%}
{{- button_soldout -}}
{%- endif %}
</button>
{%- endform -%}
{% else %}
<div class="form">
<button class="video-add-{{ section.id }}">{{ button }}</button>
</div>
{% endif %}
{% if block.settings.use_variants %}
<button class="video-arrow-{{ section.id }}">
<svg viewBox="0 0 32 32">
<rect width="32" height="32" fill="#fff" opacity="0"></rect><path fill="rgba(255, 255, 255, 1)" d="M16.7,20.67l0,0,7-7.71a1.2,1.2,0,0,0,0-1.57h0A1,1,0,0,0,23,11H9a.91.91,0,0,0-.72.35h0a1.2,1.2,0,0,0,0,1.57l7,7.75a.93.93,0,0,0,1.31.11A.52.52,0,0,0,16.7,20.67Z"></path>
</svg>
</button>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="video-modal-{{ section.id }}">
<div class="video-modal-inner-{{ section.id }}">
<div class="video-modal-slider-{{ section.id }} swiper">
<div class="swiper-wrapper">
{% for block in section.blocks %}
<div class="video-modal-slide-{{ section.id }} swiper-slide">
<div
class="video-modal-left-{{ section.id }}"
{% if block.settings.video != blank %}
data-video-src="{{ block.settings.video.sources[0].url }}"
{% endif %}
>
{% assign video_id = block.settings.video.id | default: block.settings.video_url.id %}
{%- if block.settings.video == null and block.settings.video_url != null -%}
{% assign loop = '&loop=1&playlist=' | append: video_id %}
{% assign autoplay = '&mute=1&autoplay=1' %}
{%- if block.settings.video_url.type == 'youtube' -%}
<iframe
{% if lazy %}
data-
{% endif -%}
src="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1{{ loop }}"
data-src1="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&mute=1{{ loop }}"
data-src2="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&autoplay=1{{ loop }}"
data-src3="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1{{ autoplay }}{{ loop }}"
class="lazy"
allow="autoplay; encrypted-media"
allowfullscreen
{% if lazy %}
loading="lazy"
{% endif %}
title="Fixed Video"
></iframe>
{%- else -%}
<iframe
{% if lazy %}
data-
{% endif -%}
src="https://player.vimeo.com/video/{{ video_id }}{{ loop }}"
data-src1="https://player.vimeo.com/video/{{ video_id }}?enablejsapi=1&mute=1{{ loop }}"
data-src2="https://player.vimeo.com/video/{{ video_id }}?enablejsapi=1&autoplay=1{{ loop }}"
data-src3="https://player.vimeo.com/video/{{ video_id }}{{ autoplay }}{{ loop }}"
class="lazy"
allow="autoplay; encrypted-media"
allowfullscreen
{% if lazy %}
loading="lazy"
{% endif %}
title="Fixed Video"
></iframe>
{% endif %}
{% else %}
{% assign poster_url = block.settings.poster | image_url %}
{% assign placeholder_video = 'https://cdn.shopify.com/videos/c/o/v/fbb140fd46e3429eba459e1549dbbe38.mp4' %}
<video
{% if lazy %}
data-
{% endif -%}
src="{% if block.settings.video != blank %}{{ block.settings.video.sources[1].url }}{% else %}{{ placeholder_video }}{% endif %}"
muted
playsinline
autoplay
preload="none"
loop
class="lazy"
poster="{{ poster_url }}"
></video>
{% endif %}
<div class="video-modal-action-{{ section.id }}">
<svg class="video-modal-mute-{{ section.id }}" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path><path d="M5.889 16H2a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h3.889l5.294-4.332a.5.5 0 0 1 .817.387v15.89a.5.5 0 0 1-.817.387L5.89 16zm14.525-4l3.536 3.536-1.414 1.414L19 13.414l-3.536 3.536-1.414-1.414L17.586 12 14.05 8.464l1.414-1.414L19 10.586l3.536-3.536 1.414 1.414L20.414 12z"></path>
</svg>
<svg class="video-modal-unmute-{{ section.id }}" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path><path d="M5.889 16H2a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h3.889l5.294-4.332a.5.5 0 0 1 .817.387v15.89a.5.5 0 0 1-.817.387L5.89 16zm13.517 4.134l-1.416-1.416A8.978 8.978 0 0 0 21 12a8.982 8.982 0 0 0-3.304-6.968l1.42-1.42A10.976 10.976 0 0 1 23 12c0 3.223-1.386 6.122-3.594 8.134zm-3.543-3.543l-1.422-1.422A3.993 3.993 0 0 0 16 12c0-1.43-.75-2.685-1.88-3.392l1.439-1.439A5.991 5.991 0 0 1 18 12c0 1.842-.83 3.49-2.137 4.591z"></path>
</svg>
</div>
</div>
<div class="video-modal-right-{{ section.id }}">
<div class="video-modal-right-info">
{% if block.settings.modal_heading != blank %}
<div class="video-modal-heading-{{ section.id }}">
{{ block.settings.modal_heading }}
</div>
{% endif %}
{% if block.settings.modal_text != blank %}
<div class="video-modal-text-{{ section.id }}">
{{ block.settings.modal_text }}
</div>
{% endif %}
</div>
{% if use_modal_product %}
<div class="video-modal-right-bottom-{{ section.id }}">
{% if block.settings.product != blank %}
<div class="video-modal-product-{{ section.id }}">
<div class="video-modal-product-image-{{ section.id }}">
{% if block.product.selected_or_first_available_variant.featured_image != blank %}
<img
src="{{ block.settings.product.selected_or_first_available_variant.featured_image | image_url }}"
alt="{{ block.settings.product.selected_or_first_available_variant.featured_image.alt }}"
{% if lazy %}
lazy="loading"
{% endif %}
data-shoppable-modal-image--{{ forloop.index }}
>
{% else %}
<img
src="{{ block.settings.product.featured_image | image_url }}"
alt="{{ block.settings.product.featured_image.alt }}"
{% if lazy %}
lazy="loading"
{% endif %}
data-shoppable-modal-image--{{ forloop.index }}
>
{% endif %}
</div>
<div clas="video-modal-product-info-{{ section.id }}">
<p class="video-modal-product-title-{{ section.id }}">{{ block.settings.product.title }}</p>
<p
class="video-modal-product-price-{{ section.id }}"
data-shoppable-modal-price--{{ forloop.index }}
>
{{ block.settings.product.price | money }}
</p>
</div>
</div>
{% endif %}
{% if block.settings.use_variants %}
{%- unless block.settings.product.has_only_default_variant -%}
{%- for option in block.settings.product.options_with_values -%}
<div class="video-option-{{ section.id }} video-modal-option-{{ section.id }}">
<p class="video-option-name-{{ section.id }}">{{ option.name }}:</p>
<div class="video-options-{{ section.id }}">
<select
class="video-select-{{ section.id }}"
data-shoppable-modal-select--{{ block.id | replace: '-', '' }}
>
{%- for value in option.values -%}
<option value="{{ value }}">{{ value }}</option>
{% endfor %}
</select>
<span>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokelinejoin="2"
strokelinecap="round"
class="feather feather-chevron-down"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</span>
</div>
</div>
{%- endfor -%}
{% endunless %}
{% endif %}
{% if block.settings.product != blank %}
{%- assign product_modal_form_id = 'product-modal-form-' | append: block.id -%}
{%- form 'product',
block.settings.product,
id: product_modal_form_id,
class: 'form',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
<input
type="hidden"
name="id"
value="{{ block.settings.product.selected_or_first_available_variant.id }}"
data-shoppable-modal-input--{{ forloop.index }}
>
{%- liquid
assign check_against_inventory = true
if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
assign check_against_inventory = false
endif
if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory
assign quantity_rule_soldout = true
endif
-%}
<button
type="submit"
class="video-modal-add-{{ section.id }}"
data-shoppable-modal-button--{{ forloop.index }}
{% unless block.settings.product.selected_or_first_available_variant.available %}
disabled
{% endunless %}
>
{% if block.settings.product.selected_or_first_available_variant.available -%}
{{- modal_button -}}
{%- else -%}
{{- modal_button_soldout -}}
{%- endif %}
</button>
{%- endform -%}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<button class="video-modal-close-{{ section.id }}">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0002 10.586L4.70718 3.29297L3.29297 4.70718L10.586 12.0002L3.29297 19.2933L4.70718 20.7075L12.0002 13.4145L19.2933 20.7075L20.7075 19.2933L13.4145 12.0002L20.7075 4.70723L19.2933 3.29302L12.0002 10.586Z" fill="white"></path>
</svg>
</button>
{% if section.blocks.size > 1 %}
<button class="video-modal-prev-{{ section.id }}">
<svg viewBox="0 0 24 24">
<path d="m8.5 12.8 5.7 5.6c.4.4 1 .4 1.4 0 .4-.4.4-1 0-1.4l-4.9-5 4.9-5c.4-.4.4-1 0-1.4-.2-.2-.4-.3-.7-.3-.3 0-.5.1-.7.3l-5.7 5.6c-.4.5-.4 1.1 0 1.6 0-.1 0-.1 0 0z"></path>
</svg>
</button>
<button class="video-modal-next-{{ section.id }}">
<svg viewBox="0 0 24 24">
<path d="M15.54,11.29,9.88,5.64a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41l4.95,5L8.46,17a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.71-.3l5.66-5.65A1,1,0,0,0,15.54,11.29Z"></path>
</svg>
</button>
{% endif %}
</div>
{% if lazy %}
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/dist/lazyload.min.js"></script>
{% endif %}
<script>
function loadSwiper(callback) {
if (window.Swiper) {
callback();
} else {
const script = document.createElement('script');
script.src = "https://cdn.jsdelivr.net/npm/swiper@8.4.7/swiper-bundle.min.js";
script.onload = callback;
document.head.appendChild(script);
}
}
var formayMoneyForBuyItWith = function(cents, format) {
if (typeof cents == 'string') { cents = cents.replace('.',''); }
var value = '';
var placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
var formatString = (format || this.money_format);
function defaultOption(opt, def) {
return (typeof opt == 'undefined' ? def : opt);
}
function formatWithDelimiters(number, precision, thousands, decimal) {
precision = defaultOption(precision, 2);
thousands = defaultOption(thousands, ',');
decimal = defaultOption(decimal, '.');
if (isNaN(number) || number == null) { return 0; }
number = (number/100.0).toFixed(precision);
var parts = number.split('.'),
dollars = parts[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands),
cents = parts[1] ? (decimal + parts[1]) : '';
return dollars + cents;
}
switch(formatString.match(placeholderRegex)[1]) {
case 'amount':
value = formatWithDelimiters(cents, 2);
break;
case 'amount_no_decimals':
value = formatWithDelimiters(cents, 0);
break;
case 'amount_with_comma_separator':
value = formatWithDelimiters(cents, 2, '.', ',');
break;
case 'amount_no_decimals_with_comma_separator':
value = formatWithDelimiters(cents, 0, '.', ',');
break;
}
return formatString.replace(placeholderRegex, value);
};
function initShoppableVideo(sectionId) {
document.querySelector(`.video-slider-${sectionId}`).classList.remove('preview');
const slider = new Swiper(`.video-slider-${sectionId}`, {
speed: 300,
navigation: {
nextEl: `.video-btn-next-${sectionId}`,
prevEl: `.video-btn-prev-${sectionId}`
},
pagination: {
el: `.video-pagination-${sectionId}`,
draggable: true,
clickable: true
},
breakpoints: {
320: {
spaceBetween: parseInt(document.querySelector(`.video-slider-${sectionId}`).dataset.gapMobile || 0),
slidesPerView: parseFloat(document.querySelector(`.video-slider-${sectionId}`).dataset.viewMobile),
},
768: {
spaceBetween: parseInt(document.querySelector(`.video-slider-${sectionId}`).dataset.gapMobile || 0),
slidesPerView: parseFloat(document.querySelector(`.video-slider-${sectionId}`).dataset.viewMobile),
},
1024: {
spaceBetween: parseInt(document.querySelector(`.video-slider-${sectionId}`).dataset.gap || 0),
slidesPerView: parseFloat(document.querySelector(`.video-slider-${sectionId}`).dataset.view ),
}
}
});
const slider2 = new Swiper(`.video-modal-slider-${sectionId}`, {
speed: 300,
slidesPerView: 1,
spaceBetween: 20,
allowTouchMove: false,
navigation: {
nextEl: `.video-modal-next-${sectionId}`,
prevEl: `.video-modal-prev-${sectionId}`
},
on: {
slideChange: function () {
const slides = this.slides;
for (let i = 0; i < slides.length; i++) {
let video = slides[i].querySelector('video');
let frame = slides[i].querySelector('iframe');
let btn = slides[i].querySelector(`.video-modal-action-${sectionId}`);
let src;
let src1;
let src2;
if(frame) {
src1 = frame.getAttribute('data-src');
src2 = frame.getAttribute('data-src2');
}
if (i === this.activeIndex) {
if (video) {
video.play();
video.muted = false;
}
if(frame) {
frame.src = src2;
}
if(btn) {
btn.classList.add('active');
}
} else {
if (video) {
video.pause();
}
if(frame) {
frame.src = src1;
}
}
}
},
},
});
document.querySelectorAll(`.video-slide-${sectionId}`).forEach(el => {
let arrowToggle = el.querySelector(`.video-arrow-${sectionId}`);
let variangsContainer = el.querySelector(`.video-variants-${sectionId}`);
if(arrowToggle) {
arrowToggle.addEventListener('click', () => {
variangsContainer.classList.toggle('active');
})
}
})
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
let product{{ forloop.index }} = {{ all_products[block.settings.product] | json }};
let selects{{ block.id | replace: '-', '' }} = document.querySelectorAll('[data-shoppable-select--{{ block.id | replace: '-', '' }}]');
let input{{ forloop.index }} = document.querySelector('[data-shoppable-input--{{ forloop.index }}]');
let image{{ forloop.index }} = document.querySelector('[data-shoppable-image--{{ forloop.index }}]');
let priceElement{{ forloop.index }} = document.querySelector('[data-shoppable-price--{{ forloop.index }}]');
let optionPrice{{ forloop.index }} = document.querySelector('[data-shoppable-option-price--{{ forloop.index }}]');
let button{{ forloop.index }} = document.querySelector('[data-shoppable-button--{{ forloop.index }}]');
let form{{ block.id | replace: '-', '' }} = document.querySelector('#product-form-{{ block.id }}');
let modalSelects{{ block.id | replace: '-', '' }} = document.querySelectorAll('[data-shoppable-modal-select--{{ block.id | replace: '-', '' }}]');
let modalInput{{ forloop.index }} = document.querySelector('[data-shoppable-modal-input--{{ forloop.index }}]');
let modalImage{{ forloop.index }} = document.querySelector('[data-shoppable-modal-image--{{ forloop.index }}]');
let modalPriceElement{{ forloop.index }} = document.querySelector('[data-shoppable-modal-price--{{ forloop.index }}]');
let modalButton{{ forloop.index }} = document.querySelector('[data-shoppable-modal-button--{{ forloop.index }}]');
let modalForm{{ block.id | replace: '-', '' }} = document.querySelector('#product-modal-form-{{ block.id }}');
if(selects{{ block.id | replace: '-', '' }}) {
selects{{ block.id | replace: '-', '' }}.forEach(el => {
el.addEventListener('change', () => {
var selectedOptions = [];
selects{{ block.id | replace: '-', '' }}.forEach(element => {
selectedOptions.push(element.value);
})
var matchedVariant = product{{ forloop.index }}.variants.find(variant => {
var pass = true;
for( var i = 0; i < selectedOptions.length; i++ ) {
if(selectedOptions.indexOf(variant.options[i]) === -1) {
pass = false;
break;
}
}
return pass;
})
let price{{ forloop.index }} = matchedVariant.price;
priceElement{{ forloop.index }}.innerHTML = formayMoneyForBuyItWith(price{{ forloop.index }}, '{{ shop.money_format }}');
optionPrice{{ forloop.index }}.innerHTML = formayMoneyForBuyItWith(price{{ forloop.index }}, '{{ shop.money_format }}');
input{{ forloop.index }}.value = matchedVariant.id;
if (matchedVariant.featured_image) {
image{{ forloop.index }}.src = matchedVariant.featured_image.src;
} else {
image{{ forloop.index }}.src = product{{ forloop.index }}.featured_image;
}
if (!matchedVariant.available) {
button{{ forloop.index }}.setAttribute('disabled', "");
button{{ forloop.index }}.innerText = `{{ button_soldout }}`;
button{{ forloop.index }}.style.cursor = "not-allowed";
} else {
button{{ forloop.index }}.removeAttribute('disabled');
button{{ forloop.index }}.innerText = `{{ button }}`;
button{{ forloop.index }}.style.cursor = "pointer";
}
})
})
}
{% unless reload_after_adding %}
if(form{{ block.id | replace: '-', '' }}) {
form{{ block.id | replace: '-', '' }}.addEventListener('submit', async (e) => {
console.log(form{{ block.id | replace: '-', '' }});
e.preventDefault();
await fetch('/cart/add', {
method: 'post',
body: new FormData(form{{ block.id | replace: '-', '' }})
});
const res{{ forloop.index }} = await fetch("/cart.json");
const cart{{ forloop.index }} = await res{{ forloop.index }}.json();
const headerCartCount{{ forloop.index }} = document.querySelector('.cart-count-bubble span');
if(headerCartCount{{ forloop.index }}) {
headerCartCount{{ forloop.index }}.textContent = cart{{ forloop.index }}.item_count;
} else {
const headerCart{{ forloop.index }} = document.querySelector('#cart-icon-bubble');
const isCartIconValid = headerCart{{ forloop.index }} &&
headerCart{{ forloop.index }}.childElementCount === 2 &&
headerCart{{ forloop.index }}.querySelector('svg') &&
headerCart{{ forloop.index }}.querySelector('span.visually-hidden');
if (isCartIconValid) {
const cartCountBubble = document.createElement('div');
cartCountBubble.className = 'cart-count-bubble';
if(cart{{ forloop.index }}.item_count == "1") {
cartCountBubble.innerHTML = `<span aria-hidden="true">${cart{{ forloop.index }}.item_count}</span><span class="visually-hidden">${cart{{ forloop.index }}.item_count} item</span>`;
} else {
cartCountBubble.innerHTML = `<span aria-hidden="true">${cart{{ forloop.index }}.item_count}</span><span class="visually-hidden">${cart{{ forloop.index }}.item_count} items</span>`;
}
headerCart{{ forloop.index }}.appendChild(cartCountBubble);
}
}
setTimeout(function() {
button{{ forloop.index }}.innerText = "Added";
}, 300);
{% if redirect_after_adding %}
setTimeout(function() {
window.location.href = "{{ shop.url }}/cart";
}, 500);
{% endif %}
setTimeout(function() {
button{{ forloop.index }}.innerText = `{{ button }}`;
}, 2000);
})
}
{% endunless %}
if(modalSelects{{ block.id | replace: '-', '' }}) {
modalSelects{{ block.id | replace: '-', '' }}.forEach(el => {
el.addEventListener('change', () => {
var selectedOptions = [];
modalSelects{{ block.id | replace: '-', '' }}.forEach(element => {
selectedOptions.push(element.value);
})
var matchedVariant = product{{ forloop.index }}.variants.find(variant => {
var pass = true;
for( var i = 0; i < selectedOptions.length; i++ ) {
if(selectedOptions.indexOf(variant.options[i]) === -1) {
pass = false;
break;
}
}
return pass;
})
let price{{ forloop.index }} = matchedVariant.price;
modalPriceElement{{ forloop.index }}.innerHTML = formayMoneyForBuyItWith(price{{ forloop.index }}, '{{ shop.money_format }}');
modalInput{{ forloop.index }}.value = matchedVariant.id;
if (matchedVariant.featured_image) {
modalImage{{ forloop.index }}.src = matchedVariant.featured_image.src;
} else {
modalImage{{ forloop.index }}.src = product{{ forloop.index }}.featured_image;
}
if (!matchedVariant.available) {
modalButton{{ forloop.index }}.setAttribute('disabled', "");
modalButton{{ forloop.index }}.innerText = `{{ modal_button_soldout }}`;
modalButton{{ forloop.index }}.style.cursor = "not-allowed";
} else {
modalButton{{ forloop.index }}.removeAttribute('disabled');
modalButton{{ forloop.index }}.innerText = `{{ modal_button }}`;
modalButton{{ forloop.index }}.style.cursor = "pointer";
}
})
})
}
{% unless reload_after_adding %}
if(modalForm{{ block.id | replace: '-', '' }}) {
modalForm{{ block.id | replace: '-', '' }}.addEventListener('submit', async (e) => {
e.preventDefault();
await fetch('/cart/add', {
method: 'post',
body: new FormData(modalForm{{ block.id | replace: '-', '' }})
});
const res{{ forloop.index }} = await fetch("/cart.json");
const cart{{ forloop.index }} = await res{{ forloop.index }}.json();
const headerCartCount{{ forloop.index }} = document.querySelector('.cart-count-bubble span');
if(headerCartCount{{ forloop.index }}) {
headerCartCount{{ forloop.index }}.textContent = cart{{ forloop.index }}.item_count;
}
setTimeout(function() {
modalButton{{ forloop.index }}.innerText = "Added";
}, 300);
setTimeout(function() {
modalButton{{ forloop.index }}.innerText = `{{ button }}`;
}, 2000);
})
}
{% endunless %}
{% endfor %}
{% endif %}
const toggles = document.querySelectorAll(`.video-top-${sectionId}`);
const modal = document.querySelector(`.video-modal-${sectionId}`);
const close = document.querySelector(`.video-modal-close-${sectionId}`);
let activeSlideIndex = 0;
toggles.forEach((el, index) => {
el.addEventListener('click', (e) => {
if(e.target.id == `${sectionId}`) {
slider2.slideTo(index);
activeSlideIndex = index;
const activeSlide = slider2.slides[activeSlideIndex];
const video = activeSlide.querySelector('video');
const frame = activeSlide.querySelector('iframe');
let src;
let src1;
let src2;
if(frame) {
src1 = frame.src.replace("&mute=1", "");
src2 = frame.getAttribute('data-src2');
}
const btn = activeSlide.querySelector(`.video-modal-action-${sectionId}`);
setTimeout(() => {
document.body.style.overflow = 'hidden';
modal.classList.add('active');
if (video) {
video.play();
video.muted = false;
}
if(btn) {
btn.classList.add('active');
}
if(frame) {
frame.src = src2;
}
}, 200);
}
});
});
close.addEventListener('click', () => {
document.body.style.overflow = '';
modal.classList.remove('active');
let frames = modal.querySelectorAll('iframe');
let videos = modal.querySelectorAll('video');
if(frames){
frames.forEach(el => {
let src1 = el.getAttribute('data-src');
el.src = src1;
});
}
if(videos){
videos.forEach(el => {
el.pause();
});
}
});
document.addEventListener('click', (e) => {
if (e.target == modal) {
document.body.style.overflow = '';
modal.classList.remove('active');
let frames = modal.querySelectorAll('iframe');
let videos = modal.querySelectorAll('video');
if(frames){
frames.forEach(el => {
let src1 = el.getAttribute('data-src');
el.src = src1;
});
}
if(videos){
videos.forEach(el => {
el.pause();
});
}
}
});
document.querySelectorAll(`.video-modal-slide-${sectionId}`).forEach(el => {
let btn = el.querySelector(`.video-modal-action-${sectionId}`);
let frame = el.querySelector('iframe');
let src;
if(frame) {
src = frame.getAttribute("data-src2");
}
let video = el.querySelector('video');
if(btn) {
btn.addEventListener('click', () => {
btn.classList.toggle('active');
if(btn.classList.contains('active')) {
if(frame) {
frame.src = src;
}
if(video) {
video.muted = false;
video.setAttribute("mute", "false");
}
} else {
if(frame) {
frame.src += "&mute=1&muted=1";
}
if(video) {
video.muted = true;
video.setAttribute("mute", "true");
}
}
})
}
})
slider2.on('slideChange', () => {
activeSlideIndex = slider2.realIndex !== undefined ? slider2.realIndex : slider2.activeIndex;
});
{% if lazy %}
var lazyLoadInstance = new LazyLoad();
window.addEventListener(
"LazyLoad::Initialized",
function (event) {
window.lazyLoadInstance = event.detail.instance;
},
false
);
{% endif %}
}
function initializeAllShoppableVideoSections() {
const sections = document.querySelectorAll('[id^="shopify-section-"]');
sections.forEach(section => {
if (section.querySelector('.video-{{ section.id }}')) {
const sectionId = section.id.replace('shopify-section-', '');
loadSwiper(() => initShoppableVideo(sectionId));
}
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializeAllShoppableVideoSections);
} else {
initializeAllShoppableVideoSections();
}
if (Shopify.designMode) {
document.addEventListener('shopify:section:load', (event) => {
const sectionId = event.detail.sectionId;
if (event.target.querySelector('.video-{{ section.id }}')) {
loadSwiper(() => initShoppableVideo(sectionId));
}
});
}
</script>
{% schema %}
{
"name": "Shoppable video",
"settings": [
{
"type": "paragraph",
"content": "⚠️ Save settings to see section in action"
},
{
"type": "header",
"content": "Heading"
},
{
"type": "richtext",
"id": "heading",
"label": "Text",
"default": "<h2>WHAT OUR FELLOWS THINK</h2>"
},
{
"type": "checkbox",
"id": "heading_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "heading_font",
"label": "Font family",
"default": "josefin_sans_n4",
"visible_if": "{{ section.settings.heading_custom }}"
},
{
"type": "range",
"id": "heading_size",
"min": 0,
"max": 72,
"step": 2,
"unit": "px",
"label": "Font size",
"default": 28
},
{
"type": "range",
"id": "heading_size_mobile",
"min": 0,
"max": 72,
"step": 2,
"unit": "px",
"label": "Font size - mobile",
"default": 28
},
{
"type": "range",
"id": "heading_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 130
},
{
"type": "select",
"id": "heading_align",
"label": "Alignment",
"default": "center",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
]
},
{
"type": "select",
"id": "heading_align_mobile",
"label": "Alignment - mobile",
"default": "center",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
]
},
{
"type": "header",
"content": "Slider"
},
{
"type": "range",
"id": "slider_view",
"min": 1,
"max": 6,
"step": 1,
"label": "Slides per view",
"default": 5
},
{
"type": "range",
"id": "slider_view_mobile",
"min": 1,
"max": 3,
"step": 0.1,
"label": "Slides per view - mobile",
"default": 1.3
},
{
"type": "range",
"id": "slider_gap",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Gap",
"default": 16
},
{
"type": "range",
"id": "slider_gap_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Gap - mobile",
"default": 16
},
{
"type": "range",
"id": "slider_mt",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Margin top",
"default": 20
},
{
"type": "header",
"content": "Slide"
},
{
"type": "range",
"id": "card_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 10
},
{
"type": "range",
"id": "card_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 0
},
{
"type": "checkbox",
"id": "card_shadow",
"label": "Use shadow",
"default": true
},
{
"type": "header",
"content": "Video"
},
{
"type": "select",
"id": "video_ratio",
"label": "Aspect ratio",
"default": "portrait",
"options": [
{
"label": "Portrait",
"value": "portrait"
},
{
"label": "Square",
"value": "square"
},
{
"label": "Landscape",
"value": "landscape"
},
{
"label": "Original",
"value": "original"
}
]
},
{
"type": "select",
"id": "video_ratio_mobile",
"label": "Aspect ratio - mobile",
"default": "portrait",
"options": [
{
"label": "Portrait",
"value": "portrait"
},
{
"label": "Square",
"value": "square"
},
{
"label": "Landscape",
"value": "landscape"
},
{
"label": "Original",
"value": "original"
}
]
},
{
"type": "range",
"id": "video_overlay",
"min": 0,
"max": 1,
"step": 0.1,
"label": "Overlay",
"default": 0.2
},
{
"type": "header",
"content": "Product image"
},
{
"type": "range",
"id": "image_width",
"min": 20,
"max": 100,
"step": 2,
"unit": "px",
"label": "Width",
"default": 44
},
{
"type": "range",
"id": "image_width_mobile",
"min": 20,
"max": 100,
"step": 2,
"unit": "px",
"label": "Width - mobile",
"default": 44
},
{
"type": "range",
"id": "image_radius",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 6
},
{
"type": "range",
"id": "image_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 0
},
{
"type": "header",
"content": "Product title"
},
{
"type": "checkbox",
"id": "title_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "title_font",
"label": "Font family",
"default": "josefin_sans_n4",
"visible_if": "{{ section.settings.title_custom }}"
},
{
"type": "range",
"id": "title_size",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 14
},
{
"type": "range",
"id": "title_size_mobile",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 14
},
{
"type": "range",
"id": "title_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 130
},
{
"type": "checkbox",
"id": "title_uppercase",
"label": "Uppercase",
"default": false
},
{
"type": "header",
"content": "Product price"
},
{
"type": "checkbox",
"id": "price_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "price_font",
"label": "Font family",
"default": "josefin_sans_n4",
"visible_if": "{{ section.settings.price_custom }}"
},
{
"type": "range",
"id": "price_size",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 14
},
{
"type": "range",
"id": "price_size_mobile",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 14
},
{
"type": "range",
"id": "price_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 130
},
{
"type": "header",
"content": "Add to cart button"
},
{
"type": "text",
"id": "button",
"label": "Add to cart button label",
"default": "Add To Cart"
},
{
"type": "text",
"id": "button_soldout",
"label": "Sold out button label",
"default": "Sold Out"
},
{
"type": "checkbox",
"id": "button_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "button_font",
"label": "Font family",
"default": "josefin_sans_n4",
"visible_if": "{{ section.settings.button_custom }}"
},
{
"type": "range",
"id": "button_size",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 16
},
{
"type": "range",
"id": "button_size_mobile",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 16
},
{
"type": "range",
"id": "button_padding_vertical",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Padding vertical",
"default": 10
},
{
"type": "range",
"id": "button_padding_vertical_mobile",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Padding vertical - mobile",
"default": 10
},
{
"type": "range",
"id": "button_padding_horizontal",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Padding horizontal",
"default": 10
},
{
"type": "range",
"id": "button_padding_horizontal_mobile",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Padding horizontal - mobile",
"default": 10
},
{
"type": "checkbox",
"id": "reload_after_adding",
"label": "Reload page after add-to-cart",
"info": "Some cart-drawers do not integrate well with add-to-cart functions",
"default": false
},
{
"type": "checkbox",
"id": "redirect_after_adding",
"label": "Redirect to cart page after adding product to cart",
"default": false
},
{
"type": "header",
"content": "Variants option"
},
{
"type": "checkbox",
"id": "option_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "option_font",
"label": "Font family",
"default": "josefin_sans_n4",
"visible_if": "{{ section.settings.option_custom }}"
},
{
"type": "range",
"id": "option_size",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 12
},
{
"type": "range",
"id": "option_size_mobile",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 12
},
{
"type": "range",
"id": "option_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 100
},
{
"type": "range",
"id": "option_mt",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Space between option",
"default": 24
},
{
"type": "header",
"content": "Variants price"
},
{
"type": "checkbox",
"id": "variants_price_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "variants_price_font",
"label": "Font family",
"default": "josefin_sans_n4",
"visible_if": "{{ section.settings.variants_price_custom }}"
},
{
"type": "range",
"id": "variants_price_size",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 14
},
{
"type": "range",
"id": "variants_price_size_mobile",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 14
},
{
"type": "range",
"id": "variants_price_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 130
},
{
"type": "range",
"id": "variants_price_mt",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Margin top",
"default": 10
},
{
"type": "select",
"id": "variants_price_align",
"label": "Alignment",
"default": "center",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
]
},
{
"type": "select",
"id": "variants_price_align_mobile",
"label": "Alignment - mobile",
"default": "center",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
]
},
{
"type": "header",
"content": "Modal"
},
{
"type": "range",
"id": "modal_width",
"min": 200,
"max": 1500,
"step": 20,
"unit": "px",
"label": "Width",
"default": 740
},
{
"type": "range",
"id": "modal_width_mobile",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"label": "Width - mobile",
"default": 100
},
{
"type": "range",
"id": "modal_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 16
},
{
"type": "range",
"id": "modal_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 0
},
{
"type": "range",
"id": "modal_overlay",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "Overlay",
"default": 50
},
{
"type": "header",
"content": "Modal close button"
},
{
"type": "range",
"id": "close_size",
"min": 20,
"max": 120,
"step": 2,
"unit": "px",
"label": "Size",
"default": 42
},
{
"type": "range",
"id": "close_size_mobile",
"min": 20,
"max": 120,
"step": 2,
"unit": "px",
"label": "Size - mobile",
"default": 42
},
{
"type": "range",
"id": "close_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 8
},
{
"type": "range",
"id": "close_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 0
},
{
"type": "header",
"content": "Modal navigation arrows"
},
{
"type": "range",
"id": "buttons_size",
"min": 20,
"max": 120,
"step": 2,
"unit": "px",
"label": "Size",
"default": 48
},
{
"type": "range",
"id": "buttons_size_mobile",
"min": 20,
"max": 120,
"step": 2,
"unit": "px",
"label": "Size - mobile",
"default": 48
},
{
"type": "range",
"id": "buttons_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 8
},
{
"type": "range",
"id": "buttons_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 0
},
{
"type": "header",
"content": "Modal video"
},
{
"type": "range",
"id": "modal_video_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 0
},
{
"type": "range",
"id": "modal_video_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 0
},
{
"type": "select",
"id": "modal_video_ratio",
"label": "Aspect ratio",
"default": "portrait",
"options": [
{
"label": "Portrait",
"value": "portrait"
},
{
"label": "Square",
"value": "square"
},
{
"label": "Landscape",
"value": "landscape"
},
{
"label": "Original",
"value": "original"
}
]
},
{
"type": "select",
"id": "modal_video_ratio_mobile",
"label": "Aspect ratio - mobile",
"default": "portrait",
"options": [
{
"label": "Portrait",
"value": "portrait"
},
{
"label": "Square",
"value": "square"
},
{
"label": "Landscape",
"value": "landscape"
},
{
"label": "Original",
"value": "original"
}
]
},
{
"type": "header",
"content": "Modal heading"
},
{
"type": "checkbox",
"id": "modal_heading_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "modal_heading_font",
"label": "Font family",
"default": "josefin_sans_n4",
"visible_if": "{{ section.settings.modal_heading_custom }}"
},
{
"type": "range",
"id": "modal_heading_size",
"min": 0,
"max": 72,
"step": 2,
"unit": "px",
"label": "Font size",
"default": 28
},
{
"type": "range",
"id": "modal_heading_size_mobile",
"min": 0,
"max": 72,
"step": 2,
"unit": "px",
"label": "Font size - mobile",
"default": 28
},
{
"type": "range",
"id": "modal_heading_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 130
},
{
"type": "select",
"id": "modal_heading_align",
"label": "Alignment",
"default": "center",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
]
},
{
"type": "select",
"id": "modal_heading_align_mobile",
"label": "Alignment - mobile",
"default": "center",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
]
},
{
"type": "header",
"content": "Modal text"
},
{
"type": "checkbox",
"id": "modal_text_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "modal_text_font",
"label": "Font family",
"default": "josefin_sans_n4",
"visible_if": "{{ section.settings.modal_text_custom }}"
},
{
"type": "range",
"id": "modal_text_size",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 16
},
{
"type": "range",
"id": "modal_text_size_mobile",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 16
},
{
"type": "range",
"id": "modal_text_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 150
},
{
"type": "select",
"id": "modal_text_align",
"label": "Alignment",
"default": "center",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
]
},
{
"type": "select",
"id": "modal_text_align_mobile",
"label": "Alignment - mobile",
"default": "center",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
]
},
{
"type": "range",
"id": "modal_text_mt",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Margin top",
"default": 16
},
{
"type": "header",
"content": "Modal product"
},
{
"type": "checkbox",
"id": "use_modal_product",
"label": "Use product in modal",
"default": true
},
{
"type": "header",
"content": "Modal product image",
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "range",
"id": "modal_image_width",
"min": 20,
"max": 200,
"step": 2,
"unit": "px",
"label": "Width",
"default": 70,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "range",
"id": "modal_image_width_mobile",
"min": 20,
"max": 200,
"step": 2,
"unit": "px",
"label": "Width - mobile",
"default": 66,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "range",
"id": "modal_image_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 12,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "range",
"id": "modal_image_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 0,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "header",
"content": "Modal product title",
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "checkbox",
"id": "modal_title_custom",
"label": "Use custom font",
"default": false,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "font_picker",
"id": "modal_title_font",
"label": "Font family",
"default": "josefin_sans_n4",
"visible_if": "{{ section.settings.use_modal_product and section.settings.modal_title_custom }}"
},
{
"type": "range",
"id": "modal_title_size",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 16,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "range",
"id": "modal_title_size_mobile",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 16,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "range",
"id": "modal_title_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 130,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "checkbox",
"id": "modal_title_uppercase",
"label": "Uppercase",
"default": false,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "header",
"content": "Modal product price",
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "checkbox",
"id": "modal_price_custom",
"label": "Use custom font",
"default": false,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "font_picker",
"id": "modal_price_font",
"label": "Font family",
"default": "josefin_sans_n4",
"visible_if": "{{ section.settings.use_modal_product and section.settings.modal_price_custom }}"
},
{
"type": "range",
"id": "modal_price_size",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 14,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "range",
"id": "modal_price_size_mobile",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 14,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "range",
"id": "modal_price_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 130,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "header",
"content": "Modal add to cart button",
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "text",
"id": "modal_button",
"label": "Add to cart button label",
"default": "Add To Cart",
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "text",
"id": "modal_button_soldout",
"label": "Sold out button label",
"default": "Sold Out",
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "checkbox",
"id": "modal_button_custom",
"label": "Use custom font",
"default": false,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "font_picker",
"id": "modal_button_font",
"label": "Font family",
"default": "josefin_sans_n4",
"visible_if": "{{ section.settings.use_modal_product and section.settings.modal_button_custom }}"
},
{
"type": "range",
"id": "modal_button_size",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 16,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "range",
"id": "modal_button_size_mobile",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 16,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "range",
"id": "modal_button_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 8,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "range",
"id": "modal_button_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 1,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "range",
"id": "modal_button_mt",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Margin top",
"default": 16,
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "select",
"id": "modal_button_align",
"label": "Alignment",
"default": "center",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
],
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "select",
"id": "modal_button_align_mobile",
"label": "Alignment - mobile",
"default": "center",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
],
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "header",
"content": "Slide colors"
},
{
"type": "color",
"label": "Background",
"id": "card_bg_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Border",
"id": "card_border_color",
"default": "#121212",
"visible_if": "{{ section.settings.card_border_thickness >= 1 }}"
},
{
"type": "color",
"label": "Overlay",
"id": "video_overlay_color",
"default": "#121212",
"visible_if": "{{ section.settings.video_overlay >= 0.1 }}"
},
{
"type": "color",
"label": "Shadow",
"id": "card_shadow_color",
"default": "#121212",
"visible_if": "{{ section.settings.card_shadow }}"
},
{
"type": "header",
"content": "Product colors"
},
{
"type": "color",
"label": "Title",
"id": "title_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Price",
"id": "price_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Image border",
"id": "image_border_color",
"default": "#121212",
"visible_if": "{{ section.settings.image_border_thickness >= 1 }}"
},
{
"type": "header",
"content": "Button colors"
},
{
"type": "color",
"label": "Text",
"id": "button_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Text hover",
"id": "button_hover_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Background",
"id": "button_bg_color",
"default": "#121212"
},
{
"type": "color",
"label": "Background hover",
"id": "button_bg_hover_color",
"default": "#121212"
},
{
"type": "header",
"content": "Arrow button colors"
},
{
"type": "color",
"label": "Icon",
"id": "arrow_icon_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Background",
"id": "arrow_bg_color",
"default": "#121212"
},
{
"type": "color",
"label": "Border",
"id": "arrow_border_color",
"default": "#FFFFFF"
},
{
"type": "header",
"content": "Variants colors"
},
{
"type": "color",
"label": "Variant option",
"id": "option_color",
"default": "#121212"
},
{
"type": "color",
"label": "Variant price",
"id": "variants_price_color",
"default": "#121212"
},
{
"type": "header",
"content": "Modal colors"
},
{
"type": "color",
"label": "Heading",
"id": "modal_heading_color",
"default": "#121212"
},
{
"type": "color",
"label": "Text",
"id": "modal_text_color",
"default": "#121212"
},
{
"type": "color",
"label": "Video border",
"id": "modal_video_border_color",
"default": "#121212",
"visible_if": "{{ section.settings.modal_video_border_thickness >= 1 }}"
},
{
"type": "color",
"label": "Background",
"id": "modal_content_bg_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Border",
"id": "modal_border_color",
"default": "#121212",
"visible_if": "{{ section.settings.modal_border_thickness >= 1 }}"
},
{
"type": "header",
"content": "Modal close button colors"
},
{
"type": "color",
"label": "Icon",
"id": "close_icon_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Background",
"id": "close_bg_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Border",
"id": "close_border_color",
"default": "#121212",
"visible_if": "{{ section.settings.close_border_thickness >= 1 }}"
},
{
"type": "header",
"content": "Modal navigation arrows colors"
},
{
"type": "color",
"label": "Icon",
"id": "buttons_icon_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Background",
"id": "buttons_bg_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Border",
"id": "buttons_border_color",
"default": "#121212",
"visible_if": "{{ section.settings.buttons_border_thickness >= 1 }}"
},
{
"type": "header",
"content": "Modal product colors",
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "color",
"label": "Title",
"id": "modal_title_color",
"default": "#121212",
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "color",
"label": "Price",
"id": "modal_price_color",
"default": "#121212",
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "color",
"label": "Image border",
"id": "modal_image_border_color",
"default": "#121212",
"visible_if": "{{ section.settings.use_modal_product and section.settings.modal_image_border_thickness >= 1 }}"
},
{
"type": "header",
"content": "Modal button colors",
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "color",
"label": "Text",
"id": "modal_button_color",
"default": "#FFFFFF",
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "color",
"label": "Text hover",
"id": "modal_button_hover_color",
"default": "#121212",
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "color",
"label": "Background",
"id": "modal_button_bg_color",
"default": "#121212",
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "color",
"label": "Background hover",
"id": "modal_button_bg_hover_color",
"default": "#FFFFFF",
"visible_if": "{{ section.settings.use_modal_product }}"
},
{
"type": "color",
"label": "Border",
"id": "modal_button_border_color",
"default": "#121212",
"visible_if": "{{ section.settings.use_modal_product and section.settings.modal_button_border_thickness >= 1 }}"
},
{
"type": "color",
"label": "Border hover",
"id": "modal_button_border_hover_color",
"default": "#121212",
"visible_if": "{{ section.settings.use_modal_product and section.settings.modal_button_border_thickness >= 1 }}"
},
{
"type": "header",
"content": "Section colors"
},
{
"type": "color",
"label": "Heading",
"id": "heading_color",
"default": "#121212"
},
{
"type": "color",
"label": "Section background",
"id": "background_color",
"default": "#FFFFFF"
},
{
"type": "color_background",
"id": "background_gradient",
"label": "Section background gradient",
"info": "Remove gradient to replace with solid colors"
},
{
"type": "color",
"label": "Border",
"id": "border_color",
"default": "#121212"
},
{
"type": "header",
"content": "Section margin (outside)"
},
{
"type": "range",
"id": "margin_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Top",
"default": 0
},
{
"type": "range",
"id": "margin_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Bottom",
"default": 0
},
{
"type": "header",
"content": "Section padding (inside)"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Bottom",
"default": 36
},
{
"type": "range",
"id": "padding_horizontal",
"min": 0,
"max": 30,
"step": 1,
"unit": "rem",
"label": "Sides",
"default": 5
},
{
"type": "range",
"id": "padding_horizontal_mobile",
"min": 0,
"max": 15,
"step": 0.5,
"unit": "rem",
"label": "Sides - mobile",
"default": 1.5
},
{
"type": "header",
"content": "Section"
},
{
"type": "checkbox",
"id": "full_width",
"label": "Full width",
"default": false
},
{
"type": "range",
"id": "content_width",
"min": 800,
"max": 2000,
"step": 100,
"unit": "px",
"label": "Section content width",
"default": 1400,
"visible_if": "{{ section.settings.full_width == false }}"
},
{
"type": "range",
"id": "border_thickness",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 0
},
{
"type": "checkbox",
"id": "lazy",
"label": "Lazy load",
"info": "Lazy load media for speed optimisation",
"default": true
}
],
"blocks": [
{
"type": "item",
"name": "Video",
"settings": [
{
"type": "video",
"id": "video",
"label": "Video from Shopify"
},
{
"type": "video_url",
"id": "video_url",
"label": "Video embed from URL",
"accept": ["youtube", "vimeo"],
"info": "Youtube or Vimeo. Shows when no Shopify-hosted video is selected."
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Use autoplay",
"default": true
},
{
"type": "image_picker",
"id": "poster",
"label": "Thumbnail image for Shopify-hosted video",
"info": "Use when autoplay is turned off to remove blurry image",
"visible_if": "{{ block.settings.autoplay == false }}"
},
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "checkbox",
"id": "use_variants",
"label": "Use variants",
"default": true
},
{
"type": "richtext",
"id": "modal_heading",
"label": "Modal heading",
"default": "<h4>Modal heading</h4>"
},
{
"type": "richtext",
"id": "modal_text",
"label": "Modal text",
"default": "<p>Modal text</p>"
}
]
}
],
"presets": [
{
"name": "Shoppable video",
"blocks": [
{
"type": "item"
},
{
"type": "item"
},
{
"type": "item"
},
{
"type": "item"
},
{
"type": "item"
}
]
}
]
}
{% endschema %}
Configuration Guide
Basic Setup
Add Your First Video Block
In the theme editor, click on the Shoppable Video section
Click “Add block” → “Video”
Configure each block with:
Upload video file (Shopify-hosted)
OR add YouTube/Vimeo URL
Select associated product
Add modal text and headings
Video Settings
• Video Source: Upload MP4 (max 50MB recommended) • Alternative: YouTube/Vimeo embed URL • Autoplay: Enable for auto-start • Thumbnail: Add custom poster image
Product Configuration
Product Selection
Click “Select product” in each block
Choose from your existing products
The first variant/image will be displayed
Variants Setup
Toggle “Use variants” ON
All product options will appear automatically
Customers can select variants directly
Customization Options
Video Display Settings
• Aspect Ratio: Portrait, Landscape, or Square • Overlay Opacity: Adjust video dark overlay • Border Radius: Round video corners • Mobile Layout: Adjust for different screens
Product Card Styling
• Card Background: Set card color • Border Style: Add borders to cards • Shadow Effects: Add drop shadows • Spacing: Control gaps between slides
Text Customization
• Font Families: Custom fonts for all text elements • Sizes: Adjust font sizes for desktop/mobile • Colors: Custom color palette • Alignment: Left/Center/Right alignment
Button Settings
• Button Text: "Add to Cart" and "Sold Out" labels • Button Colors: Normal and hover states • Padding: Button size adjustments • Border Radius: Rounded corners
Modal Configuration
• Modal Size: Width on desktop/mobile • Content: Heading and description text • Product Display: Show product in modal • Close Button: Customize close button • Navigation Arrows: Previous/Next buttons
Mobile Optimization
Responsive Settings
Mobile Slides Per View
Default: 1.3 slides visible
Adjust in section settings
Mobile Aspect Ratios
Set different ratios for mobile vs desktop
Options: Portrait, Landscape, Square
Touch Navigation
Swipe enabled by default
Adjust gap spacing for mobile
Mobile-Specific Customization
• Font Sizes: Separate mobile font sizes • Button Sizes: Mobile-specific padding • Image Sizes: Smaller product images • Spacing: Reduced margins/padding
Advanced Features
Autoplay & Mute Controls
Autoplay: Videos play automatically
Mute Controls: Sound toggle in modal
Loop: Videos repeat continuously
Cart Integration
AJAX Add to Cart: Adds without page reload
Cart Updates: Updates cart count dynamically
Redirect Options: Optional cart page redirect
Performance Optimizations
• Lazy Loading: Optional media lazy load • Swiper.js: Lightweight slider library • CSS Optimization: Minimal styles by default
Troubleshooting
Common Issues & Solutions
Video Not Playing
• Check video format (MP4 recommended) • Verify file size (<50MB) • Ensure autoplay isn't blocked by browser • Try YouTube/Vimeo embed as alternative
Product Not Showing
• Verify product is published and available • Check inventory status • Ensure product has images • Clear theme cache
Slider Not Working
• Check Swiper.js is loading • Verify no JavaScript errors • Ensure section has multiple blocks • Check mobile vs desktop settings
Styles Not Applying
• Clear browser cache • Check color values (hex codes) • Verify font files are accessible • Ensure no conflicting CSS
Browser Compatibility
Supported: Chrome, Firefox, Safari, Edge
Mobile: iOS Safari, Chrome Mobile
Requirements: JavaScript enabled
Note: Always test changes in a development environment or duplicate theme before applying to your live store. The section uses modern JavaScript features that may require theme compatibility checking.
Pro Tip: Use Shopify’s built-in video hosting for better performance and reliability. Keep videos under 50MB for optimal loading times.
