High Converting Hero Section in Shopify Homepage

{% comment %}

╔══════════════════════════════════════════════════════════════════╗

║ LUXURY SPLIT HERO SLIDER — by Foysal / ShopifyLab ║

║ Version: 2.0.0 | OS2 Compatible | Zero Dependencies ║

╚══════════════════════════════════════════════════════════════════╝

File: sections/luxury-split-hero.liquid

Description: Premium multi-column hero slider with mobile swipe,

text animations, parallax, glass UI, middle-column

offset/padding, full Theme Editor control.

Sell-ready Gumroad digital product.

{% endcomment %}

{%- liquid

assign section_id = ‘lsh-‘ | append: section.id

assign columns = section.settings.columns | default: ‘3’

assign gap = section.settings.gap | default: 0

assign full_width = section.settings.full_width

assign max_width = section.settings.max_width | default: 1400

assign pad_top = section.settings.padding_top | default: 0

assign pad_bottom = section.settings.padding_bottom | default: 0

assign pad_left = section.settings.padding_left | default: 0

assign pad_right = section.settings.padding_right | default: 0

assign height_style = section.settings.height_style | default: ‘large’

assign custom_height = section.settings.custom_height | default: 600

assign autoplay = section.settings.autoplay

assign autoplay_sp = section.settings.autoplay_speed | default: 4000

assign show_dots = section.settings.show_dots

assign show_arrows = section.settings.show_arrows

assign peek = section.settings.mobile_peek | default: ‘1’

assign section_bg = section.settings.section_bg | default: ‘#0a0a0a’

assign slide_radius = section.settings.slide_radius | default: 0

assign border_width = section.settings.border_width | default: 0

assign border_color = section.settings.border_color | default: ‘#ffffff’

assign grid_align = section.settings.grid_align | default: ‘stretch’

assign dot_color = section.settings.dot_color | default: ‘#ffffff’

assign arrow_color = section.settings.arrow_color | default: ‘#ffffff’

assign mid_margin_top = section.settings.mid_col_margin_top | default: 0

assign mid_margin_bottom = section.settings.mid_col_margin_bottom | default: 0

assign mid_pad_top = section.settings.mid_col_pad_top | default: 0

assign mid_pad_bottom = section.settings.mid_col_pad_bottom | default: 0

assign mid_radius = section.settings.mid_col_radius | default: 0

assign mid_shadow = section.settings.mid_col_shadow

assign mid_scale = section.settings.mid_col_scale

assign mid_border_w = section.settings.mid_col_border_width | default: 0

assign mid_border_c = section.settings.mid_col_border_color | default: ‘#ffffff’

-%}

{%- capture height_value -%}

{%- case height_style -%}

{%- when ‘small’ -%}400px

{%- when ‘medium’ -%}550px

{%- when ‘large’ -%}700px

{%- when ‘fullscreen’ -%}100svh

{%- when ‘custom’ -%}{{ custom_height }}px

{%- endcase -%}

{%- endcapture -%}

<style>

/* ============================================================

LSH v2 — CSS CUSTOM PROPERTIES

============================================================ */

#{{ section_id }} {

–lsh-columns: {{ columns }};

–lsh-gap: {{ gap }}px;

–lsh-height: {{ height_value | strip }};

–lsh-pad-top: {{ pad_top }}px;

–lsh-pad-bottom: {{ pad_bottom }}px;

–lsh-pad-left: {{ pad_left }}px;

–lsh-pad-right: {{ pad_right }}px;

–lsh-max-width: {% if full_width %}100%{% else %}{{ max_width }}px{% endif %};

–lsh-btn-radius: {{ section.settings.btn_radius | default: 0 }}px;

–lsh-slide-radius: {{ slide_radius }}px;

–lsh-border-width: {{ border_width }}px;

–lsh-border-color: {{ border_color }};

–lsh-grid-align: {{ grid_align }};

–lsh-dot-color: {{ dot_color }};

–lsh-arrow-color: {{ arrow_color }};

–lsh-transition: 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);

–lsh-mid-margin-top: {{ mid_margin_top }}px;

–lsh-mid-margin-bottom: {{ mid_margin_bottom }}px;

–lsh-mid-pad-top: {{ mid_pad_top }}px;

–lsh-mid-pad-bottom: {{ mid_pad_bottom }}px;

–lsh-mid-radius: {{ mid_radius }}px;

–lsh-mid-border-w: {{ mid_border_w }}px;

–lsh-mid-border-c: {{ mid_border_c }};

}

/* ============================================================

LSH — SECTION WRAPPER

============================================================ */

#{{ section_id }} {

display: block;

padding-top: var(–lsh-pad-top);

padding-bottom: var(–lsh-pad-bottom);

padding-left: var(–lsh-pad-left);

padding-right: var(–lsh-pad-right);

background: {{ section_bg }};

overflow: hidden;

}

{% if section.settings.use_bg_gradient %}

#{{ section_id }} {

background: linear-gradient(

{{ section.settings.bg_gradient_dir | default: ‘135deg’ }},

{{ section.settings.bg_gradient_from | default: ‘#0a0a0a’ }},

{{ section.settings.bg_gradient_to | default: ‘#1a1a2e’ }}

);

}

{% endif %}

.lsh-container {

max-width: var(–lsh-max-width);

margin: 0 auto;

}

/* ============================================================

LSH — DESKTOP GRID

============================================================ */

.lsh-grid {

display: grid;

grid-template-columns: repeat(var(–lsh-columns), 1fr);

gap: var(–lsh-gap);

align-items: var(–lsh-grid-align);

}

/* ============================================================

LSH — MIDDLE COLUMN OFFSET

Applies to 2nd child in 3-col, 3rd child in 5-col

============================================================ */

@media (min-width: 768px) {

.lsh-grid[data-columns=”3″] .lsh-slide:nth-child(3n+2),

.lsh-grid[data-columns=”5″] .lsh-slide:nth-child(5n+3) {

margin-top: var(–lsh-mid-margin-top);

margin-bottom: var(–lsh-mid-margin-bottom);

border-radius: var(–lsh-mid-radius);

{% if mid_border_w > 0 %}

border: var(–lsh-mid-border-w) solid var(–lsh-mid-border-c);

{% endif %}

overflow: hidden;

}

.lsh-grid[data-columns=”3″] .lsh-slide:nth-child(3n+2) .lsh-slide__content,

.lsh-grid[data-columns=”5″] .lsh-slide:nth-child(5n+3) .lsh-slide__content {

padding-top: calc(40px + var(–lsh-mid-pad-top));

padding-bottom: calc(40px + var(–lsh-mid-pad-bottom));

}

{% if mid_shadow %}

.lsh-grid[data-columns=”3″] .lsh-slide:nth-child(3n+2),

.lsh-grid[data-columns=”5″] .lsh-slide:nth-child(5n+3) {

box-shadow: 0 28px 70px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.3);

}

{% endif %}

{% if mid_scale %}

.lsh-grid[data-columns=”3″] .lsh-slide:nth-child(3n+2),

.lsh-grid[data-columns=”5″] .lsh-slide:nth-child(5n+3) {

transform: scaleY(1.05);

transform-origin: center center;

z-index: 1;

}

{% endif %}

}

/* ============================================================

LSH — BANNER SLIDE

============================================================ */

.lsh-slide {

position: relative;

height: var(–lsh-height);

overflow: hidden;

display: flex;

flex-direction: column;

justify-content: flex-end;

border-radius: var(–lsh-slide-radius);

border: var(–lsh-border-width) solid var(–lsh-border-color);

}

.lsh-slide[data-valign=”top”] { justify-content: flex-start; }

.lsh-slide[data-valign=”middle”] { justify-content: center; }

.lsh-slide[data-valign=”bottom”] { justify-content: flex-end; }

/* ── Background ── */

.lsh-slide__bg {

position: absolute;

inset: 0;

z-index: 0;

}

.lsh-slide__bg img {

width: 100%;

height: 100%;

object-fit: cover;

display: block;

transition: transform var(–lsh-transition);

}

.lsh-slide.has-zoom:hover .lsh-slide__bg img {

transform: scale(1.06);

}

/* ── Overlay ── */

.lsh-slide__overlay {

position: absolute;

inset: 0;

z-index: 1;

transition: opacity 0.4s ease;

}

.lsh-slide__overlay.is-gradient {

background: linear-gradient(

to top,

rgba(0,0,0,0.75) 0%,

rgba(0,0,0,0.20) 55%,

rgba(0,0,0,0.02) 100%

) !important;

}

.lsh-slide__overlay.grad-lr {

background: linear-gradient(

to right,

rgba(0,0,0,0.80) 0%,

rgba(0,0,0,0.12) 60%,

rgba(0,0,0,0.00) 100%

) !important;

}

/* ── Badge ── */

.lsh-slide__badge {

position: absolute;

z-index: 3;

font-size: 11px;

font-weight: 700;

letter-spacing: 0.1em;

text-transform: uppercase;

padding: 6px 14px;

border-radius: 40px;

line-height: 1;

pointer-events: none;

}

.lsh-slide__badge[data-pos=”top-left”] { top: 18px; left: 18px; }

.lsh-slide__badge[data-pos=”top-right”] { top: 18px; right: 18px; }

.lsh-slide__badge[data-pos=”bottom-left”] { bottom: 18px; left: 18px; }

.lsh-slide__badge[data-pos=”bottom-right”] { bottom: 18px; right: 18px; }

/* ── Content ── */

.lsh-slide__content {

position: relative;

z-index: 2;

padding: 40px 36px;

width: 100%;

}

.lsh-slide__content[data-align=”left”] { text-align: left; }

.lsh-slide__content[data-align=”center”] { text-align: center; }

.lsh-slide__content[data-align=”right”] { text-align: right; }

.lsh-slide__content[data-align=”center”] .lsh-slide__actions { justify-content: center; }

.lsh-slide__content[data-align=”right”] .lsh-slide__actions { justify-content: flex-end; }

.lsh-slide__content[data-align=”center”] .lsh-slide__divider { margin-left: auto; margin-right: auto; }

.lsh-slide__content[data-align=”right”] .lsh-slide__divider { margin-left: auto; }

.lsh-slide__inner {

display: inline-block;

width: 100%;

max-width: var(–lsh-text-maxwidth, 480px);

}

/* Content box styles */

.lsh-slide__content.box-solid .lsh-slide__inner {

background: rgba(255,255,255,0.94);

padding: 28px 32px;

border-radius: 4px;

}

.lsh-slide__content.box-glass .lsh-slide__inner {

background: rgba(255,255,255,0.09);

backdrop-filter: blur(20px) saturate(1.5);

-webkit-backdrop-filter: blur(20px) saturate(1.5);

border: 1px solid rgba(255,255,255,0.20);

padding: 28px 32px;

border-radius: 8px;

}

.lsh-slide__content.box-dark .lsh-slide__inner {

background: rgba(0,0,0,0.55);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

padding: 28px 32px;

border-radius: 6px;

}

/* ── Divider ── */

.lsh-slide__divider {

display: block;

width: 40px;

height: 2px;

background: currentColor;

margin: 10px 0 14px;

opacity: 0.55;

}

/* ── Typography ── */

.lsh-slide__label {

display: block;

letter-spacing: 0.18em;

text-transform: uppercase;

font-weight: 600;

margin-bottom: 10px;

opacity: 0.85;

font-size: var(–lsh-label-size, 11px);

color: var(–lsh-text-color, #fff);

}

.lsh-slide__heading {

margin: 0 0 14px;

font-weight: 700;

line-height: 1.1;

font-size: var(–lsh-heading-size, 38px);

color: var(–lsh-text-color, #fff);

}

.lsh-slide__subheading {

display: block;

margin: 0 0 18px;

opacity: 0.80;

font-size: var(–lsh-subheading-size, 14px);

color: var(–lsh-text-color, #fff);

font-weight: 400;

line-height: 1.6;

}

/* ── Actions ── */

.lsh-slide__actions {

display: flex;

align-items: center;

gap: 12px;

flex-wrap: wrap;

margin-top: 4px;

}

/* ============================================================

LSH — BUTTON SYSTEM

============================================================ */

.lsh-btn {

display: inline-flex;

align-items: center;

gap: 7px;

text-decoration: none;

font-weight: 600;

letter-spacing: 0.04em;

border-radius: var(–lsh-btn-radius);

cursor: pointer;

border: 2px solid transparent;

transition: background 0.28s, color 0.28s, border-color 0.28s, transform 0.22s, box-shadow 0.28s;

white-space: nowrap;

}

.lsh-btn[data-size=”small”] { font-size: 12px; padding: 9px 20px; }

.lsh-btn[data-size=”medium”] { font-size: 14px; padding: 10px 20px; }

.lsh-btn[data-size=”large”] { font-size: 16px; padding: 17px 38px; }

.lsh-slide.has-zoom:hover .lsh-btn {

transform: translateY(-2px);

box-shadow: 0 8px 24px rgba(0,0,0,0.22);

}

.lsh-btn.btn-solid { background: var(–lsh-btn-bg, #fff); color: var(–lsh-btn-color, #000); border-color: var(–lsh-btn-bg, #fff); }

.lsh-btn.btn-solid:hover { background: transparent; color: var(–lsh-btn-bg, #fff); }

.lsh-btn.btn-outline { background: transparent; color: var(–lsh-btn-bg, #fff); border-color: var(–lsh-btn-bg, #fff); }

.lsh-btn.btn-outline:hover { background: var(–lsh-btn-bg, #fff); color: var(–lsh-btn-color, #000); }

.lsh-btn.btn-glass {

background: rgba(255,255,255,0.13);

color: #fff;

border-color: rgba(255,255,255,0.38);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

}

.lsh-btn.btn-glass:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.6); }

.lsh-btn.btn-text {

background: transparent;

color: var(–lsh-text-color, #fff);

border: none;

padding-left: 0;

padding-right: 0;

text-decoration: underline;

text-underline-offset: 4px;

}

/* ============================================================

LSH — TEXT ANIMATIONS

============================================================ */

[data-lsh-anim] { opacity: 0; }

[data-lsh-anim=”fade-up”] { transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }

[data-lsh-anim=”fade-down”] { transform: translateY(-28px); transition: opacity 0.65s ease, transform 0.65s ease; }

[data-lsh-anim=”fade-left”] { transform: translateX(-28px); transition: opacity 0.65s ease, transform 0.65s ease; }

[data-lsh-anim=”fade-right”] { transform: translateX(28px); transition: opacity 0.65s ease, transform 0.65s ease; }

[data-lsh-anim=”zoom-in”] { transform: scale(0.88); transition: opacity 0.65s ease, transform 0.65s ease; }

[data-lsh-anim=”zoom-out”] { transform: scale(1.10); transition: opacity 0.65s ease, transform 0.65s ease; }

[data-lsh-anim=”flip-x”] { transform: rotateX(20deg); perspective: 800px; transition: opacity 0.65s ease, transform 0.65s ease; }

[data-lsh-anim=”none”] { opacity: 1; transform: none; transition: none; }

[data-lsh-anim].lsh-anim-in { opacity: 1 !important; transform: none !important; }

/* ============================================================

LSH — PARALLAX

============================================================ */

.lsh-slide.has-parallax .lsh-slide__bg img {

height: 130%;

margin-top: -15%;

will-change: transform;

}

/* ============================================================

LSH — MOBILE SLIDER

============================================================ */

@media (max-width: 767px) {

.lsh-grid {

display: flex;

overflow-x: auto;

scroll-snap-type: x mandatory;

-webkit-overflow-scrolling: touch;

scrollbar-width: none;

gap: var(–lsh-gap);

align-items: stretch;

}

.lsh-grid::-webkit-scrollbar { display: none; }

.lsh-grid.peek-1 { padding-right: 0; }

.lsh-grid.peek-1_2 { padding-right: 18%; }

.lsh-slide {

flex: 0 0 100%;

min-width: 0;

scroll-snap-align: start;

margin-top: 0 !important;

margin-bottom: 0 !important;

transform: none !important;

}

.lsh-grid.peek-1_2 .lsh-slide { flex: 0 0 88%; }

.lsh-slide__heading { font-size: clamp(22px, 7vw, 36px) !important; }

.lsh-slide__content { padding: 28px 22px; }

.lsh-slide__content .lsh-slide__content { padding-top: 28px !important; padding-bottom: 28px !important; }

}

/* ============================================================

LSH — MOBILE CONTROLS

============================================================ */

.lsh-controls {

display: flex;

align-items: center;

justify-content: center;

gap: 16px;

padding: 18px 16px 4px;

}

.lsh-dots { display: flex; gap: 8px; align-items: center; }

.lsh-dot {

width: 8px;

height: 8px;

border-radius: 50%;

background: rgba(255,255,255,0.28);

border: none;

cursor: pointer;

padding: 0;

transition: background 0.3s, transform 0.3s, width 0.3s;

}

.lsh-dot.is-active { background: var(–lsh-dot-color); transform: scale(1.4); }

.lsh-dots.style-pill .lsh-dot { width: 20px; height: 6px; border-radius: 3px; transform: none; }

.lsh-dots.style-pill .lsh-dot.is-active { width: 36px; transform: none; }

.lsh-arrow {

width: 40px;

height: 40px;

border-radius: 50%;

border: 1.5px solid rgba(255,255,255,0.30);

background: rgba(255,255,255,0.08);

backdrop-filter: blur(8px);

color: var(–lsh-arrow-color);

cursor: pointer;

display: flex;

align-items: center;

justify-content: center;

transition: background 0.25s, border-color 0.25s;

}

.lsh-arrow:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.6); }

.lsh-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

@media (min-width: 768px) { .lsh-controls { display: none; } }

/* ============================================================

LSH — EDITOR HIGHLIGHT

============================================================ */

.shopify-section-editor #{{ section_id }} .lsh-slide:focus-within {

outline: 2px dashed rgba(0,112,255,0.5);

outline-offset: -2px;

}

</style>

<section

id=”{{ section_id }}”

class=”lsh-section”

data-section-id=”{{ section.id }}”

data-autoplay=”{{ autoplay }}”

data-autoplay-speed=”{{ autoplay_sp }}”

data-parallax=”{{ section.settings.parallax }}”

aria-label=”{{ section.settings.aria_label | default: ‘Hero Slider’ | escape }}”

>

<div class=”lsh-container”>

<div

class=”lsh-grid{% if peek == ‘1.2’ %} peek-1_2{% else %} peek-1{% endif %}”

id=”{{ section_id }}-track”

data-columns=”{{ columns }}”

role=”list”

>

{%- for block in section.blocks -%}

{%- liquid

assign overlay_color = block.settings.overlay_color | default: ‘#000000’

assign overlay_opacity = block.settings.overlay_opacity | default: 40

assign overlay_alpha = overlay_opacity | times: 1.0 | divided_by: 100

assign grad_dir = block.settings.gradient_dir | default: ‘bottom-top’

assign text_color = block.settings.text_color | default: ‘#ffffff’

assign text_align = block.settings.text_align | default: ‘left’

assign valign = block.settings.valign | default: ‘bottom’

assign heading_size = block.settings.heading_size | default: 38

assign label_size = block.settings.label_size | default: 12

assign subhead_size = block.settings.subheading_size | default: 14

assign text_maxwidth = block.settings.text_maxwidth | default: 480

assign focal = block.settings.focal | default: ‘center center’

assign btn_style = block.settings.btn_style | default: ‘solid’

assign btn_bg = block.settings.btn_color | default: ‘#ffffff’

assign btn_txt = block.settings.btn_text_color | default: ‘#000000’

assign btn_size = block.settings.btn_size | default: ‘medium’

assign btn2_style = block.settings.btn2_style | default: ‘outline’

assign btn2_bg = block.settings.btn2_color | default: ‘#ffffff’

assign btn2_txt = block.settings.btn2_text_color | default: ‘#ffffff’

assign anim = block.settings.animation | default: ‘fade-up’

assign anim_delay = block.settings.anim_delay | default: 0

assign content_box = block.settings.content_box | default: ‘none’

assign use_gradient = block.settings.gradient_overlay

assign use_zoom = section.settings.hover_zoom

assign use_parallax = section.settings.parallax

assign badge_text = block.settings.badge_text

assign badge_bg = block.settings.badge_bg | default: ‘#e53e3e’

assign badge_color = block.settings.badge_color | default: ‘#ffffff’

assign badge_pos = block.settings.badge_pos | default: ‘top-right’

assign img_style = ‘object-fit:cover;object-position:’ | append: focal | append: ‘;width:100%;height:100%;’

assign img_sizes = ‘(max-width: 767px) 100vw, calc(100vw / ‘ | append: columns | append: ‘)’

assign img_alt = block.settings.heading | default: ‘Banner image’ | escape

assign img_src = block.settings.image | image_url: width: 1600

if use_gradient

if grad_dir == ‘left-right’

assign overlay_class = ‘lsh-slide__overlay grad-lr’

else

assign overlay_class = ‘lsh-slide__overlay is-gradient’

endif

else

assign overlay_class = ‘lsh-slide__overlay’

endif

-%}

<div

class=”lsh-slide{% if use_zoom %} has-zoom{% endif %}{% if use_parallax %} has-parallax{% endif %}”

data-valign=”{{ valign }}”

data-block-id=”{{ block.id }}”

role=”listitem”

{{ block.shopify_attributes }}

style=”

–lsh-text-color: {{ text_color }};

–lsh-heading-size: {{ heading_size }}px;

–lsh-label-size: {{ label_size }}px;

–lsh-subheading-size: {{ subhead_size }}px;

–lsh-text-maxwidth: {{ text_maxwidth }}px;

–lsh-btn-bg: {{ btn_bg }};

–lsh-btn-color: {{ btn_txt }};

{% if block.settings.slide_bg_color != blank %}background:{{ block.settings.slide_bg_color }};{% endif %}

“

>

{%- comment %} ── Background Image ── {% endcomment %}

<div class=”lsh-slide__bg”>

{%- if block.settings.image -%}

<img

src=”{{ img_src }}”

srcset=”

{{ block.settings.image | image_url: width: 400 }} 400w,

{{ block.settings.image | image_url: width: 600 }} 600w,

{{ block.settings.image | image_url: width: 800 }} 800w,

{{ block.settings.image | image_url: width: 1000 }} 1000w,

{{ block.settings.image | image_url: width: 1200 }} 1200w,

{{ block.settings.image | image_url: width: 1600 }} 1600w

“

sizes=”{{ img_sizes }}”

alt=”{{ img_alt }}”

class=”lsh-slide__img”

style=”{{ img_style }}”

loading=”lazy”

width=”{{ block.settings.image.width }}”

height=”{{ block.settings.image.height }}”

>

{%- else -%}

<div style=”width:100%;height:100%;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);”></div>

{%- endif -%}

</div>

{%- comment %} ── Overlay ── {% endcomment %}

<div

class=”{{ overlay_class }}”

aria-hidden=”true”

{% unless use_gradient %}style=”background:{{ overlay_color }};opacity:{{ overlay_alpha }};”{% endunless %}

></div>

{%- comment %} ── Badge ── {% endcomment %}

{%- if badge_text != blank -%}

<span class=”lsh-slide__badge” data-pos=”{{ badge_pos }}” style=”background:{{ badge_bg }};color:{{ badge_color }};”>

{{- badge_text | escape -}}

</span>

{%- endif -%}

{%- comment %} ── Text Content ── {% endcomment %}

{%- if block.settings.label != blank or block.settings.heading != blank or block.settings.btn_text != blank or block.settings.subheading != blank -%}

<div

class=”lsh-slide__content box-{{ content_box }}”

data-align=”{{ text_align }}”

{% if block.settings.overlay_text_shadow %}style=”text-shadow:0 2px 12px rgba(0,0,0,0.6);”{% endif %}

>

<div class=”lsh-slide__inner”>

{%- if block.settings.label != blank -%}

<span class=”lsh-slide__label” data-lsh-anim=”{{ anim }}” style=”transition-delay:{{ anim_delay }}ms;”>

{{- block.settings.label | escape -}}

</span>

{%- endif -%}

{%- if block.settings.show_divider -%}

<span class=”lsh-slide__divider” data-lsh-anim=”{{ anim }}” style=”transition-delay:{{ anim_delay | plus: 60 }}ms;” aria-hidden=”true”></span>

{%- endif -%}

{%- if block.settings.heading != blank -%}

<h2 class=”lsh-slide__heading” data-lsh-anim=”{{ anim }}” style=”transition-delay:{{ anim_delay | plus: 120 }}ms;”>

{{- block.settings.heading -}}

</h2>

{%- endif -%}

{%- if block.settings.subheading != blank -%}

<span class=”lsh-slide__subheading” data-lsh-anim=”{{ anim }}” style=”transition-delay:{{ anim_delay | plus: 180 }}ms;”>

{{- block.settings.subheading | escape -}}

</span>

{%- endif -%}

{%- if block.settings.btn_text != blank or block.settings.btn2_text != blank -%}

<div class=”lsh-slide__actions” data-lsh-anim=”{{ anim }}” style=”transition-delay:{{ anim_delay | plus: 240 }}ms;”>

{%- if block.settings.btn_text != blank -%}

<a href=”{{ block.settings.btn_link | default: ‘#’ }}” class=”lsh-btn btn-{{ btn_style }}” data-size=”{{ btn_size }}” aria-label=”{{ block.settings.btn_text | escape }}”>

{{- block.settings.btn_text | escape -}}

{%- unless btn_style == ‘text’ -%}

<svg width=”13″ height=”13″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″ stroke-linecap=”round” stroke-linejoin=”round” aria-hidden=”true”><line x1=”5″ y1=”12″ x2=”19″ y2=”12″/><polyline points=”12 5 19 12 12 19″/></svg>

{%- endunless -%}

</a>

{%- endif -%}

{%- if block.settings.btn2_text != blank -%}

<a href=”{{ block.settings.btn2_link | default: ‘#’ }}” class=”lsh-btn btn-{{ btn2_style }}” data-size=”{{ btn_size }}” style=”–lsh-btn-bg:{{ btn2_bg }};–lsh-btn-color:{{ btn2_txt }};” aria-label=”{{ block.settings.btn2_text | escape }}”>

{{- block.settings.btn2_text | escape -}}

</a>

{%- endif -%}

</div>

{%- endif -%}

</div>

</div>

{%- endif -%}

</div>

{%- endfor -%}

</div>

{%- comment %} ── Mobile Controls ── {% endcomment %}

{%- if show_dots or show_arrows -%}

<div class=”lsh-controls” id=”{{ section_id }}-controls” aria-label=”Slider navigation”>

{%- if show_arrows -%}

<button class=”lsh-arrow lsh-arrow–prev” aria-label=”Previous slide”>

<svg viewBox=”0 0 24 24″><polyline points=”15 18 9 12 15 6″/></svg>

</button>

{%- endif -%}

{%- if show_dots -%}

<div class=”lsh-dots{% if section.settings.dot_style == ‘pill’ %} style-pill{% endif %}” role=”tablist” aria-label=”Slide indicators” id=”{{ section_id }}-dots”>

{%- for block in section.blocks -%}

<button

class=”lsh-dot{% if forloop.first %} is-active{% endif %}”

role=”tab”

data-index=”{{ forloop.index0 }}”

aria-label=”Go to slide {{ forloop.index }}”

aria-selected=”{% if forloop.first %}true{% else %}false{% endif %}”

></button>

{%- endfor -%}

</div>

{%- endif -%}

{%- if show_arrows -%}

<button class=”lsh-arrow lsh-arrow–next” aria-label=”Next slide”>

<svg viewBox=”0 0 24 24″><polyline points=”9 18 15 12 9 6″/></svg>

</button>

{%- endif -%}

</div>

{%- endif -%}

</div>

</section>

<script>

(function () {

‘use strict’;

function LuxurySliderHero(sectionEl) {

if (!sectionEl) return;

var track = sectionEl.querySelector(‘.lsh-grid’);

var dotsWrap = sectionEl.querySelector(‘.lsh-dots’);

var dots = dotsWrap ? dotsWrap.querySelectorAll(‘.lsh-dot’) : [];

var prevBtn = sectionEl.querySelector(‘.lsh-arrow–prev’);

var nextBtn = sectionEl.querySelector(‘.lsh-arrow–next’);

var slides = track ? track.querySelectorAll(‘.lsh-slide’) : [];

var autoplay = sectionEl.dataset.autoplay === ‘true’;

var autoSpeed = parseInt(sectionEl.dataset.autoplaySpeed, 10) || 4000;

var parallax = sectionEl.dataset.parallax === ‘true’;

var current = 0;

var timer = null;

var isMobile = window.innerWidth < 768;

var startX = 0;

function scrollTo(idx) {

if (!track || !isMobile) return;

var slide = slides[idx];

if (!slide) return;

track.scrollTo({ left: slide.offsetLeft – track.offsetLeft, behavior: ‘smooth’ });

current = idx;

syncDots();

}

function syncDots() {

dots.forEach(function (d, i) {

d.classList.toggle(‘is-active’, i === current);

d.setAttribute(‘aria-selected’, i === current ? ‘true’ : ‘false’);

});

}

function detectCurrent() {

if (!track || !isMobile) return;

var sl = track.scrollLeft, idx = 0, min = Infinity;

slides.forEach(function (s, i) {

var diff = Math.abs(s.offsetLeft – sl);

if (diff < min) { min = diff; idx = i; }

});

if (idx !== current) { current = idx; syncDots(); }

}

if (prevBtn) prevBtn.addEventListener(‘click’, function () { scrollTo((current – 1 + slides.length) % slides.length); reset(); });

if (nextBtn) nextBtn.addEventListener(‘click’, function () { scrollTo((current + 1) % slides.length); reset(); });

dots.forEach(function (d) { d.addEventListener(‘click’, function () { scrollTo(parseInt(d.dataset.index, 10)); reset(); }); });

if (track) {

track.addEventListener(‘scroll’, debounce(detectCurrent, 80), { passive: true });

track.addEventListener(‘touchstart’, function (e) { startX = e.changedTouches[0].screenX; }, { passive: true });

track.addEventListener(‘touchend’, function (e) {

var diff = startX – e.changedTouches[0].screenX;

if (Math.abs(diff) > 40) { scrollTo(diff > 0 ? (current + 1) % slides.length : (current – 1 + slides.length) % slides.length); reset(); }

}, { passive: true });

track.addEventListener(‘mouseenter’, function () { clearInterval(timer); });

track.addEventListener(‘mouseleave’, start);

track.addEventListener(‘focusin’, function () { clearInterval(timer); });

track.addEventListener(‘focusout’, start);

}

function start() { if (!autoplay || !isMobile) return; timer = setInterval(function () { scrollTo((current + 1) % slides.length); }, autoSpeed); }

function reset() { clearInterval(timer); start(); }

start();

window.addEventListener(‘resize’, debounce(function () {

isMobile = window.innerWidth < 768;

if (!isMobile) clearInterval(timer); else start();

}, 200));

/* Parallax */

if (parallax) {

window.addEventListener(‘scroll’, function () {

slides.forEach(function (s) {

var r = s.getBoundingClientRect();

var shift = (r.top + r.height / 2 – window.innerHeight / 2) * 0.10;

var img = s.querySelector(‘.lsh-slide__bg img’);

if (img) img.style.transform = ‘translateY(‘ + shift + ‘px)’;

});

}, { passive: true });

}

/* Text animations */

if (‘IntersectionObserver’ in window) {

var els = sectionEl.querySelectorAll(‘[data-lsh-anim]:not([data-lsh-anim=”none”])’);

var obs = new IntersectionObserver(function (entries) {

entries.forEach(function (e) {

if (e.isIntersecting) { e.target.classList.add(‘lsh-anim-in’); obs.unobserve(e.target); }

});

}, { threshold: 0.12 });

els.forEach(function (el) { obs.observe(el); });

} else {

sectionEl.querySelectorAll(‘[data-lsh-anim]’).forEach(function (el) { el.classList.add(‘lsh-anim-in’); });

}

}

function debounce(fn, ms) { var t; return function () { clearTimeout(t); t = setTimeout(fn, ms); }; }

function init() { document.querySelectorAll(‘.lsh-section’).forEach(function (s) { new LuxurySliderHero(s); }); }

document.readyState === ‘loading’ ? document.addEventListener(‘DOMContentLoaded’, init) : init();

document.addEventListener(‘shopify:section:load’, function (e) { var s = e.target.querySelector(‘.lsh-section’); if (s) new LuxurySliderHero(s); });

})();

</script>

{% schema %}

{

“name”: “Luxury Split Hero”,

“tag”: “section”,

“class”: “lsh-section-wrapper”,

“settings”: [

{

“type”: “header”,

“content”: “🖥️ Layout”

},

{

“type”: “select”,

“id”: “columns”,

“label”: “Desktop columns”,

“options”: [

{ “value”: “1”, “label”: “1 — Full width” },

{ “value”: “2”, “label”: “2 columns” },

{ “value”: “3”, “label”: “3 columns” },

{ “value”: “4”, “label”: “4 columns” },

{ “value”: “5”, “label”: “5 columns” }

],

“default”: “3”

},

{

“type”: “select”,

“id”: “grid_align”,

“label”: “Column vertical alignment”,

“options”: [

{ “value”: “stretch”, “label”: “Stretch — equal height” },

{ “value”: “start”, “label”: “Top align” },

{ “value”: “center”, “label”: “Center align” },

{ “value”: “end”, “label”: “Bottom align” }

],

“default”: “stretch”,

“info”: “When middle column offset is used, set this to Start or Center”

},

{

“type”: “checkbox”,

“id”: “full_width”,

“label”: “Full width section”,

“default”: true

},

{

“type”: “range”,

“id”: “max_width”,

“label”: “Max content width (px)”,

“min”: 900,

“max”: 1920,

“step”: 20,

“default”: 1400,

“info”: “Only applies when Full width is disabled”

},

{

“type”: “range”,

“id”: “gap”,

“label”: “Gap between banners (px)”,

“min”: 0,

“max”: 60,

“step”: 2,

“default”: 2

},

{

“type”: “range”,

“id”: “slide_radius”,

“label”: “Banner border radius (px)”,

“min”: 0,

“max”: 40,

“step”: 2,

“default”: 0

},

{

“type”: “range”,

“id”: “border_width”,

“label”: “Banner border width (px)”,

“min”: 0,

“max”: 8,

“step”: 1,

“default”: 0

},

{

“type”: “color”,

“id”: “border_color”,

“label”: “Banner border color”,

“default”: “#ffffff”

},

{

“type”: “header”,

“content”: “🎯 Middle Column — Margin & Padding”

},

{

“type”: “paragraph”,

“content”: “These controls apply only to the centre banner when using 3 or 5 desktop columns.”

},

{

“type”: “range”,

“id”: “mid_col_margin_top”,

“label”: “Margin top (px)”,

“min”: -120,

“max”: 0,

“step”: 4,

“default”: 0,

“info”: “Negative value raises the middle banner — creates a ‘hero spotlight’ look”

},

{

“type”: “range”,

“id”: “mid_col_margin_bottom”,

“label”: “Margin bottom (px)”,

“min”: 0,

“max”: 120,

“step”: 4,

“default”: 0,

“info”: “Positive value drops the middle banner lower”

},

{

“type”: “range”,

“id”: “mid_col_pad_top”,

“label”: “Extra content padding top (px)”,

“min”: 0,

“max”: 120,

“step”: 4,

“default”: 0,

“info”: “Adds space above the text content inside the middle column”

},

{

“type”: “range”,

“id”: “mid_col_pad_bottom”,

“label”: “Extra content padding bottom (px)”,

“min”: 0,

“max”: 120,

“step”: 4,

“default”: 0,

“info”: “Adds space below the text content inside the middle column”

},

{

“type”: “range”,

“id”: “mid_col_radius”,

“label”: “Border radius (px)”,

“min”: 0,

“max”: 40,

“step”: 2,

“default”: 0

},

{

“type”: “checkbox”,

“id”: “mid_col_shadow”,

“label”: “Drop shadow”,

“default”: false,

“info”: “Adds a dramatic shadow to make the centre banner pop”

},

{

“type”: “checkbox”,

“id”: “mid_col_scale”,

“label”: “Scale up slightly”,

“default”: false,

“info”: “Makes the centre column 5% taller — set grid alignment to Center for best result”

},

{

“type”: “range”,

“id”: “mid_col_border_width”,

“label”: “Border width (px)”,

“min”: 0,

“max”: 8,

“step”: 1,

“default”: 0

},

{

“type”: “color”,

“id”: “mid_col_border_color”,

“label”: “Border color”,

“default”: “#ffffff”

},

{

“type”: “header”,

“content”: “📐 Banner Height”

},

{

“type”: “select”,

“id”: “height_style”,

“label”: “Banner height”,

“options”: [

{ “value”: “small”, “label”: “Small — 400px” },

{ “value”: “medium”, “label”: “Medium — 550px” },

{ “value”: “large”, “label”: “Large — 700px” },

{ “value”: “fullscreen”, “label”: “Full screen — 100vh” },

{ “value”: “custom”, “label”: “Custom” }

],

“default”: “large”

},

{

“type”: “range”,

“id”: “custom_height”,

“label”: “Custom height (px)”,

“min”: 200,

“max”: 1000,

“step”: 10,

“default”: 600,

“info”: “Only applies when height is set to Custom”

},

{

“type”: “header”,

“content”: “🎨 Section Background”

},

{

“type”: “color”,

“id”: “section_bg”,

“label”: “Background color”,

“default”: “#0a0a0a”

},

{

“type”: “checkbox”,

“id”: “use_bg_gradient”,

“label”: “Use gradient background”,

“default”: false

},

{

“type”: “color”,

“id”: “bg_gradient_from”,

“label”: “Gradient start color”,

“default”: “#0a0a0a”

},

{

“type”: “color”,

“id”: “bg_gradient_to”,

“label”: “Gradient end color”,

“default”: “#1a1a2e”

},

{

“type”: “select”,

“id”: “bg_gradient_dir”,

“label”: “Gradient direction”,

“options”: [

{ “value”: “to right”, “label”: “Left to Right” },

{ “value”: “to bottom”, “label”: “Top to Bottom” },

{ “value”: “135deg”, “label”: “Diagonal ↘” },

{ “value”: “225deg”, “label”: “Diagonal ↙” }

],

“default”: “135deg”

},

{

“type”: “header”,

“content”: “📐 Section Spacing”

},

{

“type”: “range”,

“id”: “padding_top”,

“label”: “Padding top (px)”,

“min”: 0,

“max”: 120,

“step”: 4,

“default”: 0

},

{

“type”: “range”,

“id”: “padding_bottom”,

“label”: “Padding bottom (px)”,

“min”: 0,

“max”: 120,

“step”: 4,

“default”: 0

},

{

“type”: “range”,

“id”: “padding_left”,

“label”: “Padding left (px)”,

“min”: 0,

“max”: 80,

“step”: 4,

“default”: 0

},

{

“type”: “range”,

“id”: “padding_right”,

“label”: “Padding right (px)”,

“min”: 0,

“max”: 80,

“step”: 4,

“default”: 0

},

{

“type”: “header”,

“content”: “📱 Mobile Slider”

},

{

“type”: “checkbox”,

“id”: “autoplay”,

“label”: “Autoplay on mobile”,

“default”: true

},

{

“type”: “range”,

“id”: “autoplay_speed”,

“label”: “Autoplay speed (ms)”,

“min”: 1500,

“max”: 8000,

“step”: 500,

“default”: 4000

},

{

“type”: “checkbox”,

“id”: “show_dots”,

“label”: “Show dot navigation”,

“default”: true

},

{

“type”: “select”,

“id”: “dot_style”,

“label”: “Dot style”,

“options”: [

{ “value”: “circle”, “label”: “Circle” },

{ “value”: “pill”, “label”: “Pill (active expands)” }

],

“default”: “circle”

},

{

“type”: “color”,

“id”: “dot_color”,

“label”: “Active dot color”,

“default”: “#ffffff”

},

{

“type”: “checkbox”,

“id”: “show_arrows”,

“label”: “Show arrow navigation”,

“default”: true

},

{

“type”: “color”,

“id”: “arrow_color”,

“label”: “Arrow icon color”,

“default”: “#ffffff”

},

{

“type”: “select”,

“id”: “mobile_peek”,

“label”: “Mobile peek”,

“options”: [

{ “value”: “1”, “label”: “1 slide — full width” },

{ “value”: “1.2”, “label”: “1.2 slides — peek next” }

],

“default”: “1”

},

{

“type”: “header”,

“content”: “✨ Effects”

},

{

“type”: “checkbox”,

“id”: “hover_zoom”,

“label”: “Hover zoom effect”,

“default”: true,

“info”: “Image zooms and button lifts on hover”

},

{

“type”: “checkbox”,

“id”: “parallax”,

“label”: “Parallax scroll effect”,

“default”: false,

“info”: “Background image moves subtly on scroll”

},

{

“type”: “header”,

“content”: “🎨 Global Button”

},

{

“type”: “range”,

“id”: “btn_radius”,

“label”: “Button border radius (px)”,

“min”: 0,

“max”: 50,

“step”: 1,

“default”: 0

},

{

“type”: “header”,

“content”: “♿ Accessibility”

},

{

“type”: “text”,

“id”: “aria_label”,

“label”: “Section aria-label”,

“default”: “Featured collections”

}

],

“blocks”: [

{

“type”: “banner”,

“name”: “Banner”,

“limit”: 50,

“settings”: [

{

“type”: “header”,

“content”: “🖼️ Image”

},

{

“type”: “image_picker”,

“id”: “image”,

“label”: “Banner image”

},

{

“type”: “select”,

“id”: “focal”,

“label”: “Image focal point”,

“options”: [

{ “value”: “center center”, “label”: “Center” },

{ “value”: “top center”, “label”: “Top center” },

{ “value”: “bottom center”, “label”: “Bottom center” },

{ “value”: “center left”, “label”: “Center left” },

{ “value”: “center right”, “label”: “Center right” },

{ “value”: “top left”, “label”: “Top left” },

{ “value”: “top right”, “label”: “Top right” },

{ “value”: “bottom left”, “label”: “Bottom left” },

{ “value”: “bottom right”, “label”: “Bottom right” }

],

“default”: “center center”

},

{

“type”: “color”,

“id”: “slide_bg_color”,

“label”: “Fallback background color”,

“info”: “Shown behind image or when no image is set”

},

{

“type”: “header”,

“content”: “🔲 Overlay”

},

{

“type”: “checkbox”,

“id”: “gradient_overlay”,

“label”: “Use gradient overlay”,

“default”: true,

“info”: “Overrides the solid overlay when enabled”

},

{

“type”: “select”,

“id”: “gradient_dir”,

“label”: “Gradient direction”,

“options”: [

{ “value”: “bottom-top”, “label”: “Bottom to Top (classic)” },

{ “value”: “left-right”, “label”: “Left to Right (sidebar text)” }

],

“default”: “bottom-top”

},

{

“type”: “color”,

“id”: “overlay_color”,

“label”: “Solid overlay color”,

“default”: “#000000”

},

{

“type”: “range”,

“id”: “overlay_opacity”,

“label”: “Solid overlay opacity (%)”,

“min”: 0,

“max”: 90,

“step”: 5,

“default”: 40

},

{

“type”: “header”,

“content”: “🏷️ Badge”

},

{

“type”: “text”,

“id”: “badge_text”,

“label”: “Badge text”,

“info”: “Leave blank to hide (e.g. NEW, SALE, HOT)”

},

{

“type”: “select”,

“id”: “badge_pos”,

“label”: “Badge position”,

“options”: [

{ “value”: “top-left”, “label”: “Top left” },

{ “value”: “top-right”, “label”: “Top right” },

{ “value”: “bottom-left”, “label”: “Bottom left” },

{ “value”: “bottom-right”, “label”: “Bottom right” }

],

“default”: “top-right”

},

{

“type”: “color”,

“id”: “badge_bg”,

“label”: “Badge background”,

“default”: “#e53e3e”

},

{

“type”: “color”,

“id”: “badge_color”,

“label”: “Badge text color”,

“default”: “#ffffff”

},

{

“type”: “header”,

“content”: “✍️ Text Content”

},

{

“type”: “text”,

“id”: “label”,

“label”: “Label / Eyebrow”,

“default”: “New Collection”

},

{

“type”: “text”,

“id”: “heading”,

“label”: “Heading”,

“default”: “Crafted for Excellence”

},

{

“type”: “text”,

“id”: “subheading”,

“label”: “Subheading”,

“info”: “Optional short description below the heading”

},

{

“type”: “color”,

“id”: “text_color”,

“label”: “Text color”,

“default”: “#ffffff”

},

{

“type”: “checkbox”,

“id”: “overlay_text_shadow”,

“label”: “Text shadow”,

“default”: false,

“info”: “Adds a soft shadow behind text for readability on busy images”

},

{

“type”: “checkbox”,

“id”: “show_divider”,

“label”: “Divider line below label”,

“default”: false

},

{

“type”: “range”,

“id”: “heading_size”,

“label”: “Heading font size (px)”,

“min”: 18,

“max”: 90,

“step”: 2,

“default”: 38

},

{

“type”: “range”,

“id”: “label_size”,

“label”: “Label font size (px)”,

“min”: 9,

“max”: 18,

“step”: 1,

“default”: 12

},

{

“type”: “range”,

“id”: “subheading_size”,

“label”: “Subheading font size (px)”,

“min”: 11,

“max”: 24,

“step”: 1,

“default”: 14

},

{

“type”: “range”,

“id”: “text_maxwidth”,

“label”: “Max text width (px)”,

“min”: 200,

“max”: 900,

“step”: 20,

“default”: 480

},

{

“type”: “header”,

“content”: “📌 Layout”

},

{

“type”: “select”,

“id”: “valign”,

“label”: “Content vertical position”,

“options”: [

{ “value”: “top”, “label”: “Top” },

{ “value”: “middle”, “label”: “Middle” },

{ “value”: “bottom”, “label”: “Bottom” }

],

“default”: “bottom”

},

{

“type”: “select”,

“id”: “text_align”,

“label”: “Text alignment”,

“options”: [

{ “value”: “left”, “label”: “Left” },

{ “value”: “center”, “label”: “Center” },

{ “value”: “right”, “label”: “Right” }

],

“default”: “left”

},

{

“type”: “select”,

“id”: “content_box”,

“label”: “Content box style”,

“options”: [

{ “value”: “none”, “label”: “None — text only” },

{ “value”: “solid”, “label”: “Solid white box” },

{ “value”: “glass”, “label”: “Glass blur box” },

{ “value”: “dark”, “label”: “Dark tinted box” }

],

“default”: “none”

},

{

“type”: “header”,

“content”: “🔘 Primary Button”

},

{

“type”: “text”,

“id”: “btn_text”,

“label”: “Button label”,

“default”: “Shop Now”

},

{

“type”: “url”,

“id”: “btn_link”,

“label”: “Button link”

},

{

“type”: “select”,

“id”: “btn_style”,

“label”: “Button style”,

“options”: [

{ “value”: “solid”, “label”: “Solid” },

{ “value”: “outline”, “label”: “Outline” },

{ “value”: “glass”, “label”: “Glass” },

{ “value”: “text”, “label”: “Text link” }

],

“default”: “solid”

},

{

“type”: “select”,

“id”: “btn_size”,

“label”: “Button size”,

“options”: [

{ “value”: “small”, “label”: “Small” },

{ “value”: “medium”, “label”: “Medium” },

{ “value”: “large”, “label”: “Large” }

],

“default”: “medium”

},

{

“type”: “color”,

“id”: “btn_color”,

“label”: “Button background / border color”,

“default”: “#ffffff”

},

{

“type”: “color”,

“id”: “btn_text_color”,

“label”: “Button text color”,

“default”: “#000000”

},

{

“type”: “header”,

“content”: “🔘 Secondary Button”

},

{

“type”: “text”,

“id”: “btn2_text”,

“label”: “Button 2 label”,

“info”: “Leave blank to hide”

},

{

“type”: “url”,

“id”: “btn2_link”,

“label”: “Button 2 link”

},

{

“type”: “select”,

“id”: “btn2_style”,

“label”: “Button 2 style”,

“options”: [

{ “value”: “solid”, “label”: “Solid” },

{ “value”: “outline”, “label”: “Outline” },

{ “value”: “glass”, “label”: “Glass” },

{ “value”: “text”, “label”: “Text link” }

],

“default”: “outline”

},

{

“type”: “color”,

“id”: “btn2_color”,

“label”: “Button 2 background / border color”,

“default”: “#ffffff”

},

{

“type”: “color”,

“id”: “btn2_text_color”,

“label”: “Button 2 text color”,

“default”: “#ffffff”

},

{

“type”: “header”,

“content”: “🎞️ Animation”

},

{

“type”: “select”,

“id”: “animation”,

“label”: “Text entrance animation”,

“options”: [

{ “value”: “fade-up”, “label”: “Fade up” },

{ “value”: “fade-down”, “label”: “Fade down” },

{ “value”: “fade-left”, “label”: “Fade left” },

{ “value”: “fade-right”, “label”: “Fade right” },

{ “value”: “zoom-in”, “label”: “Zoom in” },

{ “value”: “zoom-out”, “label”: “Zoom out” },

{ “value”: “flip-x”, “label”: “Flip” },

{ “value”: “none”, “label”: “None” }

],

“default”: “fade-up”

},

{

“type”: “range”,

“id”: “anim_delay”,

“label”: “Animation delay (ms)”,

“min”: 0,

“max”: 1000,

“step”: 50,

“default”: 0

}

]

}

],

“presets”: [

{

“name”: “Luxury Split Hero”,

“settings”: {

“columns”: “3”,

“mid_col_margin_top”: 0,

“mid_col_margin_bottom”: 0,

“mid_col_shadow”: false,

“mid_col_scale”: false,

“grid_align”: “stretch”,

“gap”: 4,

“height_style”: “large”,

“hover_zoom”: true,

“show_dots”: true,

“show_arrows”: true,

“dot_style”: “pill”

},

“blocks”: [

{

“type”: “banner”,

“settings”: {

“label”: “Summer 2025”,

“heading”: “The Art of Refinement”,

“btn_text”: “Explore Collection”,

“btn_style”: “solid”,

“valign”: “bottom”,

“text_align”: “left”,

“animation”: “fade-up”,

“gradient_overlay”: true

}

},

{

“type”: “banner”,

“settings”: {

“label”: “Best Sellers”,

“heading”: “Icons Never Fade”,

“subheading”: “Timeless pieces, redefined for today.”,

“btn_text”: “Shop Now”,

“btn2_text”: “See Lookbook”,

“btn_style”: “solid”,

“btn2_style”: “glass”,

“valign”: “middle”,

“text_align”: “center”,

“animation”: “zoom-in”,

“gradient_overlay”: true,

“show_divider”: true,

“badge_text”: “FEATURED”,

“badge_pos”: “top-right”

}

},

{

“type”: “banner”,

“settings”: {

“label”: “Limited Edition”,

“heading”: “Pure Luxury Awaits”,

“btn_text”: “Discover More”,

“btn_style”: “glass”,

“valign”: “bottom”,

“text_align”: “left”,

“animation”: “fade-right”,

“content_box”: “glass”,

“gradient_overlay”: true,

“badge_text”: “NEW”,

“badge_pos”: “top-right”

}

}

]

}

]

}

{% endschema %}