[Debutify Theme] How to make entire banner clickable to replace the "shop now" button

Solved
maurant
Excursionist
31 0 13
Hello, Im using the debutify theme on shopify and I added in a slideshow section as my banner on my homepage. I want to make the entire image be a clickable link to my collection page. I know that there's a button option, but it is right in the middle of the image and looks unappealing
Accepted Solution (1)

Accepted Solutions
Zworthkey
Shopify Partner
2571 309 641

This is an accepted solution.

Kindly share your store URL so,
I can solve it perfectly.
Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 7 (7)
Zworthkey
Shopify Partner
2571 309 641

This is an accepted solution.

Kindly share your store URL so,
I can solve it perfectly.
Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

dmwwebartisan
Shopify Partner
9829 2237 3078

@maurant 

Please share store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
KetanKumar
Shopify Partner
24945 2500 9043

@maurant 

thanks i have update code please check also if someone some issue please try this code

hero.liquid Section code

{% if section.blocks.size > 0 %}

  {% if section.blocks.size > 1 %}
    {% assign hero_slick = true %}
  {% else %}
    {% assign hero_slick = false %}
  {% endif %}

  <div id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="hero-section">
    
    {% include 'hero-header' %}
    
    <div id="Hero-{{ section.id }}" class="hero-container hero-index hero-header{% if hero_slick %} hero-slick{% endif %}"
      {% if hero_slick %}
         data-hero-slick="{{ hero_slick }}"
         data-autoplay="{{ section.settings.autoplay }}"
         data-autoplayspeed="{{ section.settings.autoplayspeed | times: 1000 }}"
         data-dots="{{ section.settings.dots }}"
         data-arrows="{{ section.settings.arrows }}"
      {% endif %}>

      <!-- Blocks -->
      {% for block in section.blocks %}
       
        <div class="hero hero-{{ block.id }}
                    hero--{{ section.settings.section_height }}
                    hero-mobile-{{ section.settings.section_height_mobile }}
                    overlay
                    lazyload
                    hero-parallax
                    {% unless forloop.first == true %}lazypreload{% endunless %}
                    {% if hero_slick %}hero__slide slide--{{ block.id }}{% endif %}"
             {% if block.settings.image %}
             data-bgset="{% include 'bgset', image: block.settings.image %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-position: {{ block.settings.image_position }}; background-image: url('{{ block.settings.image | img_url: 'medium' }});"
             {% endif %}
             {{ block.shopify_attributes }}>

          {% if block.settings.image == blank %}
            <div class="placeholder-background">
              {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
            </div>
          {% endif %}
          {% if block.settings.img_link != blank %}
      <a href="{{ block.settings.img_link }}" class="img-link"></a>
      {% endif %}
          <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>
          </div>

          {% unless block.settings.overlay %}
            <style>
              .hero-{{ block.id }}.overlay:after{
                background-color: transparent;
              }
            </style>
          {% endunless %}
        </div>
      {% endfor %}
    </div>
  
    <div class="slick-navigation">
      <button class="slick-arrows slick-prev">
        <span class="fas fa-arrow-left"></span>
      </button>
      <div class="slick-dots-container"></div>
      <button class="slick-arrows slick-next">
        <span class="fas fa-arrow-right"></span>
      </button>
    </div>

  </div>
{% endif %}

<style>
a.img-link {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 6666;
}
</style>

{% schema %}
  {
    "name": "Slideshow",
	"class": "hero-section",
	"max_blocks": 4,
    "settings": [
	  {
        "type": "select",
        "id": "section_height",
        "label": "Section height (desktop)",
        "default": "xlarge",
        "options": [
          {
            "label": "Extra Small",
            "value": "xsmall"
          },
		  {
            "label": "Small",
            "value": "small"
          },
          {
            "label": "Medium",
            "value": "medium"
          },
          {
            "label": "Large",
            "value": "large"
          },
		  {
            "label": "Full",
            "value": "xlarge"
          }
        ]
      },
      {
        "type": "select",
        "id": "section_height_mobile",
        "label": "Section height (mobile)",
        "default": "xlarge",
        "options": [
          {
            "label": "Extra Small",
            "value": "xsmall"
          },
          {
            "label": "Small",
            "value": "small"
          },
          {
            "label": "Medium",
            "value": "medium"
          },
          {
            "label": "Large",
            "value": "large"
          },
          {
            "label": "Full",
            "value": "xlarge"
          }
        ]
      },
	  {
		"type": "header",
		"content": "Slider options"
	  },
	  {
        "type": "checkbox",
        "id": "autoplay",
        "label": "Auto rotate",
        "default": true
      },
	  {
        "type": "checkbox",
        "id": "dots",
        "label": "Show dots",
        "default": true
      },
	  {
        "type": "checkbox",
        "id": "arrows",
        "label": "Show arrows",
        "default": true
      },
      {
        "type": "range",
        "id": "autoplayspeed",
        "label": "Slide changes every",
        "min": 3,
        "max": 10,
        "step": 1,
        "unit": "s",
        "default": 5
      }
    ],
	"blocks" : [
      {
        "type": "slide",
        "name": "Slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
		  {
            "type": "url",
            "id": "img_link",
            "label": "Image link"
          },
          {
            "type": "select",
            "id": "image_position",
            "label": "Image position",
            "default": "center center",
            "options": [
              {
                "label": "Top left",
                "value": "top left"
              },
              {
                "label": "Top center",
                "value": "top center"
              },
              {
                "label": "Top right",
                "value": "top right"
              },
              {
                "label": "Middle left",
                "value": "center left"
              },
              {
                "label": "Middle center",
                "value": "center center"
              },
              {
                "label":"Middle right",
                "value": "center right"
              },
              {
                "label":"Bottom left",
                "value": "bottom left"
              },
              {
                "label": "Bottom center",
                "value": "bottom center"
              },
              {
                "label": "Bottom right",
                "value": "bottom right"
              }
            ]
          },
		  {
            "type": "checkbox",
            "id": "overlay",
            "label": "Show overlay",
            "default": true
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Slideshow."
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.</p>"
          },
          {
            "type": "select",
            "id": "text_alignment",
            "label": "Text alignment",
            "default": "text-center",
            "options": [
              {
                "value": "",
                "label": "Left"
              },
              {
                "value": "text-center",
                "label": "Center"
              },
              {
                "value": "text-right",
                "label": "Right"
              }
            ]
          },	
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label",
			"default": "Shop now"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Button link",
			"default": "/collections/all"
          },
          {
            "type": "select",
            "id": "button_style",
            "label": "Button style",
            "default": "btn--primary",
            "options": [
              {
                "value": "",
                "label": "Default"
              },
              {
                "value": "btn--primary",
                "label": "Full"
              },
              {
                "value": "btn-outline-primary",
                "label": "Outline"
              }
            ]
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Slideshow",
        "category": "Image",
        "blocks": [
          {
            "type": "slide"
          }
        ]
      }
    ]
  }
{% endschema %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
maurant
Excursionist
31 0 13
KetanKumar
Shopify Partner
24945 2500 9043

@maurant 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing