Clickable Slideshow [Debut]

Solved
James023
Excursionist
7 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. 

 

0 Likes

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>

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Elias
Shopify Staff
Shopify Staff
1116 116 161

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

0 Likes
James023
Excursionist
7 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

0 Likes
James023
Excursionist
7 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/

0 Likes

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"
        },

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
James023
Excursionist
7 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. 

0 Likes
Elias
Shopify Staff
Shopify Staff
1116 116 161

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

0 Likes
Gluecksboutique
Excursionist
31 0 8

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

gluecksboutique.myshopify.com

thx kind regards julia

0 Likes
Elias
Shopify Staff
Shopify Staff
1116 116 161

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

0 Likes