All things Shopify and commerce
Hello guys, how can I adjust this button to scroll to an other section? I want that if somebody press this button to scroll them all the way up to this section (2nd, image).
Solved! Go to the solution
This is an accepted solution.
@NikosBat this line is telling us that section settings have a field to add the URL, so please put #rbr-bundle-296708 there i hope it will work
Hey, @NikosBat thanks for posting here.
can you please share the link to inspect it, thanks.
Hey ProtoMan44, sure here is the link and the password:
https://www.nistore.de/products/3-in-1-dog-hair-brush-cat-hair-brush-electric-pet-cleaning-brush-ste...
nikthe
@NikosBat change this p tag to a and link with href="#rbr-bundle-296708" . it will scroll to top section if it get clicked:
@NikosBat like this :
Hey ProtoMan44 and thanks for answering that fast, but where can i find this code? You know in which folder is hidden?
im not familiar with your theme but if you try at your self, I hope you will find it . @NikosBat
Ok thanks a lot ProtoMan44, I appreciate it.
@NikosBat please share code of this file.here
Which code do you mean?
@NikosBat video grid sections code.
Hey ProtoMan44, sure here is the code:
{% comment %}
---------------------------------------------------------
Copyright © 2023 Section Store. All rights reserved.
Unauthorized copying, modification, distribution, or use
of this code or any portion of it, is strictly prohibited.
Violators will be prosecuted to the fullest extent of the law.
For inquiries or permissions, contact daniel@section.store
---------------------------------------------------------
{% endcomment %}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/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 margin_horizontal_mobile = section.settings.margin_horizontal_mobile
assign margin_horizontal = section.settings.margin_horizontal
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 section_radius = section.settings.section_radius
assign layout = section.settings.layout
assign layout_mobile = section.settings.layout_mobile
assign layout_gap = section.settings.layout_gap
assign layout_gap_mobile = section.settings.layout_gap_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 video_radius = section.settings.video_radius
assign video_ratio = section.settings.video_ratio
assign video_ratio_mobile = section.settings.video_ratio_mobile
assign video_border_thickness = section.settings.video_border_thickness
assign video_border_color = section.settings.video_border_color
assign play_size = section.settings.play_size
assign play_size_mobile = section.settings.play_size_mobile
assign play_radius = section.settings.play_radius
assign play_bg_overlay = section.settings.play_bg_overlay
assign play_bg_color = section.settings.play_bg_color
assign play_color = section.settings.play_color
assign arrow_size = section.settings.arrow_size
assign arrow_size_mobile = section.settings.arrow_size_mobile
assign arrow_icon_size = section.settings.arrow_icon_size
assign arrow_icon_size_mobile = section.settings.arrow_icon_size_mobile
assign arrow_color = section.settings.arrow_color
assign arrow_hover_color = section.settings.arrow_hover_color
assign arrow_bg_color = section.settings.arrow_bg_color
assign arrow_bg_hover_color = section.settings.arrow_bg_hover_color
assign arrow_radius = section.settings.arrow_radius
assign arrow_border_thickness = section.settings.arrow_border_thickness
assign arrow_border_color = section.settings.arrow_border_color
assign arrow_border_hover_color = section.settings.arrow_border_hover_color
assign arrow_show_desktop = section.settings.arrow_show_desktop
assign arrow_show_mobile = section.settings.arrow_show_mobile
assign arrow_hover_effect = section.settings.arrow_hover_effect
assign content_align = section.settings.content_align
assign content_align_mobile = section.settings.content_align_mobile
assign content_horizontal_align = ""
if content_align == "center"
assign content_horizontal_align = "center"
elsif content_align == "right"
assign content_horizontal_align = "end"
else
assign content_horizontal_align = "start"
endif
assign content_horizontal_align_mobile = ""
if content_align_mobile == "center"
assign content_horizontal_align_mobile = "center"
elsif content_align_mobile == "right"
assign content_horizontal_align_mobile = "end"
else
assign content_horizontal_align_mobile = "start"
endif
assign heading = section.settings.heading
assign heading_custom = section.settings.heading_custom
assign heading_font = section.settings.heading_font
assign heading_size = section.settings.heading_size
assign heading_size_mobile = section.settings.heading_size_mobile
assign heading_height = section.settings.heading_height
assign heading_color = section.settings.heading_color
assign feature_gap = section.settings.feature_gap
assign feature_gap_mobile = section.settings.feature_gap_mobile
assign feature_padding_vertical = section.settings.feature_padding_vertical
assign feature_padding_vertical_mobile = section.settings.feature_padding_vertical_mobile
assign feature_border_thickness = section.settings.feature_border_thickness
assign feature_border_color = section.settings.feature_border_color
assign circle_progress = section.settings.circle_progress
assign circle_active_progress = section.settings.circle_active_progress
assign circle_size = section.settings.circle_size
assign circle_size_mobile = section.settings.circle_size_mobile
assign percent_size = section.settings.percent_size
assign percent_size_mobile = section.settings.percent_size_mobile
assign percent_color = section.settings.percent_color
assign percent_custom = section.settings.percent_custom
assign percent_font = section.settings.percent_font
assign percent_height = section.settings.percent_height
assign feature_text_custom = section.settings.feature_text_custom
assign feature_text_font = section.settings.feature_text_font
assign feature_text_size = section.settings.feature_text_size
assign feature_text_size_mobile = section.settings.feature_text_size_mobile
assign feature_text_height = section.settings.feature_text_height
assign feature_text_color = section.settings.feature_text_color
assign text = section.settings.text
assign text_custom = section.settings.text_custom
assign text_font = section.settings.text_font
assign text_size = section.settings.text_size
assign text_size_mobile = section.settings.text_size_mobile
assign text_height = section.settings.text_height
assign text_color = section.settings.text_color
assign text_mt = section.settings.text_mt
assign text_mt_mobile = section.settings.text_mt_mobile
assign button = section.settings.button
assign button_url = section.settings.button_url
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_radius = section.settings.button_radius
assign button_border_thickness = section.settings.button_border_thickness
assign button_border_color = section.settings.button_border_color
assign button_border_hover_color = section.settings.button_border_hover_color
assign button_bg_color = section.settings.button_bg_color
assign button_bg_hover_color = section.settings.button_bg_hover_color
assign button_style = section.settings.button_style
assign button_mt = section.settings.button_mt
assign button_mt_mobile = section.settings.button_mt_mobile
-%}
{%- style -%}
{{ heading_font | font_face: font_display: 'swap' }}
{{ text_font | font_face: font_display: 'swap' }}
{{ button_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;
margin-left: {{ margin_horizontal_mobile }}rem;
margin-right: {{ margin_horizontal_mobile }}rem;
border-radius: {{ section_radius | times: 0.6 | round: 0 }}px;
overflow: hidden;
}
.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-grid-body-{{ section.id }} {
display: grid;
grid-template-columns: 1fr;
gap: {{ layout_gap_mobile }}px;
}
.video-grid-videos-{{ section.id }} {
display: flex;
align-items: center;
gap: 14px;
}
.video-grid-slider-wrapper-{{ section.id }} {
display: grid;
width: 100%;
}
.video-grid-slider-{{ section.id }} {
flex: 1 1 0 !important;
min-width: 0 !important;
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;
}
.video-grid-video-{{ section.id }} {
position: relative !important;
z-index: 2 !important;
box-sizing: border-box !important;
border: {{ video_border_thickness }}px solid {{ video_border_color }} !important;
border-radius: {{ video_radius }}px !important;
overflow: hidden;
}
.video-grid-video-wrap-{{ section.id }} {
position: relative;
height: 100%;
z-index: 2;
pointer-events: auto;
}
.video-grid-video-wrap-{{ section.id }}:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.video-grid-video-{{ section.id }} video,
.video-grid-video-{{ section.id }} iframe {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
border: 0;
box-shadow: 0;
}
.video-grid-play-{{ section.id }} {
position: absolute;
top: 50%;
left: 50%;
padding: 15px;
border-radius: {{ play_radius }}px;
background-color: {{ play_bg_color | hex_to_rgba: play_bg_overlay }};
transform: translate(-50%, -50%);
z-index: 2;
pointer-events: none;
opacity: 0;
transition: all 0.25s ease 0s;
}
.video-grid-play-{{ section.id }} svg {
display: block;
width: {{ play_size_mobile }}px;
height: {{ play_size_mobile }}px;
object-fit: cover;
transform: translateX(12%);
}
.video-grid-play-{{ section.id }} svg path {
fill: {{ play_color }};
}
.video-grid-play-{{ section.id }}.active {
opacity: 1;
transition: all 0.25s ease 0s;
}
.video-grid-btn-prev-{{ section.id }},
.video-grid-btn-next-{{ section.id }} {
display: flex;
flex-shrink: 0;
width: {{ arrow_size_mobile }}px;
height: {{ arrow_size_mobile }}px;
border: 0px;
border: {{ arrow_border_thickness }}px solid {{ arrow_border_color }};
border-radius: {{ arrow_radius }}px;
background: transparent;
background: {{ arrow_bg_color }};
align-items: center;
justify-content: center;
transition: all 0.3s ease 0s;
cursor: pointer;
-webkit-appearance: none;
/* box-shadow: 0px 0px 10px 0px rgba(0,0,0,.15); */
}
.video-grid-btn-prev-{{ section.id }} .animate-icon,
.video-grid-btn-next-{{ section.id }} .animate-icon {
pointer-events: none;
place-items: center;
display: grid;
}
.video-grid-btn-prev-{{ section.id }} .animate-icon:before,
.video-grid-btn-next-{{ section.id }} .animate-icon:before {
content: "";
grid-area: 1 / -1;
transition: all .2s ease;
width: {{ arrow_icon_size_mobile }}px;
height: {{ arrow_icon_size_mobile }}px;
transform: rotate(calc(1 * 45deg));
box-sizing: border-box;
border-style: solid;
border: 0px;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
position: relative;
left: -1px;
}
.video-grid-btn-prev-{{ section.id }} .animate-icon:before {
left: unset;
right: -1px;
border-right: 0px;
border-top: 0px;
border-bottom: 2px solid currentColor;
border-left: 2px solid currentColor;
}
.video-grid-btn-prev-{{ section.id }} .animate-icon:after,
.video-grid-btn-next-{{ section.id }} .animate-icon:after {
content: "";
grid-area: 1 / -1;
transition: all .2s ease;
width: {{ arrow_icon_size_mobile | minus: 0.3 }}px;
height: 1.6px;
transform-origin: center;
opacity: 0;
background: currentColor;
transform: scaleX(.5);
}
.video-grid-btn-prev-{{ section.id }} span,
.video-grid-btn-next-{{ section.id }} span {
color: {{ arrow_color }};
}
.video-grid-btn-prev-{{ section.id }}.swiper-button-disabled,
.video-grid-btn-next-{{ section.id }}.swiper-button-disabled {
opacity: 0.5;
}
.video-grid-btn-prev-{{ section.id }}.swiper-button-lock,
.video-grid-btn-next-{{ section.id }}.swiper-button-lock {
opacity: 0;
pointer-events: none;
}
.video-grid-content-{{ section.id }} {
display: flex;
flex-direction: column;
align-items: {{ content_horizontal_align_mobile }};
}
.video-grid-heading-{{ section.id }} {
text-align: {{ content_align_mobile }};
}
.video-grid-heading-{{ section.id }} * {
margin: 0 0 16px 0;
font-size: {{ heading_size_mobile }}px;
color: {{ heading_color }};
line-height: {{ heading_height }}%;
text-transform: unset;
text-decoration: none;
font-weight: 700;
}
.video-grid-feature-{{ section.id }} {
display: flex;
align-items: center;
gap: {{ feature_gap_mobile }}px;
padding: {{ feature_padding_vertical_mobile }}px 0px;
border-bottom: {{ feature_border_thickness }}px solid {{ feature_border_color }};
}
.video-grid-circle-{{ section.id }} {
position: relative;
height: {{ circle_size_mobile }}px;
}
.video-grid-circle-container-{{ section.id }} svg {
width: {{ circle_size_mobile }}px;
height: {{ circle_size_mobile }}px;
}
.video-grid-circle-container-{{ section.id }} span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: {{ percent_size_mobile }}px;
color: {{ percent_color }};
line-height: {{ percent_height }}%;
display: block;
word-wrap: break-word;
text-transform: unset;
}
.video-grid-feature-text-{{ section.id }} {
text-align: {{ content_align_mobile }};
}
.video-grid-feature-text-{{ section.id }} * {
margin: 0;
font-size: {{ feature_text_size_mobile }}px;
color: {{ feature_text_color }};
line-height: {{ feature_text_height }}%;
text-transform: unset;
text-decoration: none;
}
.video-grid-text-{{ section.id }} {
margin-top: {{ text_mt_mobile }}px;
text-align: {{ content_align_mobile }};
}
.video-grid-text-{{ section.id }} * {
margin: 0;
font-size: {{ text_size_mobile }}px;
color: {{ text_color }};
line-height: {{ text_height }}%;
text-transform: unset;
text-decoration: none;
}
.video-grid-button-{{ section.id }} {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: fit-content;
margin-top: {{ button_mt_mobile }}px;
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;
border-radius: {{ button_radius }}px;
transition: all 0.25s ease 0s;
background-color: transparent;
border: 0px;
cursor: pointer;
font-weight: 700;
}
.video-grid-button-inner-{{ section.id }} {
margin: 0px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.video-grid-button-{{ section.id }}:hover {
color: {{ button_hover_color }};
transition: all 0.25s ease 0s;
}
.video-grid-button-{{ section.id }} svg {
width: 14px;
height: 14px;
}
.video-grid-button-{{ section.id }} svg path {
fill: {{ button_color }};
transition: all 0.25s ease 0s;
}
.video-grid-button-{{ section.id }}:hover svg path {
fill: {{ button_hover_color }};
transition: all 0.25s ease 0s;
}
@media(min-width: 1024px) {
.section-{{ section.id }} {
margin-top: {{ margin_top }}px;
margin-bottom: {{ margin_bottom }}px;
margin-left: {{ margin_horizontal }}rem;
margin-right: {{ margin_horizontal }}rem;
border-radius: {{ section_radius }}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-grid-body-{{ section.id }} {
grid-template-columns: 1fr 0.7fr;
gap: {{ layout_gap }}px;
}
.video-grid-slider-{{ section.id }} {
margin-left: 0rem !important;
margin-right: 0rem !important;
padding-left: 0rem !important;
padding-right: 0rem !important;
}
.video-grid-play-{{ section.id }} svg {
width: {{ play_size }}px;
height: {{ play_size }}px;
}
.video-grid-btn-prev-{{ section.id }},
.video-grid-btn-next-{{ section.id }} {
width: {{ arrow_size }}px;
height: {{ arrow_size }}px;
}
.video-grid-btn-prev-{{ section.id }} .animate-icon:before,
.video-grid-btn-next-{{ section.id }} .animate-icon:before {
width: {{ arrow_icon_size }}px;
height: {{ arrow_icon_size }}px;
}
.video-grid-btn-prev-{{ section.id }} .animate-icon:after,
.video-grid-btn-next-{{ section.id }} .animate-icon:after {
width: {{ arrow_icon_size | minus: 0.3 }}px;
}
.video-grid-content-{{ section.id }} {
align-items: {{ content_horizontal_align }};
}
.video-grid-heading-{{ section.id }} {
text-align: {{ content_align }};
}
.video-grid-heading-{{ section.id }} * {
font-size: {{ heading_size }}px;
}
.video-grid-feature-{{ section.id }} {
gap: {{ feature_gap }}px;
padding: {{ feature_padding_vertical }}px 0px;
}
.video-grid-circle-{{ section.id }} {
height: {{ circle_size }}px;
}
.video-grid-circle-container-{{ section.id }} svg {
width: {{ circle_size }}px;
height: {{ circle_size }}px;
}
.video-grid-circle-container-{{ section.id }} span {
font-size: {{ percent_size }}px;
}
.video-grid-feature-text-{{ section.id }} {
text-align: {{ content_align }};
}
.video-grid-feature-text-{{ section.id }} * {
font-size: {{ feature_text_size }}px;
}
.video-grid-text-{{ section.id }} {
margin-top: {{ text_mt }}px;
text-align: {{ content_align }};
}
.video-grid-text-{{ section.id }} * {
font-size: {{ text_size }}px;
}
.video-grid-button-{{ section.id }} {
margin-top: {{ button_mt }}px;
padding: {{ button_padding_vertical }}px {{ button_padding_horizontal }}px;
font-size: {{ button_size }}px;
}
}
{%- endstyle -%}
{% unless full_width %}
<style>
.section-{{ section.id }}-settings {
max-width: {{ content_width }}px;
}
</style>
{% endunless %}
{% if margin_horizontal_mobile > 0 %}
<style>
.section-{{ section.id }} {
border-left: solid {{ border_color }} {{ border_thickness }}px;
border-right: solid {{ border_color }} {{ border_thickness }}px;
}
@media(min-width: 1024px) {
.section-{{ section.id }} {
border-left: 0px;
border-right: 0px;
}
}
</style>
{% endif %}
{% if margin_horizontal > 0 %}
<style>
@media(min-width: 1024px) {
.section-{{ section.id }} {
border-left: solid {{ border_color }} {{ border_thickness }}px;
border-right: solid {{ border_color }} {{ border_thickness }}px;
}
}
</style>
{% endif %}
{% if heading_custom %}
<style>
.video-grid-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 text_custom %}
<style>
.video-grid-text-{{ section.id }} * {
font-family: {{ text_font.family }}, {{ text_font.fallback_families }};
font-weight: {{ text_font.weight }};
font-style: {{ text_font.style }};
}
</style>
{% endif %}
{% if feature_text_custom %}
<style>
.video-grid-feature-text-{{ section.id }} * {
font-family: {{ feature_text_font.family }}, {{ feature_text_font.fallback_families }};
font-weight: {{ feature_text_font.weight }};
font-style: {{ feature_text_font.style }};
}
</style>
{% endif %}
{% if percent_custom %}
<style>
.video-grid-circle-container-{{ section.id }} span {
font-family: {{ percent_font.family }}, {{ percent_font.fallback_families }};
font-weight: {{ percent_font.weight }};
font-style: {{ percent_font.style }};
}
</style>
{% endif %}
{% if button_custom %}
<style>
.video-grid-button-{{ section.id }} {
font-family: {{ button_font.family }}, {{ button_font.fallback_families }};
font-weight: {{ button_font.weight }};
font-style: {{ button_font.style }};
}
</style>
{% endif %}
{% if layout_mobile == 'content_videos'%}
<style>
.video-grid-content-{{ section.id }} {
order: 1;
}
.video-grid-videos-{{ section.id }} {
order: 2;
}
</style>
{% elsif layout_mobile == 'videos_content' %}
<style>
.video-grid-content-{{ section.id }} {
order: 2;
}
.video-grid-videos-{{ section.id }} {
order: 1;
}
</style>
{% endif %}
{% if layout == 'videos_content'%}
<style>
@media(min-width: 1024px) {
.video-grid-content-{{ section.id }} {
order: 2;
}
.video-grid-videos-{{ section.id }} {
order: 1;
}
.video-grid-body-{{ section.id }} {
grid-template-columns: 1fr 0.7fr;
}
}
</style>
{% elsif layout == 'content_videos' %}
<style>
@media(min-width: 1024px) {
.video-grid-content-{{ section.id }} {
order: 1;
}
.video-grid-videos-{{ section.id }} {
order: 2;
}
.video-grid-body-{{ section.id }} {
grid-template-columns: 0.7fr 1fr;
}
}
</style>
{% endif %}
{% if video_ratio_mobile == "portrait" %}
<style>
.video-grid-video-{{ section.id }} {
aspect-ratio: 8.6/13;
}
</style>
{% elsif video_ratio_mobile == "landscape" %}
<style>
.video-grid-video-{{ section.id }} {
aspect-ratio: 12/8;
}
</style>
{% elsif video_ratio_mobile == "square" %}
<style>
.video-grid-video-{{ section.id }} {
aspect-ratio: 12/12;
}
</style>
{% else %}
<style>
.video-grid-video-{{ section.id }} {
aspect-ratio: auto;
}
</style>
{% endif %}
{% if video_ratio == "portrait" %}
<style>
@media (min-width: 1024px) {
.video-grid-video-{{ section.id }} {
aspect-ratio: 8.6/13;
}
}
</style>
{% elsif video_ratio == "landscape" %}
<style>
@media (min-width: 1024px) {
.video-grid-video-{{ section.id }} {
aspect-ratio: 12/8;
}
}
</style>
{% elsif video_ratio == "square" %}
<style>
@media (min-width: 1024px) {
.video-grid-video-{{ section.id }} {
aspect-ratio: 12/12;
}
}
</style>
{% else %}
<style>
@media (min-width: 1024px) {
.video-grid-video-{{ section.id }} {
aspect-ratio: auto;
}
}
</style>
{% endif %}
{% if arrow_hover_effect == "color" %}
<style>
.video-grid-btn-prev-{{ section.id }}:hover,
.video-grid-btn-next-{{ section.id }}:hover {
transition: all 0.3s ease 0s;
border: {{ arrow_border_thickness }}px solid {{ arrow_border_hover_color }};
background: {{ arrow_bg_hover_color }};
}
.video-grid-btn-prev-{{ section.id }}:hover .animate-icon,
.video-grid-btn-next-{{ section.id }}:hover .animate-icon {
color: {{ arrow_hover_color }};
}
</style>
{% elsif arrow_hover_effect == "scale" %}
<style>
.video-grid-btn-prev-{{ section.id }}:hover,
.video-grid-btn-next-{{ section.id }}:hover {
transform: scale(0.9);
}
@media(min-width: 1024px) {
.video-grid-btn-prev-{{ section.id }}:hover,
.video-grid-btn-next-{{ section.id }}:hover {
transform: scale(0.9);
}
}
</style>
{% elsif arrow_hover_effect == "arrow" %}
<style>
.video-grid-btn-next-{{ section.id }}:hover .animate-icon:before {
transform: translate(calc(1 * 0.125rem)) rotate(calc(1 * 45deg));
}
.video-grid-btn-prev-{{ section.id }}:hover .animate-icon:before {
transform: translate(calc(-1 * 0.125rem)) rotate(calc(1 * 45deg));
}
.video-grid-btn-prev-{{ section.id }}:hover .animate-icon:after,
.video-grid-btn-next-{{ section.id }}:hover .animate-icon:after {
opacity: 1;
transform: scaleX(1);
}
</style>
{% endif %}
{% if arrow_show_mobile %}
<style>
.video-grid-btn-prev-{{ section.id }},
.video-grid-btn-next-{{ section.id }} {
display: flex;
}
</style>
{% else %}
<style>
.video-grid-btn-prev-{{ section.id }},
.video-grid-btn-next-{{ section.id }} {
display: none;
}
</style>
{% endif %}
{% if arrow_show_desktop %}
<style>
@media(min-width: 1024px) {
.video-grid-btn-prev-{{ section.id }},
.video-grid-btn-next-{{ section.id }} {
display: flex;
}
}
</style>
{% else %}
<style>
@media(min-width: 1024px) {
.video-grid-btn-prev-{{ section.id }},
.video-grid-btn-next-{{ section.id }} {
display: none;
}
}
</style>
{% endif %}
{% if button_style == "non_outline" or button_style == "non_outline_arrow" %}
<style>
.video-grid-button-{{ section.id }} {
background-color: {{ button_bg_color }};
}
.video-grid-button-{{ section.id }}:hover {
transition: all 0.25s ease 0s;
background-color: {{ button_bg_hover_color }};
}
</style>
{% elsif button_style == "outline" or button_style == "outline_arrow" %}
<style>
.video-grid-button-{{ section.id }} {
background-color: {{ button_bg_color }};
border: {{ button_border_thickness }}px solid {{ button_border_color }};
}
.video-grid-button-{{ section.id }}:hover {
transition: all 0.25s ease 0s;
background-color: {{ button_bg_hover_color }};
border: {{ button_border_thickness }}px solid {{ button_border_hover_color }};
}
</style>
{% elsif button_style == "link" %}
<style>
.video-grid-button-{{ section.id }} {
padding: 0px !important;
}
</style>
{% endif %}
{% if content_align_mobile == "center" %}
<style>
.video-grid-feature-{{ section.id }} {
flex-direction: column;
}
</style>
{% elsif content_align_mobile == "right" %}
<style>
.video-grid-feature-{{ section.id }} {
flex-direction: row-reverse;
}
</style>
{% endif %}
{% if content_align == "center" %}
<style>
@media(min-width: 1024px) {
.video-grid-feature-{{ section.id }} {
flex-direction: column;
}
}
</style>
{% elsif content_align == "right" %}
<style>
@media(min-width: 1024px) {
.video-grid-feature-{{ section.id }} {
flex-direction: row-reverse;
}
}
</style>
{% else %}
<style>
@media(min-width: 1024px) {
.video-grid-feature-{{ section.id }} {
flex-direction: row;
}
}
</style>
{% endif %}
{% comment %} PREVIEW {% endcomment %}
<style>
.video-grid-slider-{{ section.id }}.preview .swiper-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
}
.video-grid-slider-{{ section.id }}.preview .video-grid-video-{{ section.id }} {
width: 100%;
}
.video-grid-slider-{{ section.id }}.preview .video-grid-video-{{ section.id }}:not(:first-child) {
margin-left: {{ slider_gap_mobile }}px;
}
@media(min-width: 1024px) {
.video-grid-slider-{{ section.id }}.preview .video-grid-video-{{ section.id }}:not(:first-child) {
margin-left: {{ slider_gap }}px;
}
.video-grid-slider-{{ section.id }}.preview .video-grid-video-{{ section.id }} {
width: calc(100% / {{ slider_view }} - ({{ slider_gap }}px));
}
}
</style>
<div class="section-{{ section.id }} video-grid-{{ section.id }}" style="background-color:{{ background_color }}; background-image: {{ background_gradient }};">
<div class="section-{{ section.id }}-settings">
<div class="video-grid-body-{{ section.id }}">
<div class="video-grid-videos-{{ section.id }}">
<button class="video-grid-btn-prev-{{ section.id }}">
<span class="animate-icon"></span>
</button>
<div class="video-grid-slider-wrapper-{{ section.id }}">
<div class="video-grid-slider-{{ section.id }} preview swiper"
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 %}
{% if block.type == 'video' %}
<div class="video-grid-video-{{ section.id }} swiper-slide">
{% assign video_id = block.settings.video.id | default: block.settings.video_url.id %}
{% assign loop = '&loop=1&playlist=' | append: video_id %}
{%- if block.settings.video == null and block.settings.video_url != null -%}
<div class="video-grid-video-wrap-{{ section.id }}">
{%- if block.settings.video_url.type == 'youtube' -%}
<iframe
data-src="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&mute=1&autoplay=0&controls=0&showinfo=0{{ loop }}"
data-src1="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&mute=0&autoplay=1&controls=0&showinfo=0{{ loop }}"
data-src2="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&mute=1&autoplay=0&controls=0&showinfo=0{{ loop }}"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
class="lazy"
></iframe>
{%- else -%}
<iframe
data-src="https://player.vimeo.com/video/{{ video_id }}?enablejsapi=1&mute=1&autoplay=1&controls=0&showinfo=0{{ loop }}"
data-src1="https://player.vimeo.com/video/{{ video_id }}?enablejsapi=1&mute=0&autoplay=1&controls=0&showinfo=0{{ loop }}"
data-src2="https://player.vimeo.com/video/{{ video_id }}?enablejsapi=1&mute=1&autoplay=1&controls=0&showinfo=0{{ loop }}"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
class="lazy"
></iframe>
{% endif %}
<div class="video-grid-play-{{ section.id }} active">
<svg xmlns="http://www.w3.org/2000/svg" width="10.309" height="12.477" viewBox="0 0 10.309 12.477">
<path id="Polygon_2" data-name="Polygon 2" d="M6.238,0l6.238,10.309H0Z" transform="translate(10.309) rotate(90)" fill="currentColor"></path>
</svg>
</div>
</div>
{% else %}
<div class="video-grid-video-wrap-{{ section.id }}">
<video data-src="{{ block.settings.video.sources[1].url }}" playsinline preload="none" loop class="lazy"></video>
<div class="video-grid-play-{{ section.id }} active">
<svg xmlns="http://www.w3.org/2000/svg" width="10.309" height="12.477" viewBox="0 0 10.309 12.477">
<path id="Polygon_2" data-name="Polygon 2" d="M6.238,0l6.238,10.309H0Z" transform="translate(10.309) rotate(90)" fill="currentColor"></path>
</svg>
</div>
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<button class="video-grid-btn-next-{{ section.id }}">
<span class="animate-icon"></span>
</button>
</div>
<div class="video-grid-content-{{ section.id }}">
{% if heading != blank %}
<div class="video-grid-heading-{{ section.id }}">{{ heading }}</div>
{% endif %}
{% assign feature_blocks = section.blocks | where: "type", "feature" %}
{% if feature_blocks.size > 0 %}
<div class="video-grid-features-{{ section.id }}">
{% for block in section.blocks %}
{% if block.type == 'feature' %}
<div class="video-grid-feature-{{ section.id }}">
{% if block.settings.percent > 0 %}
<div class="video-grid-circle-container-{{ section.id }}">
<div class="video-grid-circle-{{ section.id }}" data-percent="{{ block.settings.percent }}" data-progress="{{ circle_progress }}" data-active-progress="{{ circle_active_progress }}">
<svg width="100" height="100" viewBox="0 0 36 36" style="background-color: transparent;">
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="{{ circle_progress }}" stroke-width="4" stroke-dasharray="100, 100"></path>
</svg>
<span>0%</span>
</div>
</div>
{% endif %}
{% if block.settings.text %}
<div class="video-grid-feature-text-{{ section.id }}">{{ block.settings.text }}</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% if text != blank %}
<div class="video-grid-text-{{ section.id }}">{{ text }}</div>
{% endif %}
{% if button != blank %}
<{% if button_url != blank %}a href="{{ button_url }}"{% else %}div{% endif %} class="video-grid-button-{{ section.id }}">
<p class="video-grid-button-inner-{{ section.id }}">
{{ button }}
{% if button_style == "non_outline_arrow" or button_style == "outline_arrow" %}
<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M187.827 98.7858C188.123 98.4749 188.123 98.4749 188.123 98.1761C188.419 97.8652 188.419 97.5663 188.704 97.5663C189 96.9566 189 96.6458 189 96.0361C189 95.4263 189 94.8166 188.704 94.5058C188.704 94.195 188.408 93.8961 188.123 93.5852C188.123 93.2744 187.827 93.2744 187.827 92.9755L103.287 4.21945C102.41 3.29889 101.533 3 100.668 3C99.791 3 98.6295 3.31083 98.0488 4.21945C97.1719 5.14 96.8872 6.06058 96.8872 6.96919C96.8872 7.88974 97.1833 9.10918 98.0488 9.7189L175.587 92.0539H6.79206C4.75371 92.0539 3 93.895 3 96.0351C3 98.1751 4.75365 100.016 6.79206 100.016H175.575L97.7543 182.042C96.2967 183.572 96.2967 186.322 97.7543 187.852C99.2119 189.383 101.831 189.383 103.288 187.852L187.827 98.7858Z" fill="black"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M188.607 97.5657C188.432 97.5657 188.365 97.6788 188.27 97.8382C188.211 97.9378 188.141 98.0554 188.027 98.1748C188.027 98.4734 188.027 98.4734 187.731 98.7839L103.281 187.759C101.825 189.287 99.2085 189.287 97.7524 187.759C96.2963 186.23 96.2963 183.483 97.7524 181.954L175.492 100.013L6.88489 100.013C4.8486 100.013 3.09677 98.1739 3.09677 96.036C3.09677 93.8982 4.84866 92.059 6.88489 92.059L175.504 92.059L98.0465 9.80878C97.182 9.19968 96.8862 7.9815 96.8862 7.0619C96.8862 6.15422 97.1706 5.2346 98.0465 4.315C98.6267 3.40732 99.787 3.0968 100.663 3.0968C101.527 3.0968 102.403 3.39539 103.279 4.315L187.731 92.9796C187.731 93.1274 187.804 93.2021 187.877 93.2774C187.952 93.3543 188.027 93.4319 188.027 93.5887C188.046 93.6098 188.066 93.6308 188.085 93.6518C188.338 93.9267 188.584 94.1935 188.606 94.4689C188.607 94.482 188.607 94.4951 188.607 94.5083C188.903 94.8188 188.903 95.4279 188.903 96.037C188.903 96.6461 188.903 96.9566 188.607 97.5657ZM191.489 93.2767C191.79 93.8661 191.89 94.4204 191.934 94.7363C192.001 95.2226 192 95.7194 192 95.9856L192 96.037C192 96.0544 192 96.0729 192 96.0926C192 96.3523 192.001 96.8096 191.924 97.2931C191.828 97.8884 191.64 98.41 191.393 98.9184L190.546 100.663H190.212C190.127 100.759 190.038 100.852 189.988 100.905L189.974 100.92L105.527 189.891C102.85 192.701 98.1865 192.704 95.51 189.895C94.1476 188.464 93.5636 186.587 93.5636 184.857C93.5636 183.128 94.1468 181.252 95.5071 179.822M191.489 93.2767C191.316 92.7908 191.078 92.4357 190.938 92.2406C190.903 92.1912 190.866 92.142 190.828 92.0939V91.7408L105.522 2.17912C104.076 0.661813 102.397 0 100.663 0C99.3914 0 97.0569 0.401401 95.6212 2.37737C94.3151 3.83819 93.7895 5.45521 93.7895 7.0619C93.7895 8.26663 94.1183 10.6061 95.9608 12.111L168.333 88.9622L6.88489 88.9622C2.9981 88.9622 0 92.3316 0 96.036C0 99.7405 2.99801 103.11 6.88489 103.11L168.285 103.11" fill="black"></path>
<path d="M169.5 104L16.5 102.5V90H171L97.5 10.5V7L107.5 4.5C131.167 29.6667 180.2 81.5 187 87.5C193.8 93.5 191.5 99 189.5 101L105.5 184L94 181.5L169.5 104Z" fill="black"></path>
</svg>
{% endif %}
</p>
</{% if button_url != blank %}a{% else %}div{% endif %}>
{% endif %}
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/dist/lazyload.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@6.8.4/swiper-bundle.min.js"></script>
<script>
function initVideoFromSocial4() {
let lazyLoadInstance = new LazyLoad();
window.addEventListener(
"LazyLoad::Initialized",
function (event) {
window.lazyLoadInstance = event.detail.instance;
},
false
);
document.querySelector('.video-grid-slider-{{ section.id }}').classList.remove('preview');
// Restore Swiper initialization
const slider = new Swiper('.video-grid-slider-{{ section.id }}', {
speed: 300,
loop: true,
slideToClickedSlide: false,
loopAdditionalSlides: 1,
slidesPerGroup: 1,
navigation: {
nextEl: '.video-grid-btn-next-{{ section.id }}',
prevEl: '.video-grid-btn-prev-{{ section.id }}',
},
breakpoints: {
320: {
spaceBetween: parseInt(document.querySelector('.video-grid-slider-{{ section.id }}').dataset.gapMobile || 0),
slidesPerView: parseFloat(document.querySelector('.video-grid-slider-{{ section.id }}').dataset.viewMobile || 1),
},
768: {
spaceBetween: parseInt(document.querySelector('.video-grid-slider-{{ section.id }}').dataset.gap || 0),
slidesPerView: parseFloat(document.querySelector('.video-grid-slider-{{ section.id }}').dataset.view || 3),
},
1024: {
spaceBetween: parseInt(document.querySelector('.video-grid-slider-{{ section.id }}').dataset.gap || 0),
slidesPerView: parseFloat(document.querySelector('.video-grid-slider-{{ section.id }}').dataset.view || 3),
}
}
});
// Video interaction code
const videoItems = document.querySelectorAll('.video-grid-video-{{ section.id }}');
if (videoItems) {
videoItems.forEach(item => {
const video = item.querySelector('video');
const iframe = item.querySelector('iframe');
const videoButton = item.querySelector('.video-grid-play-{{ section.id }}');
const wrap = item.querySelector('.video-grid-video-wrap-{{ section.id }}');
if (wrap) {
wrap.addEventListener('click', function() {
videoItems.forEach(otherItem => {
const otherVideo = otherItem.querySelector('video');
const otherIframe = otherItem.querySelector('iframe');
const otherButton = otherItem.querySelector('.video-grid-play-{{ section.id }}');
if (otherVideo && otherVideo !== video) {
otherVideo.pause();
otherButton.classList.add('active');
}
if (otherIframe && otherIframe !== iframe) {
otherIframe.src=otherIframe.getAttribute('data-src2');
otherButton.classList.add('active');
}
});
if (videoButton.classList.contains('active')) {
if (video) video.play();
if (iframe) iframe.src=iframe.getAttribute('data-src1');
} else {
if (video) video.pause();
if (iframe) iframe.src=iframe.getAttribute('data-src2');
}
videoButton.classList.toggle('active');
});
}
});
}
// Circle animation code with one-time animation
let circles = document.querySelectorAll('.video-grid-circle-{{ section.id }}');
const animatedCircles = new Set();
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const circle = entry.target;
// Skip if this circle has already been animated
if (animatedCircles.has(circle)) {
return;
}
const progressColor = circle.getAttribute('data-progress');
const activeProgressColor = circle.getAttribute('data-active-progress');
const percent = parseFloat(circle.getAttribute('data-percent')) || 25;
const lineWidth = parseFloat(circle.getAttribute('data-line')) || 4;
const size = parseFloat(circle.getAttribute('data-size')) || 100;
const svgNamespace = "http://www.w3.org/2000/svg";
let existingSvg = circle.querySelector("svg");
if (existingSvg) {
existingSvg.remove();
}
let existingSpan = circle.querySelector("span");
if (existingSpan) {
existingSpan.remove();
}
let svg = document.createElementNS(svgNamespace, "svg");
svg.setAttribute("width", size);
svg.setAttribute("height", size);
svg.setAttribute("viewBox", "0 0 36 36");
svg.style.backgroundColor = "transparent";
let backgroundCircle = document.createElementNS(svgNamespace, "path");
backgroundCircle.setAttribute("d", "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831");
backgroundCircle.setAttribute("fill", "none");
backgroundCircle.setAttribute("stroke", `${progressColor}`);
backgroundCircle.setAttribute("stroke-width", lineWidth);
backgroundCircle.setAttribute("stroke-dasharray", "100, 100");
let activeCircle = document.createElementNS(svgNamespace, "path");
activeCircle.setAttribute("d", "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831");
activeCircle.setAttribute("fill", "none");
activeCircle.setAttribute("stroke", `${activeProgressColor}`);
activeCircle.setAttribute("stroke-width", lineWidth);
activeCircle.setAttribute("stroke-dasharray", "0, 100");
activeCircle.classList.add("active-circle");
svg.appendChild(backgroundCircle);
svg.appendChild(activeCircle);
circle.appendChild(svg);
let span = document.createElement("span");
span.textContent = "0%";
circle.appendChild(span);
if (entry.isIntersecting) {
// Mark this circle as animated
animatedCircles.add(circle);
let currentPercent = 0;
function animateCircle() {
let dashArray = `${currentPercent}, 100`;
activeCircle.setAttribute("stroke-dasharray", dashArray);
span.textContent = Math.round(currentPercent) + "%";
if (currentPercent < percent) {
currentPercent += 1;
requestAnimationFrame(animateCircle);
}
}
animateCircle();
}
});
}, { threshold: 0.5 });
circles.forEach((circle) => observer.observe(circle));
}
document.addEventListener('DOMContentLoaded', initVideoFromSocial4);
if (Shopify.designMode) {
document.addEventListener('shopify:section:unload', initVideoFromSocial4);
document.addEventListener('shopify:section:load', initVideoFromSocial4);
}
</script>
{% schema %}
{
"name": "SS - Video grid social #4",
"settings": [
{
"type": "paragraph",
"content": "⚠️ Save settings to view updates"
},
{
"type": "header",
"content": "Layout settings"
},
{
"type": "select",
"id": "layout",
"label": "Layout",
"default": "videos_content",
"options": [
{
"label": "Videos - content",
"value": "videos_content"
},
{
"label": "Content - videos",
"value": "content_videos"
}
]
},
{
"type": "select",
"id": "layout_mobile",
"label": "Layout - mobile",
"default": "videos_content",
"options": [
{
"label": "Videos - content",
"value": "videos_content"
},
{
"label": "Content - videos",
"value": "content_videos"
}
]
},
{
"type": "range",
"id": "layout_gap",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Gap",
"default": 36
},
{
"type": "range",
"id": "layout_gap_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Gap",
"default": 24
},
{
"type": "header",
"content": "Slider settings"
},
{
"type": "range",
"id": "slider_view",
"min": 1,
"max": 5,
"step": 0.5,
"label": "Slides to show",
"default": 3
},
{
"type": "range",
"id": "slider_view_mobile",
"min": 1,
"max": 2,
"step": 0.1,
"label": "Slides to show - mobile",
"default": 1.6
},
{
"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": "header",
"content": "Video settings"
},
{
"type": "range",
"id": "video_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 8
},
{
"type": "range",
"id": "video_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 0
},
{
"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": "header",
"content": "Play button settings"
},
{
"type": "range",
"id": "play_size",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Size",
"default": 36
},
{
"type": "range",
"id": "play_size_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Size - mobile",
"default": 36
},
{
"type": "range",
"id": "play_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 100
},
{
"type": "range",
"id": "play_bg_overlay",
"min": 0,
"max": 1,
"step": 0.1,
"label": "Background opacity",
"default": 0.7
},
{
"type": "header",
"content": "Arrow settings"
},
{
"type": "range",
"id": "arrow_size",
"min": 10,
"max": 100,
"step": 2,
"unit": "px",
"label": "Size",
"default": 32
},
{
"type": "range",
"id": "arrow_size_mobile",
"min": 10,
"max": 100,
"step": 2,
"unit": "px",
"label": "Size - mobile",
"default": 28
},
{
"type": "range",
"id": "arrow_icon_size",
"min": 5,
"max": 15,
"step": 1,
"unit": "px",
"label": "Icon size",
"default": 12
},
{
"type": "range",
"id": "arrow_icon_size_mobile",
"min": 5,
"max": 15,
"step": 1,
"unit": "px",
"label": "Icon size - mobile",
"default": 10
},
{
"type": "range",
"id": "arrow_border_thickness",
"min": 0,
"max": 10,
"step": 0.5,
"unit": "px",
"label": "Border thickness",
"default": 0
},
{
"type": "range",
"id": "arrow_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 100
},
{
"type": "select",
"id": "arrow_hover_effect",
"label": "Hover effect",
"default": "color",
"options": [
{
"label": "Change color",
"value": "color"
},
{
"label": "Change size",
"value": "scale"
},
{
"label": "Change arrow",
"value": "arrow"
},
{
"label": "None",
"value": "none"
}
]
},
{
"type": "checkbox",
"id": "arrow_show_desktop",
"label": "Show on desktop",
"default": true
},
{
"type": "checkbox",
"id": "arrow_show_mobile",
"label": "Show on mobile",
"default": false
},
{
"type": "header",
"content": "Content settings"
},
{
"type": "text_alignment",
"id": "content_align",
"label": "Alignment"
},
{
"type": "text_alignment",
"id": "content_align_mobile",
"label": "Alignment - mobile"
},
{
"type": "header",
"content": "Heading settings"
},
{
"type": "richtext",
"id": "heading",
"label": "Heading",
"default": "<p>Results</p>"
},
{
"type": "checkbox",
"id": "heading_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "heading_font",
"label": "Font family",
"default": "josefin_sans_n4"
},
{
"type": "range",
"id": "heading_size",
"min": 0,
"max": 72,
"step": 2,
"unit": "px",
"label": "Font size",
"default": 48
},
{
"type": "range",
"id": "heading_size_mobile",
"min": 0,
"max": 72,
"step": 2,
"unit": "px",
"label": "Font size - mobile",
"default": 36
},
{
"type": "range",
"id": "heading_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 130
},
{
"type": "header",
"content": "Feature settings"
},
{
"type": "range",
"id": "feature_padding_vertical",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding vertical",
"default": 12
},
{
"type": "range",
"id": "feature_padding_vertical_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding vertical - mobile",
"default": 12
},
{
"type": "range",
"id": "feature_gap",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Gap",
"default": 30
},
{
"type": "range",
"id": "feature_gap_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Gap - mobile",
"default": 20
},
{
"type": "range",
"id": "feature_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 1
},
{
"type": "header",
"content": "Feature circle settings"
},
{
"type": "range",
"id": "circle_size",
"min": 20,
"max": 200,
"step": 2,
"unit": "px",
"label": "Circle size",
"default": 80
},
{
"type": "range",
"id": "circle_size_mobile",
"min": 20,
"max": 200,
"step": 2,
"unit": "px",
"label": "Circle size - mobile",
"default": 70
},
{
"type": "header",
"content": "Feature percent settings"
},
{
"type": "checkbox",
"id": "percent_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "percent_font",
"label": "Font family",
"default": "josefin_sans_n4"
},
{
"type": "range",
"id": "percent_size",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 20
},
{
"type": "range",
"id": "percent_size_mobile",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 16
},
{
"type": "range",
"id": "percent_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 130
},
{
"type": "header",
"content": "Feature text settings"
},
{
"type": "checkbox",
"id": "feature_text_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "feature_text_font",
"label": "Font family",
"default": "josefin_sans_n4"
},
{
"type": "range",
"id": "feature_text_size",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 16
},
{
"type": "range",
"id": "feature_text_size_mobile",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 13
},
{
"type": "range",
"id": "feature_text_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 150
},
{
"type": "header",
"content": "Caption settings"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Caption about the results and/or link for their proof.</p>"
},
{
"type": "checkbox",
"id": "text_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "text_font",
"label": "Font family",
"default": "josefin_sans_n4"
},
{
"type": "range",
"id": "text_size",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 13
},
{
"type": "range",
"id": "text_size_mobile",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 12
},
{
"type": "range",
"id": "text_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 150
},
{
"type": "range",
"id": "text_mt",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Margin top",
"default": 12
},
{
"type": "range",
"id": "text_mt_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Margin top - mobile",
"default": 12
},
{
"type": "header",
"content": "Button settings"
},
{
"type": "text",
"id": "button",
"label": "Button label",
"info": "Leave the label blank to hide the button.",
"default": "Shop now"
},
{
"type": "url",
"id": "button_url",
"label": "URL"
},
{
"type": "checkbox",
"id": "button_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "button_font",
"label": "Font family",
"default": "josefin_sans_n4"
},
{
"type": "range",
"id": "button_size",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 16
},
{
"type": "range",
"id": "button_size_mobile",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 16
},
{
"type": "range",
"id": "button_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 100
},
{
"type": "range",
"id": "button_padding_horizontal",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding horizontal",
"default": 24
},
{
"type": "range",
"id": "button_padding_horizontal_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding horizontal - mobile",
"default": 24
},
{
"type": "range",
"id": "button_padding_vertical",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding vertical",
"default": 14
},
{
"type": "range",
"id": "button_padding_vertical_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding vertical - mobile",
"default": 14
},
{
"type": "range",
"id": "button_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 0
},
{
"type": "range",
"id": "button_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 1
},
{
"type": "range",
"id": "button_mt",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Margin top",
"default": 24
},
{
"type": "range",
"id": "button_mt_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Margin top - mobile",
"default": 20
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"default": "outline",
"options": [
{
"label": "Link",
"value": "link"
},
{
"label": "Non-outline",
"value": "non_outline"
},
{
"label": "Non-outline & arrow",
"value": "non_outline_arrow"
},
{
"label": "Outline",
"value": "outline"
},
{
"label": "Outline & arrow",
"value": "outline_arrow"
}
]
},
{
"type": "header",
"content": "Video colors"
},
{
"type": "color",
"label": "Border",
"id": "video_border_color",
"default": "#000000"
},
{
"type": "header",
"content": "Play button colors"
},
{
"type": "color",
"label": "Background",
"id": "play_bg_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Icon",
"id": "play_color",
"default": "#000000"
},
{
"type": "header",
"content": "Arrow colors"
},
{
"type": "color",
"label": "Icon",
"id": "arrow_color",
"default": "#7B7B7B"
},
{
"type": "color",
"label": "Icon hover",
"id": "arrow_hover_color",
"default": "#7B7B7B"
},
{
"type": "color",
"label": "Background",
"id": "arrow_bg_color"
},
{
"type": "color",
"label": "Background hover",
"id": "arrow_bg_hover_color"
},
{
"type": "color",
"label": "Border",
"id": "arrow_border_color",
"default": "#C7C7C7"
},
{
"type": "color",
"label": "Border hover",
"id": "arrow_border_hover_color",
"default": "#C7C7C7"
},
{
"type": "header",
"content": "Content colors"
},
{
"type": "color",
"label": "Heading",
"id": "heading_color",
"default": "#000000"
},
{
"type": "color",
"label": "Caption",
"id": "text_color",
"default": "#000000"
},
{
"type": "header",
"content": "Feature colors"
},
{
"type": "color",
"label": "Text",
"id": "feature_text_color",
"default": "#7B7B7B"
},
{
"type": "color",
"label": "Percent",
"id": "percent_color",
"default": "#000000"
},
{
"type": "color",
"label": "Circle progress",
"id": "circle_progress",
"default": "#F3F3F3"
},
{
"type": "color",
"label": "Circle progress active",
"id": "circle_active_progress",
"default": "#000000"
},
{
"type": "color",
"label": "Border",
"id": "feature_border_color",
"default": "#E6E6E6"
},
{
"type": "header",
"content": "Button colors"
},
{
"type": "color",
"label": "Text",
"id": "button_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Hover text",
"id": "button_hover_color",
"default": "#000000"
},
{
"type": "color",
"label": "Background",
"id": "button_bg_color",
"default": "#000000"
},
{
"type": "color",
"label": "Background hover",
"id": "button_bg_hover_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Button border",
"id": "button_border_color",
"default": "#000000"
},
{
"type": "color",
"label": "Border hover",
"id": "button_border_hover_color",
"default": "#000000"
},
{
"type": "header",
"content": "Section colors"
},
{
"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": "#000000"
},
{
"type": "header",
"content": "Section margin (outside)"
},
{
"type": "range",
"id": "margin_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Margin top",
"default": 0
},
{
"type": "range",
"id": "margin_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Margin bottom",
"default": 0
},
{
"type": "range",
"id": "margin_horizontal",
"min": 0,
"max": 30,
"step": 1,
"unit": "rem",
"label": "Margin sides",
"default": 0
},
{
"type": "range",
"id": "margin_horizontal_mobile",
"min": 0,
"max": 15,
"step": 0.5,
"unit": "rem",
"label": "Margin sides mobile",
"default": 0
},
{
"type": "header",
"content": "Section padding (inside)"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding bottom",
"default": 36
},
{
"type": "range",
"id": "padding_horizontal",
"min": 0,
"max": 30,
"step": 1,
"unit": "rem",
"label": "Padding sides",
"default": 5
},
{
"type": "range",
"id": "padding_horizontal_mobile",
"min": 0,
"max": 15,
"step": 0.5,
"unit": "rem",
"label": "Padding sides mobile",
"default": 1.5
},
{
"type": "header",
"content": "Section settings"
},
{
"type": "checkbox",
"id": "full_width",
"label": "Full width",
"default": true
},
{
"type": "range",
"id": "content_width",
"min": 800,
"max": 2000,
"step": 100,
"unit": "px",
"label": "Section content width",
"default": 1200
},
{
"type": "range",
"id": "border_thickness",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 0
},
{
"type": "range",
"id": "section_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Section roundness",
"default": 0
},
{
"type": "checkbox",
"id": "lazy",
"label": "Lazy load",
"info": "Lazy load images for speed optimisation",
"default": true
}
],
"blocks": [
{
"type": "video",
"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"
],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"info": "Youtube or Vimeo. Shows when no Shopify-hosted video is selected."
}
]
},
{
"type": "feature",
"name": "Feature",
"settings": [
{
"type": "range",
"id": "percent",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Percent",
"default": 90
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Noticed that this product has significantly improved their life.</p>"
}
]
}
],
"presets": [
{
"name": "SS - Video grid from social #4",
"blocks": [
{
"type": "video"
},
{
"type": "video"
},
{
"type": "video"
},
{
"type": "video"
},
{
"type": "feature"
},
{
"type": "feature"
},
{
"type": "feature"
}
]
}
]
}
{% endschema %}
Hey ProtoMan44, sure here is the code:
{% comment %}
---------------------------------------------------------
Copyright © 2023 Section Store. All rights reserved.
Unauthorized copying, modification, distribution, or use
of this code or any portion of it, is strictly prohibited.
Violators will be prosecuted to the fullest extent of the law.
For inquiries or permissions, contact daniel@section.store
---------------------------------------------------------
{% endcomment %}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/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 margin_horizontal_mobile = section.settings.margin_horizontal_mobile
assign margin_horizontal = section.settings.margin_horizontal
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 section_radius = section.settings.section_radius
assign layout = section.settings.layout
assign layout_mobile = section.settings.layout_mobile
assign layout_gap = section.settings.layout_gap
assign layout_gap_mobile = section.settings.layout_gap_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 video_radius = section.settings.video_radius
assign video_ratio = section.settings.video_ratio
assign video_ratio_mobile = section.settings.video_ratio_mobile
assign video_border_thickness = section.settings.video_border_thickness
assign video_border_color = section.settings.video_border_color
assign play_size = section.settings.play_size
assign play_size_mobile = section.settings.play_size_mobile
assign play_radius = section.settings.play_radius
assign play_bg_overlay = section.settings.play_bg_overlay
assign play_bg_color = section.settings.play_bg_color
assign play_color = section.settings.play_color
assign arrow_size = section.settings.arrow_size
assign arrow_size_mobile = section.settings.arrow_size_mobile
assign arrow_icon_size = section.settings.arrow_icon_size
assign arrow_icon_size_mobile = section.settings.arrow_icon_size_mobile
assign arrow_color = section.settings.arrow_color
assign arrow_hover_color = section.settings.arrow_hover_color
assign arrow_bg_color = section.settings.arrow_bg_color
assign arrow_bg_hover_color = section.settings.arrow_bg_hover_color
assign arrow_radius = section.settings.arrow_radius
assign arrow_border_thickness = section.settings.arrow_border_thickness
assign arrow_border_color = section.settings.arrow_border_color
assign arrow_border_hover_color = section.settings.arrow_border_hover_color
assign arrow_show_desktop = section.settings.arrow_show_desktop
assign arrow_show_mobile = section.settings.arrow_show_mobile
assign arrow_hover_effect = section.settings.arrow_hover_effect
assign content_align = section.settings.content_align
assign content_align_mobile = section.settings.content_align_mobile
assign content_horizontal_align = ""
if content_align == "center"
assign content_horizontal_align = "center"
elsif content_align == "right"
assign content_horizontal_align = "end"
else
assign content_horizontal_align = "start"
endif
assign content_horizontal_align_mobile = ""
if content_align_mobile == "center"
assign content_horizontal_align_mobile = "center"
elsif content_align_mobile == "right"
assign content_horizontal_align_mobile = "end"
else
assign content_horizontal_align_mobile = "start"
endif
assign heading = section.settings.heading
assign heading_custom = section.settings.heading_custom
assign heading_font = section.settings.heading_font
assign heading_size = section.settings.heading_size
assign heading_size_mobile = section.settings.heading_size_mobile
assign heading_height = section.settings.heading_height
assign heading_color = section.settings.heading_color
assign feature_gap = section.settings.feature_gap
assign feature_gap_mobile = section.settings.feature_gap_mobile
assign feature_padding_vertical = section.settings.feature_padding_vertical
assign feature_padding_vertical_mobile = section.settings.feature_padding_vertical_mobile
assign feature_border_thickness = section.settings.feature_border_thickness
assign feature_border_color = section.settings.feature_border_color
assign circle_progress = section.settings.circle_progress
assign circle_active_progress = section.settings.circle_active_progress
assign circle_size = section.settings.circle_size
assign circle_size_mobile = section.settings.circle_size_mobile
assign percent_size = section.settings.percent_size
assign percent_size_mobile = section.settings.percent_size_mobile
assign percent_color = section.settings.percent_color
assign percent_custom = section.settings.percent_custom
assign percent_font = section.settings.percent_font
assign percent_height = section.settings.percent_height
assign feature_text_custom = section.settings.feature_text_custom
assign feature_text_font = section.settings.feature_text_font
assign feature_text_size = section.settings.feature_text_size
assign feature_text_size_mobile = section.settings.feature_text_size_mobile
assign feature_text_height = section.settings.feature_text_height
assign feature_text_color = section.settings.feature_text_color
assign text = section.settings.text
assign text_custom = section.settings.text_custom
assign text_font = section.settings.text_font
assign text_size = section.settings.text_size
assign text_size_mobile = section.settings.text_size_mobile
assign text_height = section.settings.text_height
assign text_color = section.settings.text_color
assign text_mt = section.settings.text_mt
assign text_mt_mobile = section.settings.text_mt_mobile
assign button = section.settings.button
assign button_url = section.settings.button_url
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_radius = section.settings.button_radius
assign button_border_thickness = section.settings.button_border_thickness
assign button_border_color = section.settings.button_border_color
assign button_border_hover_color = section.settings.button_border_hover_color
assign button_bg_color = section.settings.button_bg_color
assign button_bg_hover_color = section.settings.button_bg_hover_color
assign button_style = section.settings.button_style
assign button_mt = section.settings.button_mt
assign button_mt_mobile = section.settings.button_mt_mobile
-%}
{%- style -%}
{{ heading_font | font_face: font_display: 'swap' }}
{{ text_font | font_face: font_display: 'swap' }}
{{ button_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;
margin-left: {{ margin_horizontal_mobile }}rem;
margin-right: {{ margin_horizontal_mobile }}rem;
border-radius: {{ section_radius | times: 0.6 | round: 0 }}px;
overflow: hidden;
}
.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-grid-body-{{ section.id }} {
display: grid;
grid-template-columns: 1fr;
gap: {{ layout_gap_mobile }}px;
}
.video-grid-videos-{{ section.id }} {
display: flex;
align-items: center;
gap: 14px;
}
.video-grid-slider-wrapper-{{ section.id }} {
display: grid;
width: 100%;
}
.video-grid-slider-{{ section.id }} {
flex: 1 1 0 !important;
min-width: 0 !important;
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;
}
.video-grid-video-{{ section.id }} {
position: relative !important;
z-index: 2 !important;
box-sizing: border-box !important;
border: {{ video_border_thickness }}px solid {{ video_border_color }} !important;
border-radius: {{ video_radius }}px !important;
overflow: hidden;
}
.video-grid-video-wrap-{{ section.id }} {
position: relative;
height: 100%;
z-index: 2;
pointer-events: auto;
}
.video-grid-video-wrap-{{ section.id }}:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.video-grid-video-{{ section.id }} video,
.video-grid-video-{{ section.id }} iframe {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
border: 0;
box-shadow: 0;
}
.video-grid-play-{{ section.id }} {
position: absolute;
top: 50%;
left: 50%;
padding: 15px;
border-radius: {{ play_radius }}px;
background-color: {{ play_bg_color | hex_to_rgba: play_bg_overlay }};
transform: translate(-50%, -50%);
z-index: 2;
pointer-events: none;
opacity: 0;
transition: all 0.25s ease 0s;
}
.video-grid-play-{{ section.id }} svg {
display: block;
width: {{ play_size_mobile }}px;
height: {{ play_size_mobile }}px;
object-fit: cover;
transform: translateX(12%);
}
.video-grid-play-{{ section.id }} svg path {
fill: {{ play_color }};
}
.video-grid-play-{{ section.id }}.active {
opacity: 1;
transition: all 0.25s ease 0s;
}
.video-grid-btn-prev-{{ section.id }},
.video-grid-btn-next-{{ section.id }} {
display: flex;
flex-shrink: 0;
width: {{ arrow_size_mobile }}px;
height: {{ arrow_size_mobile }}px;
border: 0px;
border: {{ arrow_border_thickness }}px solid {{ arrow_border_color }};
border-radius: {{ arrow_radius }}px;
background: transparent;
background: {{ arrow_bg_color }};
align-items: center;
justify-content: center;
transition: all 0.3s ease 0s;
cursor: pointer;
-webkit-appearance: none;
/* box-shadow: 0px 0px 10px 0px rgba(0,0,0,.15); */
}
.video-grid-btn-prev-{{ section.id }} .animate-icon,
.video-grid-btn-next-{{ section.id }} .animate-icon {
pointer-events: none;
place-items: center;
display: grid;
}
.video-grid-btn-prev-{{ section.id }} .animate-icon:before,
.video-grid-btn-next-{{ section.id }} .animate-icon:before {
content: "";
grid-area: 1 / -1;
transition: all .2s ease;
width: {{ arrow_icon_size_mobile }}px;
height: {{ arrow_icon_size_mobile }}px;
transform: rotate(calc(1 * 45deg));
box-sizing: border-box;
border-style: solid;
border: 0px;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
position: relative;
left: -1px;
}
.video-grid-btn-prev-{{ section.id }} .animate-icon:before {
left: unset;
right: -1px;
border-right: 0px;
border-top: 0px;
border-bottom: 2px solid currentColor;
border-left: 2px solid currentColor;
}
.video-grid-btn-prev-{{ section.id }} .animate-icon:after,
.video-grid-btn-next-{{ section.id }} .animate-icon:after {
content: "";
grid-area: 1 / -1;
transition: all .2s ease;
width: {{ arrow_icon_size_mobile | minus: 0.3 }}px;
height: 1.6px;
transform-origin: center;
opacity: 0;
background: currentColor;
transform: scaleX(.5);
}
.video-grid-btn-prev-{{ section.id }} span,
.video-grid-btn-next-{{ section.id }} span {
color: {{ arrow_color }};
}
.video-grid-btn-prev-{{ section.id }}.swiper-button-disabled,
.video-grid-btn-next-{{ section.id }}.swiper-button-disabled {
opacity: 0.5;
}
.video-grid-btn-prev-{{ section.id }}.swiper-button-lock,
.video-grid-btn-next-{{ section.id }}.swiper-button-lock {
opacity: 0;
pointer-events: none;
}
.video-grid-content-{{ section.id }} {
display: flex;
flex-direction: column;
align-items: {{ content_horizontal_align_mobile }};
}
.video-grid-heading-{{ section.id }} {
text-align: {{ content_align_mobile }};
}
.video-grid-heading-{{ section.id }} * {
margin: 0 0 16px 0;
font-size: {{ heading_size_mobile }}px;
color: {{ heading_color }};
line-height: {{ heading_height }}%;
text-transform: unset;
text-decoration: none;
font-weight: 700;
}
.video-grid-feature-{{ section.id }} {
display: flex;
align-items: center;
gap: {{ feature_gap_mobile }}px;
padding: {{ feature_padding_vertical_mobile }}px 0px;
border-bottom: {{ feature_border_thickness }}px solid {{ feature_border_color }};
}
.video-grid-circle-{{ section.id }} {
position: relative;
height: {{ circle_size_mobile }}px;
}
.video-grid-circle-container-{{ section.id }} svg {
width: {{ circle_size_mobile }}px;
height: {{ circle_size_mobile }}px;
}
.video-grid-circle-container-{{ section.id }} span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: {{ percent_size_mobile }}px;
color: {{ percent_color }};
line-height: {{ percent_height }}%;
display: block;
word-wrap: break-word;
text-transform: unset;
}
.video-grid-feature-text-{{ section.id }} {
text-align: {{ content_align_mobile }};
}
.video-grid-feature-text-{{ section.id }} * {
margin: 0;
font-size: {{ feature_text_size_mobile }}px;
color: {{ feature_text_color }};
line-height: {{ feature_text_height }}%;
text-transform: unset;
text-decoration: none;
}
.video-grid-text-{{ section.id }} {
margin-top: {{ text_mt_mobile }}px;
text-align: {{ content_align_mobile }};
}
.video-grid-text-{{ section.id }} * {
margin: 0;
font-size: {{ text_size_mobile }}px;
color: {{ text_color }};
line-height: {{ text_height }}%;
text-transform: unset;
text-decoration: none;
}
.video-grid-button-{{ section.id }} {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: fit-content;
margin-top: {{ button_mt_mobile }}px;
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;
border-radius: {{ button_radius }}px;
transition: all 0.25s ease 0s;
background-color: transparent;
border: 0px;
cursor: pointer;
font-weight: 700;
}
.video-grid-button-inner-{{ section.id }} {
margin: 0px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.video-grid-button-{{ section.id }}:hover {
color: {{ button_hover_color }};
transition: all 0.25s ease 0s;
}
.video-grid-button-{{ section.id }} svg {
width: 14px;
height: 14px;
}
.video-grid-button-{{ section.id }} svg path {
fill: {{ button_color }};
transition: all 0.25s ease 0s;
}
.video-grid-button-{{ section.id }}:hover svg path {
fill: {{ button_hover_color }};
transition: all 0.25s ease 0s;
}
@media(min-width: 1024px) {
.section-{{ section.id }} {
margin-top: {{ margin_top }}px;
margin-bottom: {{ margin_bottom }}px;
margin-left: {{ margin_horizontal }}rem;
margin-right: {{ margin_horizontal }}rem;
border-radius: {{ section_radius }}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-grid-body-{{ section.id }} {
grid-template-columns: 1fr 0.7fr;
gap: {{ layout_gap }}px;
}
.video-grid-slider-{{ section.id }} {
margin-left: 0rem !important;
margin-right: 0rem !important;
padding-left: 0rem !important;
padding-right: 0rem !important;
}
.video-grid-play-{{ section.id }} svg {
width: {{ play_size }}px;
height: {{ play_size }}px;
}
.video-grid-btn-prev-{{ section.id }},
.video-grid-btn-next-{{ section.id }} {
width: {{ arrow_size }}px;
height: {{ arrow_size }}px;
}
.video-grid-btn-prev-{{ section.id }} .animate-icon:before,
.video-grid-btn-next-{{ section.id }} .animate-icon:before {
width: {{ arrow_icon_size }}px;
height: {{ arrow_icon_size }}px;
}
.video-grid-btn-prev-{{ section.id }} .animate-icon:after,
.video-grid-btn-next-{{ section.id }} .animate-icon:after {
width: {{ arrow_icon_size | minus: 0.3 }}px;
}
.video-grid-content-{{ section.id }} {
align-items: {{ content_horizontal_align }};
}
.video-grid-heading-{{ section.id }} {
text-align: {{ content_align }};
}
.video-grid-heading-{{ section.id }} * {
font-size: {{ heading_size }}px;
}
.video-grid-feature-{{ section.id }} {
gap: {{ feature_gap }}px;
padding: {{ feature_padding_vertical }}px 0px;
}
.video-grid-circle-{{ section.id }} {
height: {{ circle_size }}px;
}
.video-grid-circle-container-{{ section.id }} svg {
width: {{ circle_size }}px;
height: {{ circle_size }}px;
}
.video-grid-circle-container-{{ section.id }} span {
font-size: {{ percent_size }}px;
}
.video-grid-feature-text-{{ section.id }} {
text-align: {{ content_align }};
}
.video-grid-feature-text-{{ section.id }} * {
font-size: {{ feature_text_size }}px;
}
.video-grid-text-{{ section.id }} {
margin-top: {{ text_mt }}px;
text-align: {{ content_align }};
}
.video-grid-text-{{ section.id }} * {
font-size: {{ text_size }}px;
}
.video-grid-button-{{ section.id }} {
margin-top: {{ button_mt }}px;
padding: {{ button_padding_vertical }}px {{ button_padding_horizontal }}px;
font-size: {{ button_size }}px;
}
}
{%- endstyle -%}
{% unless full_width %}
<style>
.section-{{ section.id }}-settings {
max-width: {{ content_width }}px;
}
</style>
{% endunless %}
{% if margin_horizontal_mobile > 0 %}
<style>
.section-{{ section.id }} {
border-left: solid {{ border_color }} {{ border_thickness }}px;
border-right: solid {{ border_color }} {{ border_thickness }}px;
}
@media(min-width: 1024px) {
.section-{{ section.id }} {
border-left: 0px;
border-right: 0px;
}
}
</style>
{% endif %}
{% if margin_horizontal > 0 %}
<style>
@media(min-width: 1024px) {
.section-{{ section.id }} {
border-left: solid {{ border_color }} {{ border_thickness }}px;
border-right: solid {{ border_color }} {{ border_thickness }}px;
}
}
</style>
{% endif %}
{% if heading_custom %}
<style>
.video-grid-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 text_custom %}
<style>
.video-grid-text-{{ section.id }} * {
font-family: {{ text_font.family }}, {{ text_font.fallback_families }};
font-weight: {{ text_font.weight }};
font-style: {{ text_font.style }};
}
</style>
{% endif %}
{% if feature_text_custom %}
<style>
.video-grid-feature-text-{{ section.id }} * {
font-family: {{ feature_text_font.family }}, {{ feature_text_font.fallback_families }};
font-weight: {{ feature_text_font.weight }};
font-style: {{ feature_text_font.style }};
}
</style>
{% endif %}
{% if percent_custom %}
<style>
.video-grid-circle-container-{{ section.id }} span {
font-family: {{ percent_font.family }}, {{ percent_font.fallback_families }};
font-weight: {{ percent_font.weight }};
font-style: {{ percent_font.style }};
}
</style>
{% endif %}
{% if button_custom %}
<style>
.video-grid-button-{{ section.id }} {
font-family: {{ button_font.family }}, {{ button_font.fallback_families }};
font-weight: {{ button_font.weight }};
font-style: {{ button_font.style }};
}
</style>
{% endif %}
{% if layout_mobile == 'content_videos'%}
<style>
.video-grid-content-{{ section.id }} {
order: 1;
}
.video-grid-videos-{{ section.id }} {
order: 2;
}
</style>
{% elsif layout_mobile == 'videos_content' %}
<style>
.video-grid-content-{{ section.id }} {
order: 2;
}
.video-grid-videos-{{ section.id }} {
order: 1;
}
</style>
{% endif %}
{% if layout == 'videos_content'%}
<style>
@media(min-width: 1024px) {
.video-grid-content-{{ section.id }} {
order: 2;
}
.video-grid-videos-{{ section.id }} {
order: 1;
}
.video-grid-body-{{ section.id }} {
grid-template-columns: 1fr 0.7fr;
}
}
</style>
{% elsif layout == 'content_videos' %}
<style>
@media(min-width: 1024px) {
.video-grid-content-{{ section.id }} {
order: 1;
}
.video-grid-videos-{{ section.id }} {
order: 2;
}
.video-grid-body-{{ section.id }} {
grid-template-columns: 0.7fr 1fr;
}
}
</style>
{% endif %}
{% if video_ratio_mobile == "portrait" %}
<style>
.video-grid-video-{{ section.id }} {
aspect-ratio: 8.6/13;
}
</style>
{% elsif video_ratio_mobile == "landscape" %}
<style>
.video-grid-video-{{ section.id }} {
aspect-ratio: 12/8;
}
</style>
{% elsif video_ratio_mobile == "square" %}
<style>
.video-grid-video-{{ section.id }} {
aspect-ratio: 12/12;
}
</style>
{% else %}
<style>
.video-grid-video-{{ section.id }} {
aspect-ratio: auto;
}
</style>
{% endif %}
{% if video_ratio == "portrait" %}
<style>
@media (min-width: 1024px) {
.video-grid-video-{{ section.id }} {
aspect-ratio: 8.6/13;
}
}
</style>
{% elsif video_ratio == "landscape" %}
<style>
@media (min-width: 1024px) {
.video-grid-video-{{ section.id }} {
aspect-ratio: 12/8;
}
}
</style>
{% elsif video_ratio == "square" %}
<style>
@media (min-width: 1024px) {
.video-grid-video-{{ section.id }} {
aspect-ratio: 12/12;
}
}
</style>
{% else %}
<style>
@media (min-width: 1024px) {
.video-grid-video-{{ section.id }} {
aspect-ratio: auto;
}
}
</style>
{% endif %}
{% if arrow_hover_effect == "color" %}
<style>
.video-grid-btn-prev-{{ section.id }}:hover,
.video-grid-btn-next-{{ section.id }}:hover {
transition: all 0.3s ease 0s;
border: {{ arrow_border_thickness }}px solid {{ arrow_border_hover_color }};
background: {{ arrow_bg_hover_color }};
}
.video-grid-btn-prev-{{ section.id }}:hover .animate-icon,
.video-grid-btn-next-{{ section.id }}:hover .animate-icon {
color: {{ arrow_hover_color }};
}
</style>
{% elsif arrow_hover_effect == "scale" %}
<style>
.video-grid-btn-prev-{{ section.id }}:hover,
.video-grid-btn-next-{{ section.id }}:hover {
transform: scale(0.9);
}
@media(min-width: 1024px) {
.video-grid-btn-prev-{{ section.id }}:hover,
.video-grid-btn-next-{{ section.id }}:hover {
transform: scale(0.9);
}
}
</style>
{% elsif arrow_hover_effect == "arrow" %}
<style>
.video-grid-btn-next-{{ section.id }}:hover .animate-icon:before {
transform: translate(calc(1 * 0.125rem)) rotate(calc(1 * 45deg));
}
.video-grid-btn-prev-{{ section.id }}:hover .animate-icon:before {
transform: translate(calc(-1 * 0.125rem)) rotate(calc(1 * 45deg));
}
.video-grid-btn-prev-{{ section.id }}:hover .animate-icon:after,
.video-grid-btn-next-{{ section.id }}:hover .animate-icon:after {
opacity: 1;
transform: scaleX(1);
}
</style>
{% endif %}
{% if arrow_show_mobile %}
<style>
.video-grid-btn-prev-{{ section.id }},
.video-grid-btn-next-{{ section.id }} {
display: flex;
}
</style>
{% else %}
<style>
.video-grid-btn-prev-{{ section.id }},
.video-grid-btn-next-{{ section.id }} {
display: none;
}
</style>
{% endif %}
{% if arrow_show_desktop %}
<style>
@media(min-width: 1024px) {
.video-grid-btn-prev-{{ section.id }},
.video-grid-btn-next-{{ section.id }} {
display: flex;
}
}
</style>
{% else %}
<style>
@media(min-width: 1024px) {
.video-grid-btn-prev-{{ section.id }},
.video-grid-btn-next-{{ section.id }} {
display: none;
}
}
</style>
{% endif %}
{% if button_style == "non_outline" or button_style == "non_outline_arrow" %}
<style>
.video-grid-button-{{ section.id }} {
background-color: {{ button_bg_color }};
}
.video-grid-button-{{ section.id }}:hover {
transition: all 0.25s ease 0s;
background-color: {{ button_bg_hover_color }};
}
</style>
{% elsif button_style == "outline" or button_style == "outline_arrow" %}
<style>
.video-grid-button-{{ section.id }} {
background-color: {{ button_bg_color }};
border: {{ button_border_thickness }}px solid {{ button_border_color }};
}
.video-grid-button-{{ section.id }}:hover {
transition: all 0.25s ease 0s;
background-color: {{ button_bg_hover_color }};
border: {{ button_border_thickness }}px solid {{ button_border_hover_color }};
}
</style>
{% elsif button_style == "link" %}
<style>
.video-grid-button-{{ section.id }} {
padding: 0px !important;
}
</style>
{% endif %}
{% if content_align_mobile == "center" %}
<style>
.video-grid-feature-{{ section.id }} {
flex-direction: column;
}
</style>
{% elsif content_align_mobile == "right" %}
<style>
.video-grid-feature-{{ section.id }} {
flex-direction: row-reverse;
}
</style>
{% endif %}
{% if content_align == "center" %}
<style>
@media(min-width: 1024px) {
.video-grid-feature-{{ section.id }} {
flex-direction: column;
}
}
</style>
{% elsif content_align == "right" %}
<style>
@media(min-width: 1024px) {
.video-grid-feature-{{ section.id }} {
flex-direction: row-reverse;
}
}
</style>
{% else %}
<style>
@media(min-width: 1024px) {
.video-grid-feature-{{ section.id }} {
flex-direction: row;
}
}
</style>
{% endif %}
{% comment %} PREVIEW {% endcomment %}
<style>
.video-grid-slider-{{ section.id }}.preview .swiper-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
}
.video-grid-slider-{{ section.id }}.preview .video-grid-video-{{ section.id }} {
width: 100%;
}
.video-grid-slider-{{ section.id }}.preview .video-grid-video-{{ section.id }}:not(:first-child) {
margin-left: {{ slider_gap_mobile }}px;
}
@media(min-width: 1024px) {
.video-grid-slider-{{ section.id }}.preview .video-grid-video-{{ section.id }}:not(:first-child) {
margin-left: {{ slider_gap }}px;
}
.video-grid-slider-{{ section.id }}.preview .video-grid-video-{{ section.id }} {
width: calc(100% / {{ slider_view }} - ({{ slider_gap }}px));
}
}
</style>
<div class="section-{{ section.id }} video-grid-{{ section.id }}" style="background-color:{{ background_color }}; background-image: {{ background_gradient }};">
<div class="section-{{ section.id }}-settings">
<div class="video-grid-body-{{ section.id }}">
<div class="video-grid-videos-{{ section.id }}">
<button class="video-grid-btn-prev-{{ section.id }}">
<span class="animate-icon"></span>
</button>
<div class="video-grid-slider-wrapper-{{ section.id }}">
<div class="video-grid-slider-{{ section.id }} preview swiper"
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 %}
{% if block.type == 'video' %}
<div class="video-grid-video-{{ section.id }} swiper-slide">
{% assign video_id = block.settings.video.id | default: block.settings.video_url.id %}
{% assign loop = '&loop=1&playlist=' | append: video_id %}
{%- if block.settings.video == null and block.settings.video_url != null -%}
<div class="video-grid-video-wrap-{{ section.id }}">
{%- if block.settings.video_url.type == 'youtube' -%}
<iframe
data-src="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&mute=1&autoplay=0&controls=0&showinfo=0{{ loop }}"
data-src1="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&mute=0&autoplay=1&controls=0&showinfo=0{{ loop }}"
data-src2="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&mute=1&autoplay=0&controls=0&showinfo=0{{ loop }}"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
class="lazy"
></iframe>
{%- else -%}
<iframe
data-src="https://player.vimeo.com/video/{{ video_id }}?enablejsapi=1&mute=1&autoplay=1&controls=0&showinfo=0{{ loop }}"
data-src1="https://player.vimeo.com/video/{{ video_id }}?enablejsapi=1&mute=0&autoplay=1&controls=0&showinfo=0{{ loop }}"
data-src2="https://player.vimeo.com/video/{{ video_id }}?enablejsapi=1&mute=1&autoplay=1&controls=0&showinfo=0{{ loop }}"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
class="lazy"
></iframe>
{% endif %}
<div class="video-grid-play-{{ section.id }} active">
<svg xmlns="http://www.w3.org/2000/svg" width="10.309" height="12.477" viewBox="0 0 10.309 12.477">
<path id="Polygon_2" data-name="Polygon 2" d="M6.238,0l6.238,10.309H0Z" transform="translate(10.309) rotate(90)" fill="currentColor"></path>
</svg>
</div>
</div>
{% else %}
<div class="video-grid-video-wrap-{{ section.id }}">
<video data-src="{{ block.settings.video.sources[1].url }}" playsinline preload="none" loop class="lazy"></video>
<div class="video-grid-play-{{ section.id }} active">
<svg xmlns="http://www.w3.org/2000/svg" width="10.309" height="12.477" viewBox="0 0 10.309 12.477">
<path id="Polygon_2" data-name="Polygon 2" d="M6.238,0l6.238,10.309H0Z" transform="translate(10.309) rotate(90)" fill="currentColor"></path>
</svg>
</div>
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<button class="video-grid-btn-next-{{ section.id }}">
<span class="animate-icon"></span>
</button>
</div>
<div class="video-grid-content-{{ section.id }}">
{% if heading != blank %}
<div class="video-grid-heading-{{ section.id }}">{{ heading }}</div>
{% endif %}
{% assign feature_blocks = section.blocks | where: "type", "feature" %}
{% if feature_blocks.size > 0 %}
<div class="video-grid-features-{{ section.id }}">
{% for block in section.blocks %}
{% if block.type == 'feature' %}
<div class="video-grid-feature-{{ section.id }}">
{% if block.settings.percent > 0 %}
<div class="video-grid-circle-container-{{ section.id }}">
<div class="video-grid-circle-{{ section.id }}" data-percent="{{ block.settings.percent }}" data-progress="{{ circle_progress }}" data-active-progress="{{ circle_active_progress }}">
<svg width="100" height="100" viewBox="0 0 36 36" style="background-color: transparent;">
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="{{ circle_progress }}" stroke-width="4" stroke-dasharray="100, 100"></path>
</svg>
<span>0%</span>
</div>
</div>
{% endif %}
{% if block.settings.text %}
<div class="video-grid-feature-text-{{ section.id }}">{{ block.settings.text }}</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% if text != blank %}
<div class="video-grid-text-{{ section.id }}">{{ text }}</div>
{% endif %}
{% if button != blank %}
<{% if button_url != blank %}a href="{{ button_url }}"{% else %}div{% endif %} class="video-grid-button-{{ section.id }}">
<p class="video-grid-button-inner-{{ section.id }}">
{{ button }}
{% if button_style == "non_outline_arrow" or button_style == "outline_arrow" %}
<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M187.827 98.7858C188.123 98.4749 188.123 98.4749 188.123 98.1761C188.419 97.8652 188.419 97.5663 188.704 97.5663C189 96.9566 189 96.6458 189 96.0361C189 95.4263 189 94.8166 188.704 94.5058C188.704 94.195 188.408 93.8961 188.123 93.5852C188.123 93.2744 187.827 93.2744 187.827 92.9755L103.287 4.21945C102.41 3.29889 101.533 3 100.668 3C99.791 3 98.6295 3.31083 98.0488 4.21945C97.1719 5.14 96.8872 6.06058 96.8872 6.96919C96.8872 7.88974 97.1833 9.10918 98.0488 9.7189L175.587 92.0539H6.79206C4.75371 92.0539 3 93.895 3 96.0351C3 98.1751 4.75365 100.016 6.79206 100.016H175.575L97.7543 182.042C96.2967 183.572 96.2967 186.322 97.7543 187.852C99.2119 189.383 101.831 189.383 103.288 187.852L187.827 98.7858Z" fill="black"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M188.607 97.5657C188.432 97.5657 188.365 97.6788 188.27 97.8382C188.211 97.9378 188.141 98.0554 188.027 98.1748C188.027 98.4734 188.027 98.4734 187.731 98.7839L103.281 187.759C101.825 189.287 99.2085 189.287 97.7524 187.759C96.2963 186.23 96.2963 183.483 97.7524 181.954L175.492 100.013L6.88489 100.013C4.8486 100.013 3.09677 98.1739 3.09677 96.036C3.09677 93.8982 4.84866 92.059 6.88489 92.059L175.504 92.059L98.0465 9.80878C97.182 9.19968 96.8862 7.9815 96.8862 7.0619C96.8862 6.15422 97.1706 5.2346 98.0465 4.315C98.6267 3.40732 99.787 3.0968 100.663 3.0968C101.527 3.0968 102.403 3.39539 103.279 4.315L187.731 92.9796C187.731 93.1274 187.804 93.2021 187.877 93.2774C187.952 93.3543 188.027 93.4319 188.027 93.5887C188.046 93.6098 188.066 93.6308 188.085 93.6518C188.338 93.9267 188.584 94.1935 188.606 94.4689C188.607 94.482 188.607 94.4951 188.607 94.5083C188.903 94.8188 188.903 95.4279 188.903 96.037C188.903 96.6461 188.903 96.9566 188.607 97.5657ZM191.489 93.2767C191.79 93.8661 191.89 94.4204 191.934 94.7363C192.001 95.2226 192 95.7194 192 95.9856L192 96.037C192 96.0544 192 96.0729 192 96.0926C192 96.3523 192.001 96.8096 191.924 97.2931C191.828 97.8884 191.64 98.41 191.393 98.9184L190.546 100.663H190.212C190.127 100.759 190.038 100.852 189.988 100.905L189.974 100.92L105.527 189.891C102.85 192.701 98.1865 192.704 95.51 189.895C94.1476 188.464 93.5636 186.587 93.5636 184.857C93.5636 183.128 94.1468 181.252 95.5071 179.822M191.489 93.2767C191.316 92.7908 191.078 92.4357 190.938 92.2406C190.903 92.1912 190.866 92.142 190.828 92.0939V91.7408L105.522 2.17912C104.076 0.661813 102.397 0 100.663 0C99.3914 0 97.0569 0.401401 95.6212 2.37737C94.3151 3.83819 93.7895 5.45521 93.7895 7.0619C93.7895 8.26663 94.1183 10.6061 95.9608 12.111L168.333 88.9622L6.88489 88.9622C2.9981 88.9622 0 92.3316 0 96.036C0 99.7405 2.99801 103.11 6.88489 103.11L168.285 103.11" fill="black"></path>
<path d="M169.5 104L16.5 102.5V90H171L97.5 10.5V7L107.5 4.5C131.167 29.6667 180.2 81.5 187 87.5C193.8 93.5 191.5 99 189.5 101L105.5 184L94 181.5L169.5 104Z" fill="black"></path>
</svg>
{% endif %}
</p>
</{% if button_url != blank %}a{% else %}div{% endif %}>
{% endif %}
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/dist/lazyload.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@6.8.4/swiper-bundle.min.js"></script>
<script>
function initVideoFromSocial4() {
let lazyLoadInstance = new LazyLoad();
window.addEventListener(
"LazyLoad::Initialized",
function (event) {
window.lazyLoadInstance = event.detail.instance;
},
false
);
document.querySelector('.video-grid-slider-{{ section.id }}').classList.remove('preview');
// Restore Swiper initialization
const slider = new Swiper('.video-grid-slider-{{ section.id }}', {
speed: 300,
loop: true,
slideToClickedSlide: false,
loopAdditionalSlides: 1,
slidesPerGroup: 1,
navigation: {
nextEl: '.video-grid-btn-next-{{ section.id }}',
prevEl: '.video-grid-btn-prev-{{ section.id }}',
},
breakpoints: {
320: {
spaceBetween: parseInt(document.querySelector('.video-grid-slider-{{ section.id }}').dataset.gapMobile || 0),
slidesPerView: parseFloat(document.querySelector('.video-grid-slider-{{ section.id }}').dataset.viewMobile || 1),
},
768: {
spaceBetween: parseInt(document.querySelector('.video-grid-slider-{{ section.id }}').dataset.gap || 0),
slidesPerView: parseFloat(document.querySelector('.video-grid-slider-{{ section.id }}').dataset.view || 3),
},
1024: {
spaceBetween: parseInt(document.querySelector('.video-grid-slider-{{ section.id }}').dataset.gap || 0),
slidesPerView: parseFloat(document.querySelector('.video-grid-slider-{{ section.id }}').dataset.view || 3),
}
}
});
// Video interaction code
const videoItems = document.querySelectorAll('.video-grid-video-{{ section.id }}');
if (videoItems) {
videoItems.forEach(item => {
const video = item.querySelector('video');
const iframe = item.querySelector('iframe');
const videoButton = item.querySelector('.video-grid-play-{{ section.id }}');
const wrap = item.querySelector('.video-grid-video-wrap-{{ section.id }}');
if (wrap) {
wrap.addEventListener('click', function() {
videoItems.forEach(otherItem => {
const otherVideo = otherItem.querySelector('video');
const otherIframe = otherItem.querySelector('iframe');
const otherButton = otherItem.querySelector('.video-grid-play-{{ section.id }}');
if (otherVideo && otherVideo !== video) {
otherVideo.pause();
otherButton.classList.add('active');
}
if (otherIframe && otherIframe !== iframe) {
otherIframe.src=otherIframe.getAttribute('data-src2');
otherButton.classList.add('active');
}
});
if (videoButton.classList.contains('active')) {
if (video) video.play();
if (iframe) iframe.src=iframe.getAttribute('data-src1');
} else {
if (video) video.pause();
if (iframe) iframe.src=iframe.getAttribute('data-src2');
}
videoButton.classList.toggle('active');
});
}
});
}
// Circle animation code with one-time animation
let circles = document.querySelectorAll('.video-grid-circle-{{ section.id }}');
const animatedCircles = new Set();
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const circle = entry.target;
// Skip if this circle has already been animated
if (animatedCircles.has(circle)) {
return;
}
const progressColor = circle.getAttribute('data-progress');
const activeProgressColor = circle.getAttribute('data-active-progress');
const percent = parseFloat(circle.getAttribute('data-percent')) || 25;
const lineWidth = parseFloat(circle.getAttribute('data-line')) || 4;
const size = parseFloat(circle.getAttribute('data-size')) || 100;
const svgNamespace = "http://www.w3.org/2000/svg";
let existingSvg = circle.querySelector("svg");
if (existingSvg) {
existingSvg.remove();
}
let existingSpan = circle.querySelector("span");
if (existingSpan) {
existingSpan.remove();
}
let svg = document.createElementNS(svgNamespace, "svg");
svg.setAttribute("width", size);
svg.setAttribute("height", size);
svg.setAttribute("viewBox", "0 0 36 36");
svg.style.backgroundColor = "transparent";
let backgroundCircle = document.createElementNS(svgNamespace, "path");
backgroundCircle.setAttribute("d", "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831");
backgroundCircle.setAttribute("fill", "none");
backgroundCircle.setAttribute("stroke", `${progressColor}`);
backgroundCircle.setAttribute("stroke-width", lineWidth);
backgroundCircle.setAttribute("stroke-dasharray", "100, 100");
let activeCircle = document.createElementNS(svgNamespace, "path");
activeCircle.setAttribute("d", "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831");
activeCircle.setAttribute("fill", "none");
activeCircle.setAttribute("stroke", `${activeProgressColor}`);
activeCircle.setAttribute("stroke-width", lineWidth);
activeCircle.setAttribute("stroke-dasharray", "0, 100");
activeCircle.classList.add("active-circle");
svg.appendChild(backgroundCircle);
svg.appendChild(activeCircle);
circle.appendChild(svg);
let span = document.createElement("span");
span.textContent = "0%";
circle.appendChild(span);
if (entry.isIntersecting) {
// Mark this circle as animated
animatedCircles.add(circle);
let currentPercent = 0;
function animateCircle() {
let dashArray = `${currentPercent}, 100`;
activeCircle.setAttribute("stroke-dasharray", dashArray);
span.textContent = Math.round(currentPercent) + "%";
if (currentPercent < percent) {
currentPercent += 1;
requestAnimationFrame(animateCircle);
}
}
animateCircle();
}
});
}, { threshold: 0.5 });
circles.forEach((circle) => observer.observe(circle));
}
document.addEventListener('DOMContentLoaded', initVideoFromSocial4);
if (Shopify.designMode) {
document.addEventListener('shopify:section:unload', initVideoFromSocial4);
document.addEventListener('shopify:section:load', initVideoFromSocial4);
}
</script>
{% schema %}
{
"name": "SS - Video grid social #4",
"settings": [
{
"type": "paragraph",
"content": "⚠️ Save settings to view updates"
},
{
"type": "header",
"content": "Layout settings"
},
{
"type": "select",
"id": "layout",
"label": "Layout",
"default": "videos_content",
"options": [
{
"label": "Videos - content",
"value": "videos_content"
},
{
"label": "Content - videos",
"value": "content_videos"
}
]
},
{
"type": "select",
"id": "layout_mobile",
"label": "Layout - mobile",
"default": "videos_content",
"options": [
{
"label": "Videos - content",
"value": "videos_content"
},
{
"label": "Content - videos",
"value": "content_videos"
}
]
},
{
"type": "range",
"id": "layout_gap",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Gap",
"default": 36
},
{
"type": "range",
"id": "layout_gap_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Gap",
"default": 24
},
{
"type": "header",
"content": "Slider settings"
},
{
"type": "range",
"id": "slider_view",
"min": 1,
"max": 5,
"step": 0.5,
"label": "Slides to show",
"default": 3
},
{
"type": "range",
"id": "slider_view_mobile",
"min": 1,
"max": 2,
"step": 0.1,
"label": "Slides to show - mobile",
"default": 1.6
},
{
"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": "header",
"content": "Video settings"
},
{
"type": "range",
"id": "video_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 8
},
{
"type": "range",
"id": "video_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 0
},
{
"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": "header",
"content": "Play button settings"
},
{
"type": "range",
"id": "play_size",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Size",
"default": 36
},
{
"type": "range",
"id": "play_size_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Size - mobile",
"default": 36
},
{
"type": "range",
"id": "play_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 100
},
{
"type": "range",
"id": "play_bg_overlay",
"min": 0,
"max": 1,
"step": 0.1,
"label": "Background opacity",
"default": 0.7
},
{
"type": "header",
"content": "Arrow settings"
},
{
"type": "range",
"id": "arrow_size",
"min": 10,
"max": 100,
"step": 2,
"unit": "px",
"label": "Size",
"default": 32
},
{
"type": "range",
"id": "arrow_size_mobile",
"min": 10,
"max": 100,
"step": 2,
"unit": "px",
"label": "Size - mobile",
"default": 28
},
{
"type": "range",
"id": "arrow_icon_size",
"min": 5,
"max": 15,
"step": 1,
"unit": "px",
"label": "Icon size",
"default": 12
},
{
"type": "range",
"id": "arrow_icon_size_mobile",
"min": 5,
"max": 15,
"step": 1,
"unit": "px",
"label": "Icon size - mobile",
"default": 10
},
{
"type": "range",
"id": "arrow_border_thickness",
"min": 0,
"max": 10,
"step": 0.5,
"unit": "px",
"label": "Border thickness",
"default": 0
},
{
"type": "range",
"id": "arrow_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 100
},
{
"type": "select",
"id": "arrow_hover_effect",
"label": "Hover effect",
"default": "color",
"options": [
{
"label": "Change color",
"value": "color"
},
{
"label": "Change size",
"value": "scale"
},
{
"label": "Change arrow",
"value": "arrow"
},
{
"label": "None",
"value": "none"
}
]
},
{
"type": "checkbox",
"id": "arrow_show_desktop",
"label": "Show on desktop",
"default": true
},
{
"type": "checkbox",
"id": "arrow_show_mobile",
"label": "Show on mobile",
"default": false
},
{
"type": "header",
"content": "Content settings"
},
{
"type": "text_alignment",
"id": "content_align",
"label": "Alignment"
},
{
"type": "text_alignment",
"id": "content_align_mobile",
"label": "Alignment - mobile"
},
{
"type": "header",
"content": "Heading settings"
},
{
"type": "richtext",
"id": "heading",
"label": "Heading",
"default": "<p>Results</p>"
},
{
"type": "checkbox",
"id": "heading_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "heading_font",
"label": "Font family",
"default": "josefin_sans_n4"
},
{
"type": "range",
"id": "heading_size",
"min": 0,
"max": 72,
"step": 2,
"unit": "px",
"label": "Font size",
"default": 48
},
{
"type": "range",
"id": "heading_size_mobile",
"min": 0,
"max": 72,
"step": 2,
"unit": "px",
"label": "Font size - mobile",
"default": 36
},
{
"type": "range",
"id": "heading_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 130
},
{
"type": "header",
"content": "Feature settings"
},
{
"type": "range",
"id": "feature_padding_vertical",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding vertical",
"default": 12
},
{
"type": "range",
"id": "feature_padding_vertical_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding vertical - mobile",
"default": 12
},
{
"type": "range",
"id": "feature_gap",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Gap",
"default": 30
},
{
"type": "range",
"id": "feature_gap_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Gap - mobile",
"default": 20
},
{
"type": "range",
"id": "feature_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 1
},
{
"type": "header",
"content": "Feature circle settings"
},
{
"type": "range",
"id": "circle_size",
"min": 20,
"max": 200,
"step": 2,
"unit": "px",
"label": "Circle size",
"default": 80
},
{
"type": "range",
"id": "circle_size_mobile",
"min": 20,
"max": 200,
"step": 2,
"unit": "px",
"label": "Circle size - mobile",
"default": 70
},
{
"type": "header",
"content": "Feature percent settings"
},
{
"type": "checkbox",
"id": "percent_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "percent_font",
"label": "Font family",
"default": "josefin_sans_n4"
},
{
"type": "range",
"id": "percent_size",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 20
},
{
"type": "range",
"id": "percent_size_mobile",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 16
},
{
"type": "range",
"id": "percent_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 130
},
{
"type": "header",
"content": "Feature text settings"
},
{
"type": "checkbox",
"id": "feature_text_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "feature_text_font",
"label": "Font family",
"default": "josefin_sans_n4"
},
{
"type": "range",
"id": "feature_text_size",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 16
},
{
"type": "range",
"id": "feature_text_size_mobile",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 13
},
{
"type": "range",
"id": "feature_text_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 150
},
{
"type": "header",
"content": "Caption settings"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Caption about the results and/or link for their proof.</p>"
},
{
"type": "checkbox",
"id": "text_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "text_font",
"label": "Font family",
"default": "josefin_sans_n4"
},
{
"type": "range",
"id": "text_size",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 13
},
{
"type": "range",
"id": "text_size_mobile",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 12
},
{
"type": "range",
"id": "text_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 150
},
{
"type": "range",
"id": "text_mt",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Margin top",
"default": 12
},
{
"type": "range",
"id": "text_mt_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Margin top - mobile",
"default": 12
},
{
"type": "header",
"content": "Button settings"
},
{
"type": "text",
"id": "button",
"label": "Button label",
"info": "Leave the label blank to hide the button.",
"default": "Shop now"
},
{
"type": "url",
"id": "button_url",
"label": "URL"
},
{
"type": "checkbox",
"id": "button_custom",
"label": "Use custom font",
"default": false
},
{
"type": "font_picker",
"id": "button_font",
"label": "Font family",
"default": "josefin_sans_n4"
},
{
"type": "range",
"id": "button_size",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 16
},
{
"type": "range",
"id": "button_size_mobile",
"min": 0,
"max": 40,
"step": 1,
"unit": "px",
"label": "Font size - mobile",
"default": 16
},
{
"type": "range",
"id": "button_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Line height",
"default": 100
},
{
"type": "range",
"id": "button_padding_horizontal",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding horizontal",
"default": 24
},
{
"type": "range",
"id": "button_padding_horizontal_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding horizontal - mobile",
"default": 24
},
{
"type": "range",
"id": "button_padding_vertical",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding vertical",
"default": 14
},
{
"type": "range",
"id": "button_padding_vertical_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding vertical - mobile",
"default": 14
},
{
"type": "range",
"id": "button_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Roundness",
"default": 0
},
{
"type": "range",
"id": "button_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 1
},
{
"type": "range",
"id": "button_mt",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Margin top",
"default": 24
},
{
"type": "range",
"id": "button_mt_mobile",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Margin top - mobile",
"default": 20
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"default": "outline",
"options": [
{
"label": "Link",
"value": "link"
},
{
"label": "Non-outline",
"value": "non_outline"
},
{
"label": "Non-outline & arrow",
"value": "non_outline_arrow"
},
{
"label": "Outline",
"value": "outline"
},
{
"label": "Outline & arrow",
"value": "outline_arrow"
}
]
},
{
"type": "header",
"content": "Video colors"
},
{
"type": "color",
"label": "Border",
"id": "video_border_color",
"default": "#000000"
},
{
"type": "header",
"content": "Play button colors"
},
{
"type": "color",
"label": "Background",
"id": "play_bg_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Icon",
"id": "play_color",
"default": "#000000"
},
{
"type": "header",
"content": "Arrow colors"
},
{
"type": "color",
"label": "Icon",
"id": "arrow_color",
"default": "#7B7B7B"
},
{
"type": "color",
"label": "Icon hover",
"id": "arrow_hover_color",
"default": "#7B7B7B"
},
{
"type": "color",
"label": "Background",
"id": "arrow_bg_color"
},
{
"type": "color",
"label": "Background hover",
"id": "arrow_bg_hover_color"
},
{
"type": "color",
"label": "Border",
"id": "arrow_border_color",
"default": "#C7C7C7"
},
{
"type": "color",
"label": "Border hover",
"id": "arrow_border_hover_color",
"default": "#C7C7C7"
},
{
"type": "header",
"content": "Content colors"
},
{
"type": "color",
"label": "Heading",
"id": "heading_color",
"default": "#000000"
},
{
"type": "color",
"label": "Caption",
"id": "text_color",
"default": "#000000"
},
{
"type": "header",
"content": "Feature colors"
},
{
"type": "color",
"label": "Text",
"id": "feature_text_color",
"default": "#7B7B7B"
},
{
"type": "color",
"label": "Percent",
"id": "percent_color",
"default": "#000000"
},
{
"type": "color",
"label": "Circle progress",
"id": "circle_progress",
"default": "#F3F3F3"
},
{
"type": "color",
"label": "Circle progress active",
"id": "circle_active_progress",
"default": "#000000"
},
{
"type": "color",
"label": "Border",
"id": "feature_border_color",
"default": "#E6E6E6"
},
{
"type": "header",
"content": "Button colors"
},
{
"type": "color",
"label": "Text",
"id": "button_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Hover text",
"id": "button_hover_color",
"default": "#000000"
},
{
"type": "color",
"label": "Background",
"id": "button_bg_color",
"default": "#000000"
},
{
"type": "color",
"label": "Background hover",
"id": "button_bg_hover_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Button border",
"id": "button_border_color",
"default": "#000000"
},
{
"type": "color",
"label": "Border hover",
"id": "button_border_hover_color",
"default": "#000000"
},
{
"type": "header",
"content": "Section colors"
},
{
"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": "#000000"
},
{
"type": "header",
"content": "Section margin (outside)"
},
{
"type": "range",
"id": "margin_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Margin top",
"default": 0
},
{
"type": "range",
"id": "margin_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Margin bottom",
"default": 0
},
{
"type": "range",
"id": "margin_horizontal",
"min": 0,
"max": 30,
"step": 1,
"unit": "rem",
"label": "Margin sides",
"default": 0
},
{
"type": "range",
"id": "margin_horizontal_mobile",
"min": 0,
"max": 15,
"step": 0.5,
"unit": "rem",
"label": "Margin sides mobile",
"default": 0
},
{
"type": "header",
"content": "Section padding (inside)"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding bottom",
"default": 36
},
{
"type": "range",
"id": "padding_horizontal",
"min": 0,
"max": 30,
"step": 1,
"unit": "rem",
"label": "Padding sides",
"default": 5
},
{
"type": "range",
"id": "padding_horizontal_mobile",
"min": 0,
"max": 15,
"step": 0.5,
"unit": "rem",
"label": "Padding sides mobile",
"default": 1.5
},
{
"type": "header",
"content": "Section settings"
},
{
"type": "checkbox",
"id": "full_width",
"label": "Full width",
"default": true
},
{
"type": "range",
"id": "content_width",
"min": 800,
"max": 2000,
"step": 100,
"unit": "px",
"label": "Section content width",
"default": 1200
},
{
"type": "range",
"id": "border_thickness",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 0
},
{
"type": "range",
"id": "section_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Section roundness",
"default": 0
},
{
"type": "checkbox",
"id": "lazy",
"label": "Lazy load",
"info": "Lazy load images for speed optimisation",
"default": true
}
],
"blocks": [
{
"type": "video",
"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"
],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"info": "Youtube or Vimeo. Shows when no Shopify-hosted video is selected."
}
]
},
{
"type": "feature",
"name": "Feature",
"settings": [
{
"type": "range",
"id": "percent",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Percent",
"default": 90
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Noticed that this product has significantly improved their life.</p>"
}
]
}
],
"presets": [
{
"name": "SS - Video grid from social #4",
"blocks": [
{
"type": "video"
},
{
"type": "video"
},
{
"type": "video"
},
{
"type": "video"
},
{
"type": "feature"
},
{
"type": "feature"
},
{
"type": "feature"
}
]
}
]
}
{% endschema %}
This is an accepted solution.
@NikosBat this line is telling us that section settings have a field to add the URL, so please put #rbr-bundle-296708 there i hope it will work
Hello ProtoMan44, thank you very much that worked for me.
@NikosBat so please mark my comment as solution
Hi ProtoMan44, I have already marked it.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025