FROM CACHE - en_header

Clickable Slideshow [Debut]

Solved
James023
Excursionist
12 2 0

I'm trying to embed a URL to a collection page on my slideshow images, rather than creating a button label. Essentially want to make my entire slideshow image a clickable button.

 

I haven't seen any threads that deal with this specifically for Debut themes. Please let me know if there's an easy solution to this. 

 

Accepted Solution (1)

Accepted Solutions
Elias
Shopify Staff
Shopify Staff
1920 195 317

This is an accepted solution.

Hello, everyone! 

We've since updated the authentication process for our merchant's security and we're no longer able to create emails through the Community Forums. However, we've made a step-by-step tutorial to help with implementing this customization for your Shopify theme - Tutorial: Making Your Slideshow Clickable

If you've run into any roadblocks while implementing this customization, our Theme Support team can continue to assist you with this. While we're not able to provide account-specific support via the Shopify Community at this time, we can help you send a customization request through live chat, email, or callback. Please visit Shopify Help Center and log into your account to create a support request. 

Since this is the next step, we'll be marking this reply as the solution for the benefit of others who may discover this topic. Thanks!

Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 179 (179)
oscprofessional
Shopify Partner
12515 1932 2479

Hello

Go to Online Store-> Themes -> Edit code->Sections->hero.liquid
Add this schema:

 

 {
          "type": "url",
          "id": "image_link",
          "label": "Image link"
        },

This will give you backend setting to add link to that image.

 


Search this code:

 <div class="hero__inner">
        <div class="page-width text-center">          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            <a href="{{ section.settings.button_link }}" class="btn hero__btn">              {{ section.settings.button_label | escape }}
            </a>          {%- endif -%}
        
        </div>
      </div>

Replace this code with :

<a href="{{ section.settings.image_link }}">
      <div class="hero__inner">
        <div class="page-width text-center">          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            <a href="{{ section.settings.button_link }}" class="btn hero__btn">              {{ section.settings.button_label | escape }}
            </a>          {%- endif -%}
        
        </div>
      </div>
      </a>

 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Elias
Shopify Staff
Shopify Staff
1920 195 317

Hello, @James023.

Elias here with Shopify Support. How are you doing?

Are you comfortable with implementing the custom coding suggested by @oscprofessional

If not, since Debut is a Shopify theme, this will be something our Theme Support team can explore adjusting for you. If your store is subscribed to a plan, this will be free of charge as it is included with design time that comes with a paid plan. For reference of which customizations are supported, we have a list of customizations that fall outside the scope of our Theme Support on our design policy

If you’re interested, I can send the request up to our Theme Support team and update you with a support ticket. Before I do that, could I confirm your store URL (.myshopify.com)?

Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

James023
Excursionist
12 2 0

Well I tried doing exactly what you said. I replaced the code which had no problems but adding the schema isn't working. I get an error every time I save. @oscprofessional pic101.PNG

James023
Excursionist
12 2 0

Hi @Elias 

 

I'm comfortable adding custom code but it doesn't seem to be working. My store is https://jsr8780.myshopify.com/

oscprofessional
Shopify Partner
12515 1932 2479

Hello James023,

You have added schema at wrong place remove that schema.

And search this code:

 {
      "type": "text",
      "id": "button_label",
      "label": {
        "da": "Knapetiket",
        "de": "Button-Etikett",
        "en": "Button label",
        "es": "Etiqueta de botón",
        "fi": "Painikkeen merkintä",
        "fr": "Texte du bouton",
        "hi": "बटन लेबल",
        "it": "Etichetta pulsante",
        "ja": "ボタンラベル",
        "ko": "버튼 레이블",
        "ms": "Label butang",
        "nb": "Knappetikett",
        "nl": "Knoplabel",
        "pt-BR": "Etiqueta do botão",
        "pt-PT": "Etiqueta do botão",
        "sv": "Knappetikett",
        "th": "ป้ายกำกับปุ่ม",
        "zh-CN": "按钮标签",
        "zh-TW": "按鈕標籤"
      }
    },

And paste schema after that code:
Like this

 {
      "type": "text",
      "id": "button_label",
      "label": {
        "da": "Knapetiket",
        "de": "Button-Etikett",
        "en": "Button label",
        "es": "Etiqueta de botón",
        "fi": "Painikkeen merkintä",
        "fr": "Texte du bouton",
        "hi": "बटन लेबल",
        "it": "Etichetta pulsante",
        "ja": "ボタンラベル",
        "ko": "버튼 레이블",
        "ms": "Label butang",
        "nb": "Knappetikett",
        "nl": "Knoplabel",
        "pt-BR": "Etiqueta do botão",
        "pt-PT": "Etiqueta do botão",
        "sv": "Knappetikett",
        "th": "ป้ายกำกับปุ่ม",
        "zh-CN": "按钮标签",
        "zh-TW": "按鈕標籤"
      }
    },
        {
          "type": "url",
          "id": "image_link",
          "label": "Image link"
        },

 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
James023
Excursionist
12 2 0

@oscprofessional Okay so that did work but not in the way I was intending. This added an image link option to images with text overlay rather than on a slideshow. Although useful, I need this done for slideshows specifically and preferably have the clicking radius be the entire slideshow slide, corner to corner. I noticed that it is only letting me click towards the middle of the picture rather than the entire picture. 

Elias
Shopify Staff
Shopify Staff
1920 195 317

Hey, @James023.

 

Thank you for following up and providing your store address. We’re limited in the scope of support with custom coding. However, if your store is subscribed to a plan, our Theme Support team will be able to help explore making adjustments to your slideshow so that the entire image is clickable for the Debut theme. 

 

Feel free to keep me posted!

Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Gluecksboutique
Excursionist
36 0 9

Hi, i have got the same problem. Could you please help me.

gluecksboutique.myshopify.com

thx kind regards julia

Elias
Shopify Staff
Shopify Staff
1920 195 317

Hey, @Gluecksboutique!

 

Elias here from Shopify Support. This theme customization is something our Theme Support team might be able to explore helping you out with, free of charge. If you’re interested, I've sent an authentication email at ticket #15462761. Please check your inbox/spam/junk folder in the account owner's email and reply to it. After that, I’ll be able to help forward this request to our Theme Support team right away.

 

Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

tUPApparel
Tourist
5 0 1

@Elias I'm looking for some help. I'd like to make a slideshow clickable with the URL link taking users to a collection page. The code suggestions I have seen posted in other threads within the community doesn't seem to work for my theme (debut). I'm not sure if I have theme support as part of my plan?

 

Can you help?

 

Thanks

Elias
Shopify Staff
Shopify Staff
1920 195 317

Hey, @tUPApparel.

 

Thank you for reaching out on the thread. I’m afraid there isn’t an easy solution to this as this level of theme customization requires advanced coding knowledge. However, if your online store is using a Shopify theme and subscribed to a plan, this is something that our Theme Support team can help explore for your theme. After I send this request to our Theme Support, I can update you with a support ticket. 

 

That said, if you’re using a third-party theme, this does fall outside the scope of support with our Theme Support as we are not familiar with the third-party coding. Nonetheless, if you have limited knowledge with HTML, CSS, Javascript, and Liquid, I recommend hiring a developer or working with Shopify Experts. Shopify Experts are experienced with custom coding and will be able to help customize your theme with this function.

 

Before we move ahead with the customization request, could I get your store’s Shopify URL (.myshopify.com)? And, just to confirm, are you also using the Debut theme? 

Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

AlexanderDuus
Tourist
7 0 2

Hey, we have the same issue at our store "Jwlsupply.myshopify.com". We want the whole slideshow image to link to a product page instead of the small button. We are using the Debut Theme and are subscribed to a plan. Thanks in advance!

Elias
Shopify Staff
Shopify Staff
1920 195 317

Hey, @AlexanderDuus.

 

Thank you for reaching out in this thread and I'd be happy to send a customization request up for you. I was able to locate your store and  I've sent an authentication email to the registered email we have on file. Please check your inbox/spam/junk folder in the account owner's email and reply to it. After that, I can forward this request to our Theme Support team right away.

Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

ngoenka
Excursionist
33 0 10

Hello,

 

I have the same request for my store->  group-bazaar.myshopify.com

 

I basically want to treat the slideshow as a set of full width clickable banners without the need for some overlay button/text etc.

Any help would be appreciated

Elias
Shopify Staff
Shopify Staff
1920 195 317

Hey, @ngoenka.

 

Elias here from Shopify Support. Thank you for reaching out!

 

I understand you'd like to make the entire slideshow clickable and you don't need the overlay for buttons or text fields. That being said, I've sent an authentication email at ticket #16635222 to your inbox. Please check your inbox/spam/junk folder in the account owner's email and reply to confirm. That way, I can help forward this request to our Theme Support team. Thanks!

Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

lyonia89
New Member
1 0 0

Hi Ellias,

I also would like to get the entire slideshow clickable, please assist me with https://sweethometoday.myshopify.com/ 

Thank you!

Bnb
Excursionist
19 0 0

God bless you!

tUPApparel
Tourist
5 0 1
Hi Elias, yes using the Debut theme. The store is t-up-apparel.myshopify.com (tupapparel.com).

I can applied the code if someone has it. Just want to make the entire slide show image clickable.

Thanks.
Akshay_V
Shopify Partner
438 16 58

@lyonia89 , @tUPApparel 

Still, you are facing issue with slideshow then please let me know because it required coding skills to perform a task if you do anything by yourself then you will break theme code and functionality. If you are on Free themes like the debut, Brooklyn, etc. then you can contact Shopify support directly through mail or chat they will assist you with your query but in the paid theme, you need to contact theme developer or Shopify expert like me.

Akshay Vaghasiya | Email: hello@lavitastic.com | Skype: akshayvaghasiya84
Want to modify theme or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Buy me a coffee PayPal