← back to Dw Theme Frontpage Cta
sections/home-slideshow.liquid
279 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 PRIMARY hero CTA — promoted to the loud, filled pill (Steve + Contrarian gate, 2026-07-20).
Was the restrained hairline secondary (DTD verdict C, 2026-06-29); now that it is the hero's
SOLE call-to-action ("Sign Up Now"), it wears full primary weight: opaque near-black fill,
heavier Lora, larger type, generous padding, soft lift-shadow — a confident main button while
keeping the rounded pill shape. Note: the snippet injects inline color = overlay text color
(#fff for this slide), so a dark fill + white text reads at full contrast over the hero photo. */
/* Wrapper keeps the button on its own row beneath the heading and inherits the slide's
text-align (left/center/right) so it stays aligned with the copy. */
#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: 15px 42px;
font-family: Lora, serif;
font-style: normal;
font-weight: 600;
font-size: 1rem; /* ~14px — full primary weight, up from the ~11px secondary */
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
border: none; /* solid filled pill — no hairline outline */
border-radius: 999px;
background: #1e1e1e; /* opaque near-black — the loud primary block */
box-shadow: 0 4px 16px rgba(0,0,0,0.28);
opacity: 1;
transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#shopify-section-{{ section.id }} .home-slideshow-slide-cta2:hover,
#shopify-section-{{ section.id }} .home-slideshow-slide-cta2:focus {
background: #000;
transform: translateY(-1px);
box-shadow: 0 7px 22px rgba(0,0,0,0.34);
}
@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 %}