Solved

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

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)

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

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

View solution in original post

Replies 7 (7)

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

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

maurant
Excursionist
31 0 13

Hi here's my url: www.dogstrom.co

KetanKumar
Shopify Partner
36839 3635 11972

@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

Thank you very much. Works perfectly

KetanKumar
Shopify Partner
36839 3635 11972

@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

dmwwebartisan
Shopify Partner
12280 2546 3693

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
maurant
Excursionist
31 0 13