How to make a button scroll to an other section

NikosBat · January 27, 2025, 6:43am

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).

ProtoMan44 · January 27, 2025, 6:46am

Hey, @NikosBat thanks for posting here.
can you please share the link to inspect it, thanks.

NikosBat · January 27, 2025, 11:12am

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-steam-spray-brush-massage-hair-removal-comb-anti-flying-brush

nikthe

ProtoMan44 · January 27, 2025, 11:23am

@NikosBat change this p tag to a and link with href=“#rbr-bundle-296708” . it will scroll to top section if it get clicked:

ProtoMan44 · January 27, 2025, 11:26am

@NikosBat like this :

NikosBat · January 27, 2025, 11:30am

Hey ProtoMan44 and thanks for answering that fast, but where can i find this code? You know in which folder is hidden?

ProtoMan44 · January 27, 2025, 11:36am

im not familiar with your theme but if you try at your self, I hope you will find it . @NikosBat

NikosBat · January 27, 2025, 11:39am

Ok thanks a lot ProtoMan44, I appreciate it.

ProtoMan44 · January 27, 2025, 11:40am

@NikosBat please share code of this file.here

NikosBat · January 27, 2025, 11:43am

Which code do you mean?

ProtoMan44 · January 27, 2025, 11:49am

@NikosBat video grid sections code.

NikosBat · January 27, 2025, 11:59am

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 [email removed]

{% endcomment %}

{%- 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 %}

.section-{{ section.id }}-settings { max-width: {{ content_width }}px; }

{% endunless %}

{% if margin_horizontal_mobile > 0 %}

.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; } }

{% endif %}

{% if margin_horizontal > 0 %}

@media(min-width: 1024px) { .section-{{ section.id }} { border-left: solid {{ border_color }} {{ border_thickness }}px; border-right: solid {{ border_color }} {{ border_thickness }}px; } }

{% endif %}

{% if heading_custom %}

.video-grid-heading-{{ section.id }} * { font-family: {{ heading_font.family }}, {{ heading_font.fallback_families }}; font-weight: {{ heading_font.weight }}; font-style: {{ heading_font.style }}; }

{% endif %}

{% if text_custom %}

.video-grid-text-{{ section.id }} * { font-family: {{ text_font.family }}, {{ text_font.fallback_families }}; font-weight: {{ text_font.weight }}; font-style: {{ text_font.style }}; }

{% endif %}

{% if feature_text_custom %}

.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 }}; }

{% endif %}

{% if percent_custom %}

.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 }}; }

{% endif %}

{% if button_custom %}

.video-grid-button-{{ section.id }} { font-family: {{ button_font.family }}, {{ button_font.fallback_families }}; font-weight: {{ button_font.weight }}; font-style: {{ button_font.style }}; }

{% endif %}

{% if layout_mobile == ‘content_videos’%}

.video-grid-content-{{ section.id }} { order: 1; } .video-grid-videos-{{ section.id }} { order: 2; }

{% elsif layout_mobile == ‘videos_content’ %}

.video-grid-content-{{ section.id }} { order: 2; } .video-grid-videos-{{ section.id }} { order: 1; }

{% endif %}

{% if layout == ‘videos_content’%}

@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; } }

{% elsif layout == ‘content_videos’ %}

@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; } }

{% endif %}

{% if video_ratio_mobile == “portrait” %}

.video-grid-video-{{ section.id }} { aspect-ratio: 8.6/13; }

{% elsif video_ratio_mobile == “landscape” %}

.video-grid-video-{{ section.id }} { aspect-ratio: 12/8; }

{% elsif video_ratio_mobile == “square” %}

.video-grid-video-{{ section.id }} { aspect-ratio: 12/12; }

{% else %}

.video-grid-video-{{ section.id }} { aspect-ratio: auto; }

{% endif %}

{% if video_ratio == “portrait” %}

@media (min-width: 1024px) { .video-grid-video-{{ section.id }} { aspect-ratio: 8.6/13; } }

{% elsif video_ratio == “landscape” %}

@media (min-width: 1024px) { .video-grid-video-{{ section.id }} { aspect-ratio: 12/8; } }

{% elsif video_ratio == “square” %}

@media (min-width: 1024px) { .video-grid-video-{{ section.id }} { aspect-ratio: 12/12; } }

{% else %}

@media (min-width: 1024px) { .video-grid-video-{{ section.id }} { aspect-ratio: auto; } }

{% endif %}

{% if arrow_hover_effect == “color” %}

.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 }}; }

{% elsif arrow_hover_effect == “scale” %}

.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); } }

{% elsif arrow_hover_effect == “arrow” %}

.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); }

{% endif %}

{% if arrow_show_mobile %}

.video-grid-btn-prev-{{ section.id }}, .video-grid-btn-next-{{ section.id }} { display: flex; }

{% else %}

.video-grid-btn-prev-{{ section.id }}, .video-grid-btn-next-{{ section.id }} { display: none; }

{% endif %}

{% if arrow_show_desktop %}

@media(min-width: 1024px) { .video-grid-btn-prev-{{ section.id }}, .video-grid-btn-next-{{ section.id }} { display: flex; } }

{% else %}

@media(min-width: 1024px) { .video-grid-btn-prev-{{ section.id }}, .video-grid-btn-next-{{ section.id }} { display: none; } }

{% endif %}

{% if button_style == “non_outline” or button_style == “non_outline_arrow” %}

.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 }}; }

{% elsif button_style == “outline” or button_style == “outline_arrow” %}

.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 }}; }

{% elsif button_style == “link” %}

.video-grid-button-{{ section.id }} { padding: 0px !important; }

{% endif %}

{% if content_align_mobile == “center” %}

.video-grid-feature-{{ section.id }} { flex-direction: column; }

{% elsif content_align_mobile == “right” %}

.video-grid-feature-{{ section.id }} { flex-direction: row-reverse; }

{% endif %}

{% if content_align == “center” %}

@media(min-width: 1024px) { .video-grid-feature-{{ section.id }} { flex-direction: column; } }

{% elsif content_align == “right” %}

@media(min-width: 1024px) { .video-grid-feature-{{ section.id }} { flex-direction: row-reverse; } }

{% else %}

@media(min-width: 1024px) { .video-grid-feature-{{ section.id }} { flex-direction: row; } }

{% endif %}

{% comment %} PREVIEW {% endcomment %}

.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)); } }

{% for block in section.blocks %} {% if block.type == 'video' %}

{% 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 -%}

{%- if block.settings.video_url.type == 'youtube' -%} {%- else -%} {% endif %}

{% else %}

{% endif %}

{% endif %} {% endfor %}

{% if heading != blank %}

{% endif %} {% assign feature_blocks = section.blocks | where: "type", "feature" %} {% if feature_blocks.size > 0 %}

{% for block in section.blocks %} {% if block.type == 'feature' %}

{% if block.settings.percent > 0 %}

0%

{% endif %} {% if block.settings.text %}

{% endif %}

{% endif %} {% endfor %}

{% endif %} {% if text != blank %}

{% endif %} {% if button != blank %} <{% if button_url != blank %}a href="{{ button_url }}"{% else %}div{% endif %} class="video-grid-button-{{ section.id }}">

{{ button }} {% if button_style == "non_outline_arrow" or button_style == "outline_arrow" %} {% endif %}

{% endif %}

{% 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”: “

Results

”
},
{
“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”: “

Caption about the results and/or link for their proof.

”
},
{
“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”: “

Noticed that this product has significantly improved their life.

”
}
]
}
],
“presets”: [
{
“name”: “SS - Video grid from social #4”,
“blocks”: [
{
“type”: “video”
},
{
“type”: “video”
},
{
“type”: “video”
},
{
“type”: “video”
},
{
“type”: “feature”
},
{
“type”: “feature”
},
{
“type”: “feature”
}
]
}
]
}
{% endschema %}

NikosBat · January 27, 2025, 12:00pm