Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Tutorial: Making Your Slideshow Clickable

Tutorial: Making Your Slideshow Clickable

Bo
Shopify Staff (Retired)
1793 197 469

One customization request that our team has seen a lot of demand for is making the slideshow of a theme clickable. In this guide, we will go through the necessary steps to achieve this by adding some code to the Slideshow theme file. The result will have your slideshow going from this:

 

To this:

 

 

 

 

Step One: Edit Your Theme Code:

Go to Online Store > Current Theme > Actions > Edit Code. 

 

Debut: 

  1. Open slideshow.liquid
  2. Find the following:

<div id="slickSlide-{{ block.id }}" 

On older versions of Debut it may be <div class="slideshow__slide slideshow__slide--{{ block.id }}" {{ block.shopify_attributes }}> 

    3. Add this snippet of code right below it:

 

<style>
  .slide__link {
    width: 100%;  
    height: 100%;  
    position: absolute;  
    z-index: 9;
  }
</style>
<a class="slide__link" href="{{ block.settings.button_link }}"></a>

 

    4 Click Save

 

Narrative: 

  1. Open slideshow.liquid and find <img
  2. Add the following right above it: 
    <style>
      .slide__link {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 9;
      }
      {% if cta == blank %}
      .slideshow__heading-cta.btn {
        display: none;
      }
    {% endif %}
    </style>
    <a href="{{ block.settings.cta_link }}" class="slide__link"></a>
    

      3. Click Save

 

Minimal:

  1. Open slider.liquid, find  <img
  2. Add the following right above it: 
    <style>
      .slide__link {
        width: 100%;  
        height: 100%;  
        position: absolute;  
        z-index: 2;
      }
    </style>
    <a class="slide__link" href="{{ block.settings.button_link }}"></a>
    ​

     3. Click Save. 

 

 

Brooklyn, Boundless, and Simple:

  1. Open slideshow.liquid, and find <img
  2. Add this right above it: 
    <style>
      .slide__link {
        width: 100%;  
        height: 100%;  
        position: absolute;  
        z-index: 9;
      }
    </style>
    <a class="slide__link" href="{{ block.settings.button_link }}"></a>
  3. Click Save. 

Venture:

  1. Open slideshow.liquid
  2. Find <img, add the following right above it: 
    <style>
      .slide__link {
        width: 100%;  
        height: 100%;  
        position: absolute;  
        z-index: 999999;
      }
      .hero-content__controls {
        width: fit-content;
      }
    </style>
    <a class="slide__link" href="{{ block.settings.button_link }}"></a>
    
    
    ​
  3. Find <h2, add this right above it:
    <a class="slide__link" href="{{ block.settings.button_link }}"></a>​
  4. Click Save. 

 

Step 2: Add your link to your slideshow:

Once you have finished editing your code you will be ready to add your link to your slideshow. To do so, go to Online Store > Themes > Customize > Slideshow and click on an image block. You will then be able to add the link under ‘Button link’.

20-09-z5609-bakpg

Click Save.

 

If you have any questions regarding this tutorial, feel free to comment on this thread. Please note that this tutorial is for Shopify Supported themes only and that we will be unable to assist with any third-party themes.

 

To learn more visit the Shopify Help Center or the Community Blog.

Replies 43 (43)

chokhahaar
Excursionist
41 0 8

I am unable to find   <img   after I open slideshow.liquid   ,

I am using Brooklyn theme.

Please help

Bo
Shopify Staff (Retired)
1793 197 469

Hey there, @chokhahaar ! If you are using the Brooklyn theme you should be able to find it using the "Find" keyboard shortcut. This guide details how to do so. 

 

All the Best,

Bo

To learn more visit the Shopify Help Center or the Community Blog.

chokhahaar
Excursionist
41 0 8

 

I did not find any search results for <img

 

slideshow.png

Bo
Shopify Staff (Retired)
1793 197 469

Hey again! You will need to have clicked into the code for it to search the file. Click anywhere within the slideshow.liquid and then use your find shortcut to search for <img

 

All the Best,

Bo

To learn more visit the Shopify Help Center or the Community Blog.

chokhahaar
Excursionist
41 0 8

hey

is this where i should add the above mentioned code?

 

Screenshot_6.png

Bo
Shopify Staff (Retired)
1793 197 469

Yes, I would recommend adding the code right above <img as this tutorial outlines. 

 

Bo 

To learn more visit the Shopify Help Center or the Community Blog.

chokhahaar
Excursionist
41 0 8

 

thankyou so much your code has sorted the slideshow images for me, is there any chance you can help me with this header overlapping the slide show issue.

my website url is https://chokhahaar.com/

Screenshot_9.pngScreenshot_8.png

Bo
Shopify Staff (Retired)
1793 197 469

Hey there, @chokhahaar 

 

Please create a new topic in the Design board for this issue. This tutorial and thread is specifically for making the slideshow clickable, we do not want to populate the thread with posts and questions that are not directly related. 

 

All the Best,

Bo

To learn more visit the Shopify Help Center or the Community Blog.

vickybanoo
Visitor
2 0 0

can use this code another theme like 3rd party theme it's works 

 

Soon
Tourist
9 0 3

I followed your steps but does not function for DEBUT THEME, please check if i added it in the right place?

a.png

Soon
Tourist
9 0 3

The button is displaying even after adding the code 

readytocry
New Member
5 0 0

I tried the same thing as "Soon" in the Debut Theme and unfortunately it did not work. Is this the correct place?

Edit: It works. However, each slide is clickable now, even if no link is stored. This is normal, isn't it?

Bo
Shopify Staff (Retired)
1793 197 469

Hey there, @readytocry!

 

That is the expected behavior, yes! 

 

All the Best,

Bo 

To learn more visit the Shopify Help Center or the Community Blog.

Denzel
Shopify Partner
59 0 34

i need a code like this for DAWN theme 

PPUSA
Excursionist
36 0 11

Were you able to find this?

KrystalK87
Shopify Partner
11 0 5

@diego_ezfy posted the code in this thread and it worked for me:

 

https://community.shopify.com/c/shopify-design/dawn-theme-make-image-banner-clickable/td-p/1308721/p... 

 

Thanks @Diego_ezfy! 

 

This is the tutorial to make dawn clickable:

https://ezfycode.com/blog/dawn-theme-clickable-banner-tutorial

Gina1682
Excursionist
14 0 8

Hi - did you get a resolution for this? I am having the same issue. I left a new comment but did exactly what you did and there is no button field that shows up. 

Denzel
Shopify Partner
59 0 34

hey, which theme are you trying to use it on?

Gina1682
Excursionist
14 0 8
debut
Gina1682
Excursionist
14 0 8

debut

Gina1682
Excursionist
14 0 8

Can you provide a solution for this?

CristianXFree
Visitor
2 0 0

NVM.  thanks for this forum!

mrdetente
Tourist
5 0 9

Is there a way to apply this to a custom content image? I'd love for all of my images (including text columns with images) to be clickable.

Bo
Shopify Staff (Retired)
1793 197 469

Hey there, @mrdetente ! 

 

This is not something that is currently supported by our themes team, however, I would recommend starting a new topic in the Design Forum to see if there are any developers out there that can help you with this. I would recommend checking out our Help Us Help You post before you post your query to make sure that you are providing all the relevant information that a developer will need. 

 

All the Best,

Bo

To learn more visit the Shopify Help Center or the Community Blog.

Exproarzana
Shopify Partner
2 0 0

Hi, can you help with Dawn theme?

Denzel
Shopify Partner
59 0 34

 

 

@Exproarzana 

  1. From your Shopify Admin go to: online store > themes > actions > edit code
  2. Find the file named exactly “image-banner.liquid”
  3. Delete everything in there and paste this code:
{% if section.settings.link != blank %}

<a class="ezfy-custom-link" 
   href="{{ section.settings.link }}"
   {% if section.settings.new_tab %}target="_blank"{% endif %}
   ></a>
<style>
.image-banner-section{
    position: relative;
}
#shopify-section-header{
z-index: 4 !important;
}
.image-banner-section a.ezfy-custom-link{
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}
</style>
{% endif %}

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
  {%- style -%}
  @media screen and (max-width: 749px) {
    #Banner-{{ section.id }}::before,
    #Banner-{{ section.id }} .banner__media::before,
    #Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
      padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
      content: '';
      display: block;
    }
  }

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

{%- style -%}
  #Banner-{{ section.id }}::after {
    opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  }
{%- endstyle -%}

<div id="Banner-{{ section.id }}" class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.adapt_height_first_image and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
  {%- if section.settings.image != blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
      <img
        srcset="{%- if section.settings.image.width >= 375 -%}{{ section.settings.image | img_url: '375x' }} 375w,{%- endif -%}
          {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | img_url: '550x' }} 550w,{%- endif -%}
          {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
          {%- if section.settings.image.width >= 1100 -%}{{ section.settings.image | img_url: '1100x' }} 1100w,{%- endif -%}
          {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
          {%- if section.settings.image.width >= 1780 -%}{{ section.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
          {%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
          {%- if section.settings.image.width >= 3000 -%}{{ section.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
          {%- if section.settings.image.width >= 3840 -%}{{ section.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}
          {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
        sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
        src="{{ section.settings.image | img_url: '1500x' }}"
        loading="lazy"
        alt="{{ section.settings.image.alt | escape }}"
        width="{{ section.settings.image.width }}"
        height="{{ section.settings.image.width | divided_by: section.settings.image.aspect_ratio }}"
        {% if section.settings.image_2 != blank %}class="banner__media-image-half"{% endif %}
      >
    </div>
  {%- elsif section.settings.image_2 == blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
      {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
    </div>
  {%- endif -%}
  {%- if section.settings.image_2 != blank -%}
    <div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
      <img
        srcset="{%- if section.settings.image_2.width >= 375 -%}{{ section.settings.image_2 | img_url: '375x' }} 375w,{%- endif -%}
          {%- if section.settings.image_2.width >= 750 -%}{{ section.settings.image_2 | img_url: '750x' }} 750w,{%- endif -%}
          {%- if section.settings.image_2.width >= 1100 -%}{{ section.settings.image_2 | img_url: '1100x' }} 1100w,{%- endif -%}
          {%- if section.settings.image_2.width >= 1500 -%}{{ section.settings.image_2 | img_url: '1500x' }} 1500w,{%- endif -%}
          {%- if section.settings.image_2.width >= 1780 -%}{{ section.settings.image_2 | img_url: '1780x' }} 1780w,{%- endif -%}
          {%- if section.settings.image_2.width >= 2000 -%}{{ section.settings.image_2 | img_url: '2000x' }} 2000w,{%- endif -%}
          {%- if section.settings.image_2.width >= 3000 -%}{{ section.settings.image_2 | img_url: '3000x' }} 3000w,{%- endif -%}
          {%- if section.settings.image_2.width >= 3840 -%}{{ section.settings.image_2 | img_url: '3840x' }} 3840w,{%- endif -%}
          {{ section.settings.image_2 | img_url: 'master' }} {{ section.settings.image_2.width }}w"
        sizes="{% if section.settings.image != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image != blank %}50vw{% else %}100vw{% endif %}"
        src="{{ section.settings.image_2 | img_url: '1500x' }}"
        loading="lazy"
        alt="{{ section.settings.image_2.alt | escape }}"
        width="{{ section.settings.image_2.width }}"
        height="{{ section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio }}"
        {% if section.settings.image != blank %}class="banner__media-image-half"{% endif %}
      >
    </div>
  {%- endif -%}
  <div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
    <div class="banner__box color-{{ section.settings.color_scheme }}">
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'heading' -%}
            <h2 class="banner__heading {% if block.settings.heading_size == 'medium' %}h1{% else %}h0{% endif %}" {{ block.shopify_attributes }}>
              <span>{{ block.settings.heading | escape }}</span>
            </h2>
          {%- when 'text' -%}
            <div class="banner__text {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
              <span>{{ block.settings.text | escape }}</span>
            </div>
          {%- when 'buttons' -%}
            <div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
              {%- if block.settings.button_label_1 != blank -%}
                <a{% if block.settings.button_link_1 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_1 | escape }}</a>
              {%- endif -%}
              {%- if block.settings.button_label_2 != blank -%}
                <a{% if block.settings.button_link_2 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_2 | escape }}</a>
              {%- endif -%}
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.image-banner.name",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width image-banner-section",
  "settings": [
   {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
     {
      "type": "checkbox",
      "id": "new_tab",
      "default": false,
      "label": "Open in new tab?"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },
    {
      "type": "range",
      "id": "image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "t:sections.image-banner.settings.image_overlay_opacity.label",
      "default": 0
    },
    {
      "type": "select",
      "id": "image_height",
      "options": [
        {
          "value": "small",
          "label": "t:sections.image-banner.settings.image_height.options__1.label"
        },
        {
          "value": "medium",
          "label": "t:sections.image-banner.settings.image_height.options__2.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-banner.settings.image_height.options__3.label"
        }
      ],
      "default": "medium",
      "label": "t:sections.image-banner.settings.image_height.label",
      "info": "t:sections.image-banner.settings.image_height.info"
    },
    {
      "type": "checkbox",
      "id": "adapt_height_first_image",
      "default": false,
      "label": "t:sections.image-banner.settings.adapt_height_first_image.label",
      "info": "t:sections.image-banner.settings.adapt_height_first_image.info"
    },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "top-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "top-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "top-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
        },
        {
          "value": "middle-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
        },
        {
          "value": "middle-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
        },
        {
          "value": "middle-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
        },
        {
          "value": "bottom-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
        },
        {
          "value": "bottom-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
        },
        {
          "value": "bottom-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
        }
      ],
      "default": "middle-center",
      "label": "t:sections.image-banner.settings.desktop_content_position.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_box",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_box.label"
    },
    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.desktop_content_alignment.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.image-banner.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.image-banner.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.image-banner.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.image-banner.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.image-banner.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.image-banner.settings.color_scheme.label",
      "info": "t:sections.image-banner.settings.color_scheme.info"
    },
    {
      "type": "header",
      "content": "t:sections.image-banner.settings.header.content"
    },
    {
      "type": "select",
      "id": "mobile_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.mobile_content_alignment.label"
    },
    {
      "type": "checkbox",
      "id": "stack_images_on_mobile",
      "default": true,
      "label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_below",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_below.label"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-banner.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image banner",
          "label": "t:sections.image-banner.blocks.heading.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "medium",
              "label": "t:sections.image-banner.blocks.heading.settings.heading_size.options__1.label"
            },
            {
              "value": "large",
              "label": "t:sections.image-banner.blocks.heading.settings.heading_size.options__2.label"
            }
          ],
          "default": "medium",
          "label": "t:sections.image-banner.blocks.heading.settings.heading_size.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-banner.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Give customers details about the banner image(s) or content on the template.",
          "label": "t:sections.image-banner.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
            },
            {
              "value": "caption-with-letter-spacing",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
            }
          ],
          "default": "body",
          "label": "t:sections.image-banner.blocks.text.settings.text_style.label"
        }
      ]
    },
    {
      "type": "buttons",
      "name": "t:sections.image-banner.blocks.buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label_1",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_1",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
        },
        {
          "type": "text",
          "id": "button_label_2",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_2",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.image-banner.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %}
rlomax87
Visitor
1 0 0

hi! thanks for this code! it worked for my image banner, but do you have a fix for the slideshow? right now, it's only clickable if i create/add a shopify button. the "button" that i wanna use is a part of my slide image design.

aalkhaja
Visitor
2 0 0

thanks a lot for the tutorial very helpful.

is their a way to make the subheading of the slideshow also clickable?

Luvita
Excursionist
55 0 9

Hi There

Thanks for this. I noticed that for my mobile version, the slider buttons are not very well integrated with the image - it appears below each image - please see below. Is there a way to modify the slider buttons so that they appear centred and to the left and right of each image, whilst of course removing the white background and the tiny circle sliders?

Screenshot 2020-11-16 at 13.35.28.png

NicolasMaverde
Explorer
74 1 33

Hello @Bo ,

thanks for this, nice job!

I need the same function but instead on slideshow images I want to make the image in my hero liquid clickable?

So I don´t need a button anymore.

I am using the debut theme. Can you help me?

 

Thanks!

Nicolas

Bo
Shopify Staff (Retired)
1793 197 469

Hey there, @NicolasMaverde 

 

Bo here from Shopify Support! 

 

I would recommend posting this query in its own thread in the design board so more people will be able to see it and assist with it. Make sure to read Help Us Help You before posting. 

 

All the Best,

Bo

To learn more visit the Shopify Help Center or the Community Blog.

AndrewBrian
Excursionist
21 3 8

Hi Bo!

I used your guide and pasted the code below where you said - it definitely made the slideshow clickable, however it is clickable no matter what - even without an image or a link, you can still click on the slideshow and it reloads the page.

I don't necessarily want all of my slideshow pictures to be clickable, is there way to make it so it only has a link if you add a link url to the field?

Thanks,

KrystalK87
Shopify Partner
11 0 5

Hi! Would you be able to provide the code to make the slideshow clickable on the Dawn theme?

PPUSA
Excursionist
36 0 11

Were you able to find this?

peppep
Tourist
7 0 2

Hey, thank you for your great tutorial. I have  added the code, but when clicking on the slider image it will always reload the homepage. No matter what button link i am using. Can you help me with  that? Thank you.

kb338
Tourist
9 0 4

hello @Bo 

 

Thank you for your tutorial. I tested and works perfectly with Debut theme.

 

But when I switch to my favourite "Craft" theme and want to apply for the same approach, the coding is however totally different. Could you kindly advise?

 

Many thanks!

 

kb

 

Gina1682
Excursionist
14 0 8

Hi - I tried this for the debut theme and it didn't work. I saw someone else tried using it for the debut theme too and it didn't work. Mine was pasted in the same spot as his in the picture he shared. Any suggestions? 

AngelCompany1
Excursionist
22 1 4

This worked amazingly!!! I just wish I knew how to do this for image banners 

 

thomas06
Tourist
8 0 1

Hello,

I am using the free "refresh" theme.

Is there a procedure to succeed for this theme?

Thanks in advance.

CaitS
Tourist
4 0 2

Hi,

Is it possible to have updated coding for the new Shopify "Ride" theme?

Thanks

OliviaAnn
Tourist
8 0 1

How can I implement this with 2.0 Sense theme?

briangllc
Visitor
1 0 0

How can I add this feature to the Dawn theme?

NainaandNoor
Visitor
2 0 0

I did this with the theme "fashe". However, I couldn't find the img or div so I had to put it under a different section. While I made the slideshow clickable, I can't figure out where to link it because it didn't add a "button link" option on the theme. Any suggestions? My shop is "nainaandnoor.com". Thank you!