Solved

How to make my slideshow clickable [Debutify theme]

Biggy
Tourist
11 0 1

Hi,

How do I make Debutify's Slideshow clickable without using the ugly button they provide ?

I wasn't able to find any solution yet.

Thanks a lot,

AK

Accepted Solution (1)

VivTo
Visitor
1 1 0

This is an accepted solution.

Hello

Go to online store > themes > actions > edit code > header.liquid

Please add this code in the {% schema %} section:

              {
            "type": "url",
            "id": "slide_link",
            "label": "Slide link",
          }

 

Where you find this code:

          <div class="hero__inner">
            <div class="hero__text-wrapper {{ block.settings.text_alignment }}">
              <div class="grid">
                <div class="grid__item large--eight-twelfths push--large--two-twelfths one-whole hero-content">
                  {% if block.settings.title != blank %}
                    <h2 class="hero__title">{{ block.settings.title | escape }}</h2>
                  {% endif %}
                  {% if block.settings.text != blank %}
                    <div class="rte hero__text">{{ block.settings.text }}</div>
                  {% endif %}
                  {% if block.settings.button_label != blank and block.settings.button_link != blank %}
                    <a href="{{ block.settings.button_link }}" class="btn {{ block.settings.button_style }} hero__btn">
                      {{ block.settings.button_label | escape }} <span class="fas fa-arrow-right" aria-hidden="true"></span>
                    </a>
                  {% endif %}
                </div>
              </div>
             </div>

Replace with:

 <div class="hero__inner">
            <a href="{{ block.settings.slide_link }}">
            <div class="hero__text-wrapper {{ block.settings.text_alignment }}">
              <div class="grid">
                <div class="grid__item large--eight-twelfths push--large--two-twelfths one-whole hero-content">
                  {% if block.settings.title != blank %}
                    <h2 class="hero__title">{{ block.settings.title | escape }}</h2>
                  {% endif %}
                  {% if block.settings.text != blank %}
                    <div class="rte hero__text">{{ block.settings.text }}</div>
                  {% endif %}
                  {% if block.settings.button_label != blank and block.settings.button_link != blank %}
                    <a href="{{ block.settings.button_link }}" class="btn {{ block.settings.button_style }} hero__btn">
                      {{ block.settings.button_label | escape }} <span class="fas fa-arrow-right" aria-hidden="true"></span>
                    </a>
                  {% endif %}
                </div>
              </div>
             </div>
              </a>
          </div>

 

Hope this helps!

View solution in original post

Replies 6 (6)

VivTo
Visitor
1 1 0

This is an accepted solution.

Hello

Go to online store > themes > actions > edit code > header.liquid

Please add this code in the {% schema %} section:

              {
            "type": "url",
            "id": "slide_link",
            "label": "Slide link",
          }

 

Where you find this code:

          <div class="hero__inner">
            <div class="hero__text-wrapper {{ block.settings.text_alignment }}">
              <div class="grid">
                <div class="grid__item large--eight-twelfths push--large--two-twelfths one-whole hero-content">
                  {% if block.settings.title != blank %}
                    <h2 class="hero__title">{{ block.settings.title | escape }}</h2>
                  {% endif %}
                  {% if block.settings.text != blank %}
                    <div class="rte hero__text">{{ block.settings.text }}</div>
                  {% endif %}
                  {% if block.settings.button_label != blank and block.settings.button_link != blank %}
                    <a href="{{ block.settings.button_link }}" class="btn {{ block.settings.button_style }} hero__btn">
                      {{ block.settings.button_label | escape }} <span class="fas fa-arrow-right" aria-hidden="true"></span>
                    </a>
                  {% endif %}
                </div>
              </div>
             </div>

Replace with:

 <div class="hero__inner">
            <a href="{{ block.settings.slide_link }}">
            <div class="hero__text-wrapper {{ block.settings.text_alignment }}">
              <div class="grid">
                <div class="grid__item large--eight-twelfths push--large--two-twelfths one-whole hero-content">
                  {% if block.settings.title != blank %}
                    <h2 class="hero__title">{{ block.settings.title | escape }}</h2>
                  {% endif %}
                  {% if block.settings.text != blank %}
                    <div class="rte hero__text">{{ block.settings.text }}</div>
                  {% endif %}
                  {% if block.settings.button_label != blank and block.settings.button_link != blank %}
                    <a href="{{ block.settings.button_link }}" class="btn {{ block.settings.button_style }} hero__btn">
                      {{ block.settings.button_label | escape }} <span class="fas fa-arrow-right" aria-hidden="true"></span>
                    </a>
                  {% endif %}
                </div>
              </div>
             </div>
              </a>
          </div>

 

Hope this helps!

Biggy
Tourist
11 0 1

Thank you very much for your reply 🙂

Not applicable

Thankyou so much for the code.

 

tdcoficial
Excursionist
12 0 9

hi friend, @VivTo 

I tried to do it the way you said but it didn't work here, an error message appears when pasting the first code in the section {% schema%}.

"ERROR: Invalidate JSON in tag 'schema'"

Can you help me?

LeeLarry
Visitor
1 0 0

 

 

 

{
            "type": "url",
            "id": "slide_link",
            "label": "Slide link" //remove the last comma sign "," then its worked.
}

 

 

 

Biggy
Tourist
11 0 1
Go to online store > themes > actions > edit code > header.liquid

Please add this code in the {% schema %} section:

{ "type": "url", "id": "slide_link", "label": "Slide link", }


Where you find this code:


class="grid__item large--eight-twelfths push--large--two-twelfths one-whole
hero-content"> {% if block.settings.title != blank %}
class="hero__title">{{ block.settings.title | escape }}{% endif %} {%
if block.settings.text != blank %}
{{
block.settings.text }}
{% endif %} {% if block.settings.button_label
!= blank and block.settings.button_link != blank %} {{ block.settings.button_label | escape }} {% endif %}


Replace with:


class="hero__text-wrapper {{ block.settings.text_alignment }}">

class="grid">
{% if
block.settings.title != blank %} {{
block.settings.title | escape }}{% endif %} {% if block.settings.text
!= blank %}
{{ block.settings.text }}
{%
endif %} {% if block.settings.button_label != blank and
block.settings.button_link != blank %} {{ block.settings.button_label | escape }} {% endif %}