How to make a Slide Clickable in Dawn 15.2

Store Design
, ,

Topic summary

A user is attempting to make entire slideshow slides clickable in Shopify’s Dawn theme version 15.2, rather than relying on buttons within the slides.

Current Challenge:

  • The user has tried following various tutorials but cannot locate the specific code sections mentioned in those guides
  • They’ve shared their slideshow.liquid file code for reference

Status:

  • Another community member has responded seeking clarification on what “clickable” means in this context
  • They’re asking whether the goal is to enable drag-to-slide functionality (left/right swiping) instead of using navigation buttons

Discussion State:

  • The conversation remains open and awaiting the original poster’s clarification before a solution can be provided
  • The technical approach will depend on whether they want click-through links on entire slides or drag/swipe navigation
Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hi, I’m trying to make my slides clickable instead of using a button. I’ve tried the different tutorials but can’t seem to find the code they said to look for before pasting in new code. Any help would be appreciated. Here is my slideshow.liquid code:

{{ ‘section-image-banner.css’ | asset_url | stylesheet_tag }}
{{ ‘component-slider.css’ | asset_url | stylesheet_tag }}
{{ ‘component-slideshow.css’ | asset_url | stylesheet_tag }}

{%- if section.settings.slide_height == ‘adapt_image’ and section.blocks.first.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Slider-{{ section.id }}::before,
#Slider-{{ section.id }} .media::before,
#Slider-{{ section.id }}:not(.banner–mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
content: ‘’;
display: block;
}
}

@media screen and (min-width: 750px) {
#Slider-{{ section.id }}::before,
#Slider-{{ section.id }} .media::before {
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
content: ‘’;
display: block;
}
}
{%- endstyle -%}
{%- endif -%}

<slideshow-component
class=“slider-mobile-gutter{% if section.settings.layout == ‘grid’ %} page-width{% endif %}{% if section.settings.show_text_below %} mobile-text-below{% endif %}”
role=“region”
aria-roledescription=“{{ ‘sections.slideshow.carousel’ | t }}”
aria-label=“{{ section.settings.accessibility_info | escape }}”

{%- if section.settings.auto_rotate and section.blocks.size > 1 -%}

{{- 'icon-caret.svg' | inline_asset_content -}}
{%- if section.settings.slider_visual == 'counter' -%} 1 / {{ 'general.slider.of' | t }} {{ section.blocks.size }} {%- else -%}
{%- for block in section.blocks -%} {%- if section.settings.slider_visual == 'numbers' -%} {{ forloop.index -}} {%- else -%} {%- endif -%} {%- endfor -%}
{%- endif -%}
{{- 'icon-caret.svg' | inline_asset_content -}}

{%- if section.settings.auto_rotate -%}
<button
type=“button”
class=“slideshow__autoplay slider-button{% if section.settings.auto_rotate == false %} slideshow__autoplay–paused{% endif %}”
aria-label=“{{ ‘sections.slideshow.pause_slideshow’ | t }}”

{{- 'icon-pause.svg' | inline_asset_content -}} {{- 'icon-play.svg' | inline_asset_content -}} {%- endif -%}
{%- endif -%}
{%- for block in section.blocks -%} #Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after { opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }}; }
{%- if block.settings.image -%} {%- liquid assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round if section.settings.image_behavior == 'ambient' assign sizes = '120vw' assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680' else assign sizes = '100vw' assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' endif assign fetch_priority = 'auto' if section.index == 1 assign fetch_priority = 'high' endif -%} {%- if forloop.first %} {{ block.settings.image | image_url: width: 3840 | image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority }} {%- else -%} {{ block.settings.image | image_url: width: 3840 | image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths }} {%- endif -%} {%- else -%} {%- assign placeholder_slide = forloop.index | modulo: 2 -%} {%- if placeholder_slide == 1 -%} {{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }} {%- else -%} {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%} {%- endif -%}
{%- if block.settings.heading != blank -%}

{{ block.settings.heading }}

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

{{ block.settings.subheading }}

{%- endif -%} {%- if block.settings.button_label != blank -%} {%- endif -%}
{%- endfor -%}

{%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}

{{- 'icon-caret.svg' | inline_asset_content -}}
{%- if section.settings.slider_visual == 'counter' -%} 1 / {{ 'general.slider.of' | t }} {{ section.blocks.size }} {%- else -%}
{%- for block in section.blocks -%} {%- if section.settings.slider_visual == 'numbers' -%} {{ forloop.index -}} {%- else -%} {%- endif -%} {%- endfor -%}
{%- endif -%}
{{- 'icon-caret.svg' | inline_asset_content -}}

{%- if section.settings.auto_rotate -%}
<button
type=“button”
class=“slideshow__autoplay slider-button{% if section.settings.auto_rotate == false %} slideshow__autoplay–paused{% endif %}”
aria-label=“{{ ‘sections.slideshow.pause_slideshow’ | t }}”

{{- 'icon-pause.svg' | inline_asset_content -}} {{- 'icon-play.svg' | inline_asset_content -}} {%- endif -%}
{%- endif -%}

{%- if request.design_mode -%}

{%- endif -%}

{% schema %}
{
“name”: “t:sections.slideshow.name”,
“tag”: “section”,
“class”: “section”,
“disabled_on”: {
“groups”: [“header”, “footer”]
},
“settings”: [
{
“type”: “select”,
“id”: “layout”,
“options”: [
{
“value”: “full_bleed”,
“label”: “t:sections.slideshow.settings.layout.options__1.label”
},
{
“value”: “grid”,
“label”: “t:sections.slideshow.settings.layout.options__2.label”
}
],
“default”: “full_bleed”,
“label”: “t:sections.slideshow.settings.layout.label”
},
{
“type”: “select”,
“id”: “slide_height”,
“options”: [
{
“value”: “adapt_image”,
“label”: “t:sections.slideshow.settings.slide_height.options__1.label”
},
{
“value”: “small”,
“label”: “t:sections.slideshow.settings.slide_height.options__2.label”
},
{
“value”: “medium”,
“label”: “t:sections.slideshow.settings.slide_height.options__3.label”
},
{
“value”: “large”,
“label”: “t:sections.slideshow.settings.slide_height.options__4.label”
}
],
“default”: “medium”,
“label”: “t:sections.slideshow.settings.slide_height.label”
},
{
“type”: “select”,
“id”: “slider_visual”,
“options”: [
{
“value”: “dots”,
“label”: “t:sections.slideshow.settings.slider_visual.options__2.label”
},
{
“value”: “counter”,
“label”: “t:sections.slideshow.settings.slider_visual.options__1.label”
},
{
“value”: “numbers”,
“label”: “t:sections.slideshow.settings.slider_visual.options__3.label”
}
],
“default”: “counter”,
“label”: “t:sections.slideshow.settings.slider_visual.label”
},
{
“type”: “checkbox”,
“id”: “auto_rotate”,
“label”: “t:sections.slideshow.settings.auto_rotate.label”,
“default”: false
},
{
“type”: “range”,
“id”: “change_slides_speed”,
“min”: 3,
“max”: 9,
“step”: 2,
“unit”: “s”,
“label”: “t:sections.slideshow.settings.change_slides_speed.label”,
“default”: 5
},
{
“type”: “header”,
“content”: “t:sections.all.animation.content”
},
{
“type”: “select”,
“id”: “image_behavior”,
“options”: [
{
“value”: “none”,
“label”: “t:sections.all.animation.image_behavior.options__1.label”
},
{
“value”: “ambient”,
“label”: “t:sections.all.animation.image_behavior.options__2.label”
}
],
“default”: “none”,
“label”: “t:sections.all.animation.image_behavior.label”
},
{
“type”: “header”,
“content”: “t:sections.slideshow.settings.mobile.content”
},
{
“type”: “checkbox”,
“id”: “show_text_below”,
“label”: “t:sections.slideshow.settings.show_text_below.label”,
“default”: true
},
{
“type”: “header”,
“content”: “t:sections.slideshow.settings.accessibility.content”
},
{
“type”: “text”,
“id”: “accessibility_info”,
“label”: “t:sections.slideshow.settings.accessibility.label”,
“info”: “t:sections.slideshow.settings.accessibility.info”,
“default”: “t:sections.slideshow.settings.accessibility.default”
}
],
“blocks”: [
{
“type”: “slide”,
“name”: “t:sections.slideshow.blocks.slide.name”,
“limit”: 5,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.slideshow.blocks.slide.settings.image.label”
},
{
“type”: “inline_richtext”,
“id”: “heading”,
“default”: “t:sections.slideshow.blocks.slide.settings.heading.default”,
“label”: “t:sections.slideshow.blocks.slide.settings.heading.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
},
{
“value”: “hxl”,
“label”: “t:sections.all.heading_size.options__4.label”
},
{
“value”: “hxxl”,
“label”: “t:sections.all.heading_size.options__5.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
},
{
“type”: “inline_richtext”,
“id”: “subheading”,
“default”: “t:sections.slideshow.blocks.slide.settings.subheading.default”,
“label”: “t:sections.slideshow.blocks.slide.settings.subheading.label”
},
{
“type”: “text”,
“id”: “button_label”,
“default”: “t:sections.slideshow.blocks.slide.settings.button_label.default”,
“label”: “t:sections.slideshow.blocks.slide.settings.button_label.label”,
“info”: “t:sections.slideshow.blocks.slide.settings.button_label.info”
},
{
“type”: “url”,
“id”: “link”,
“label”: “t:sections.slideshow.blocks.slide.settings.link.label”
},
{
“type”: “checkbox”,
“id”: “button_style_secondary”,
“label”: “t:sections.slideshow.blocks.slide.settings.secondary_style.label”,
“default”: false
},
{
“type”: “select”,
“id”: “box_align”,
“options”: [
{
“value”: “top-left”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__1.label”
},
{
“value”: “top-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__2.label”
},
{
“value”: “top-right”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__3.label”
},
{
“value”: “middle-left”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__4.label”
},
{
“value”: “middle-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__5.label”
},
{
“value”: “middle-right”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__6.label”
},
{
“value”: “bottom-left”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__7.label”
},
{
“value”: “bottom-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__8.label”
},
{
“value”: “bottom-right”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__9.label”
}
],
“default”: “middle-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.label”,
“info”: “t:sections.slideshow.blocks.slide.settings.box_align.info”
},
{
“type”: “checkbox”,
“id”: “show_text_box”,
“label”: “t:sections.slideshow.blocks.slide.settings.show_text_box.label”,
“default”: true
},
{
“type”: “select”,
“id”: “text_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label”
},
{
“value”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label”
},
{
“value”: “right”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label”
}
],
“default”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.label”
},
{
“type”: “range”,
“id”: “image_overlay_opacity”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “%”,
“label”: “t:sections.slideshow.blocks.slide.settings.image_overlay_opacity.label”,
“default”: 0
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “scheme-1”
},
{
“type”: “header”,
“content”: “t:sections.slideshow.settings.mobile.content”
},
{
“type”: “select”,
“id”: “text_alignment_mobile”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label”
},
{
“value”: “right”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label”
}
],
“default”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label”
}
]
}
],
“presets”: [
{
“name”: “t:sections.slideshow.presets.name”,
“blocks”: [
{
“type”: “slide”
},
{
“type”: “slide”
}
]
}
]
}
{% endschema %}

2

When you say clickable, do you want to give your users the ability to drag and slide the images left or right I stead of the buttons??