← back to Dw Theme Hamburger
sections/home-slideshow.liquid
281 lines
<script
type="application/json"
data-section-type="dynamic-slideshow"
data-section-id="{{ section.id }}"
data-section-data
>
{
"autoplay": {{ section.settings.autoplay }},
"autoplayDelay": {{ section.settings.autoplay_delay }},
"autoplayHoverPause": {{ section.settings.autoplay-hover-pause }}
}
</script>
{%- assign slideIndex = 0 -%}
{%- assign slide_count = section.blocks.size -%}
<section
class="home-slideshow home-slideshow-layout-{{ section.settings.layout }}"
data-slideshow
data-slideshow-layout="{{ section.settings.layout }}"
data-slideshow-slides="{{ slide_count }}"
>
{%- unless section.blocks.size == 0 -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'slide' -%}
{%- assign slideIndex = slideIndex | plus: 1 -%}
{%- assign lifestyleIndex = slideIndex | modulo: 2 | plus: 1 -%}
{%- assign lifestyleImage = 'lifestyle-' | append: lifestyleIndex -%}
{%- capture image -%}
{{ lifestyleImage | placeholder_svg_tag: 'placeholder-svg' }}
{%- endcapture -%}
{%-
render 'home-slideshow-slide',
block: block,
slideIndex: slideIndex,
onboard_image: image,
-%}
{%- endcase -%}
{%- endfor -%}
{%- else -%}
{%- for i in (1..slide_count) -%}
{%- assign slideIndex = slideIndex | plus: 1 -%}
{%- assign lifestyleIndex = slideIndex | modulo: 2 | plus: 1 -%}
{%- assign lifestyleImage = 'lifestyle-' | append: lifestyleIndex -%}
{%- capture image -%}
<canvas class="home-slideshow-svg-ie11-fix" width="50" height="19"></canvas>
{{ lifestyleImage | placeholder_svg_tag: 'placeholder-svg' }}
{%- endcapture -%}
{%- capture contentAlignment -%}
{%- cycle 'left', 'center', 'right' -%}
{%- endcapture -%}
{%-
render 'home-slideshow-slide',
slideIndex: slideIndex,
contentAlignment: contentAlignment,
onboard_image: image,
-%}
{%- endfor -%}
{%- endunless -%}
<style>
#shopify-section-{{ section.id }} .home-slideshow .flickity-prev-next-button .arrow {
fill: {{ section.settings.controls-color | default: '#000' }};
}
#shopify-section-{{ section.id }} .home-slideshow .flickity-page-dots .dot {
background: {{ section.settings.controls-color | default: '#000' }};
}
/* DW front-page sprint 2026-06-23: hero legibility scrim + mobile text overlay (vp-dw-commerce) */
#shopify-section-{{ section.id }} .home-slideshow-slide { position: relative; }
#shopify-section-{{ section.id }} .home-slideshow-slide-image { position: relative; }
#shopify-section-{{ section.id }} .home-slideshow-slide-image::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
background: linear-gradient(to top, rgba(0,0,0,.42) 0%, rgba(0,0,0,.16) 32%, rgba(0,0,0,0) 62%);
}
#shopify-section-{{ section.id }} .home-slideshow-slide-content { z-index: 2; }
/* DW restrained secondary CTA — luxury "Book a consultation" hairline pill (DTD verdict C, 2026-06-29).
Deliberately quieter than the primary .home-slideshow-slide-cta: lighter weight, smaller, wider
tracking, hairline outline, ample whitespace — a premium secondary, never a competing banner. */
/* Wrapper forces the secondary onto its own row beneath the primary button and inherits the
slide's text-align (left/center/right) so the pill stays aligned with the heading. The primary
.home-slideshow-slide-cta is an inline text-button, so without this the secondary would sit
beside it as a visual peer — the opposite of the restrained, subordinate treatment we want. */
#shopify-section-{{ section.id }} .home-slideshow-slide-cta2-row {
display: block;
margin-top: 18px;
}
#shopify-section-{{ section.id }} .home-slideshow-slide-cta2 {
display: inline-block;
padding: 9px 26px;
font-family: Lora, serif;
font-style: normal;
font-weight: 400;
font-size: 0.7857142857rem; /* ~11px — well below the ~16px primary */
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid currentColor; /* hairline pill, inherits overlay text color */
border-radius: 999px;
/* Faint dark backing + soft shadow so the small pill text always clears contrast over a
variable hero photo (APCA), without becoming a loud solid block like the primary button. */
background: rgba(0,0,0,0.46); /* APCA Lc>=75 worst-case over a light photo region; still translucent vs the opaque primary */
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
text-shadow: 0 1px 6px rgba(0,0,0,0.45);
opacity: 0.95;
transition: opacity 0.25s ease, background-color 0.25s ease;
}
#shopify-section-{{ section.id }} .home-slideshow-slide-cta2:hover,
#shopify-section-{{ section.id }} .home-slideshow-slide-cta2:focus {
opacity: 1;
background: rgba(0,0,0,0.55);
}
@media (min-width: 770px) {
#shopify-section-{{ section.id }} .home-slideshow-slide-cta2-row { margin-top: 24px; }
}
@media (max-width: 768px) {
#shopify-section-{{ section.id }} .home-slideshow-slide { display: block; }
#shopify-section-{{ section.id }} .home-slideshow-slide-content {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: flex-end; text-align: center; padding: 0 18px 34px;
}
#shopify-section-{{ section.id }} .home-slideshow-slide-content-inner { width: 100%; max-width: 92%; }
#shopify-section-{{ section.id }} .home-slideshow-slide-heading { color: #fff !important; text-shadow: 0 1px 14px rgba(0,0,0,.5); }
#shopify-section-{{ section.id }} .home-slideshow-slide-subheading { color: #fff !important; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
/* On mobile the photo sits directly behind the text — force the hairline pill light + give it a faint backing for legibility. */
#shopify-section-{{ section.id }} .home-slideshow-slide-cta2 { color: #fff !important; border-color: rgba(255,255,255,.7) !important; }
#shopify-section-{{ section.id }} .home-slideshow-slide-image::after {
background: linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,.24) 42%, rgba(0,0,0,0) 78%);
}
}
</style>
</section>
{% schema %}
{
"name": "Slideshow",
"class": "shopify-section--slideshow",
"max_blocks": 6,
"settings": [
{
"type": "select",
"id": "layout",
"label": "Layout",
"options": [
{
"value": "content-width",
"label": "Content width"
},
{
"value": "full-width",
"label": "Full width"
}
],
"default": "full-width"
},
{
"type": "color",
"id": "controls-color",
"label": "Controls",
"default": "#000"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Auto-rotate slides",
"default": false
},
{
"type": "range",
"id": "autoplay_delay",
"label": "Rotation interval",
"min": 2,
"max": 10,
"step": 1,
"unit": "sec",
"default": 3
},
{
"type": "checkbox",
"id": "autoplay-hover-pause",
"label": "Pause auto-rotate on hover",
"default": false
}
],
"blocks": [
{
"type": "slide",
"name": "Slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "2880 x 1280px recommended"
},
{
"type": "text_alignment",
"id": "content-alignment",
"label": "Text alignment",
"default": "center"
},
{
"type": "color",
"id": "overlay-color",
"label": "Overlay text",
"default": "#262626"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Slide"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Introduce customers to your shop with lifestyle imagery and product photography"
},
{
"type": "text",
"id": "cta",
"label": "Button",
"default": "Button"
},
{
"type": "url",
"id": "url",
"label": "Link"
},
{
"type": "header",
"content": "Secondary link (optional)"
},
{
"type": "text",
"id": "cta2",
"label": "Secondary button",
"info": "Restrained hairline link shown beneath the main button (e.g. Book an Appointment)."
},
{
"type": "url",
"id": "url2",
"label": "Secondary link"
}
]
}
],
"presets": [
{
"category": "Image",
"name": "Slideshow",
"blocks": [
{
"type": "slide"
},
{
"type": "slide"
},
{
"type": "slide"
}
]
}
],
"disabled_on": {
"groups": [
"*"
]
}
}
{% endschema %}