Clickable Slideshow [Debut]

Highlighted
New Member
4 0 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>

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Shopify Staff
Shopify Staff
184 31 24

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
New Member
4 0 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
New Member
4 0 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"
        },

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
4 0 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
Shopify Staff
Shopify Staff
184 31 24

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
New Member
4 0 0

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

gluecksboutique.myshopify.com

thx kind regards julia

0 Likes
Shopify Staff
Shopify Staff
184 31 24

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