Clickable custom banner on minimal theme

[KybeleConcept]

Hello, 

I wanted to have different banners for mobile and desktop on the minimal theme, so created two custom sections:  desktop banner & mobile banner.

What I want to do next is to make them clickable, currently my desktop banner.liquid code under sections looks as follows:

{% if block.settings.image_link != blank %}
<a href="{{ block.settings.image_link }}">
{% endif %}
<div class="page-width yx-desktop-banner-container yx-mobile-hidden">
<div class="container-full">
{% for block in section.blocks limit: 1 %}
<img class="img-responsive lazyload" data-src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "YX Desktop Banner",
"class": "yx-desktop-banner-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Desktop Banner Image",
"settings": [
{
"label": "Desktop Banner Image",
"id": "yx_image_picker",
"type": "image_picker"
}
]
}

],

"presets": [
{
"name": "YX Desktop Banner",
"category": "Home",
"blocks":[{"type" : "image_picker"}]
}
]

}

{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
<div class="banner-container">
<a href="YOUR_REDIRECTION_LINK_HERE">
<img class="yx-mobile-hidden" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="yx-desktop-hidden" src="{{ section.settings.mobile_image | img_url: "master" }}">
</a>
</div>
{% endif %}

Can you please tell me where I should insert the relevant code to make these banners clickable?

Many thanks,

www.kybeleconcept.com

[KetanKumar · Accepted solution]

@KybeleConcept 

thanks i have done pleas check also if same issue used below code 

yx-desktop-banner.liquid

{% if block.settings.image_link != blank %}
   <a href="{{ block.settings.image_link }}">
{% endif %} 
<div class="page-width yx-desktop-banner-container yx-mobile-hidden">
 <div class="container-full">
   {% for block in section.blocks limit: 1 %}
   <a href="{{ block.settings.button_link }}" class="slides__image-link">
    <img class="img-responsive lazyload"  data-src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
   </a>
   {% endfor %}
</div>
</div> 
{% schema %}
  {
    "name": "YX Desktop Banner",
    "class": "yx-desktop-banner-section",
    "max_blocks": 1,
    "blocks": [
    {
      "type": "image_picker",
      "name": "Desktop Banner Image",
      "settings": [
        {
          "label": "Desktop Banner Image",
          "id": "yx_image_picker",
          "type": "image_picker"
        },
     	{
          "type": "url",
          "id": "button_link",
          "label": "Image Link Desktop"
        }
      ]
    }

  ],

 "presets": [
    {
      "name": "YX Desktop Banner",
      "category": "Home",
"blocks":[{"type" : "image_picker"}]
    }
]
     
  }

{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

yx-mobile-banner.liquid

<div class="page-width yx-mobile-banner-container yx-desktop-hidden">
 <div class="container-full">
   {% for block in section.blocks limit: 1 %}
   <a href="{{ block.settings.button_link }}" class="slides__image-link">
    <img class="img-responsive lazyload"  data-src="{{ block.settings.yx_image_picker | img_url: '750x' }}" />
   </a>
   {% endfor %}
</div>
</div>

{% schema %}
  {
    "name": "YX Mobile Banner",
    "class": "yx-mobile-banner-section",
    "max_blocks": 1,
    "blocks": [
    {
      "type": "image_picker",
      "name": "Mobile Banner Image",
      "settings": [
        {
          "label": "Mobile Banner Image",
          "id": "yx_image_picker",
          "type": "image_picker"
        },
	    {
          "type": "url",
          "id": "button_link",
          "label": "Image Link Mobile"
        }
      ]
    }
  ],
 "presets": [
    {
      "name": "YX Mobile Banner",
      "category": "Home",
      "blocks":[{"type" : "image_picker"}]
    }
 ]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

[KetanKumar · Accepted solution]

@KybeleConcept 

its my pleasure to help us 

[KybeleConcept · Accepted solution]

Hello again @KetanKumar , I would as well like to make those banners full width on mobile and desktop view. Any possibility you could help me with that too? Or should I post that request under another topic? Many thanks in advance,

[KetanKumar]

@KybeleConcept 

its mix up your code if possible to give me theme access so i will quick fix 

[KybeleConcept]

Hello,

thanks for reaching out! what's your email address?

[KetanKumar]

@KybeleConcept 

sounds good

- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help

[KybeleConcept]

Hello,

Just sent you the invite. There are two liquid codes:yx-desktop-liquid & yx-mobile-liquid

[KetanKumar · Accepted solution]

@KybeleConcept 

thanks i have done pleas check also if same issue used below code 

yx-desktop-banner.liquid

{% if block.settings.image_link != blank %}
   <a href="{{ block.settings.image_link }}">
{% endif %} 
<div class="page-width yx-desktop-banner-container yx-mobile-hidden">
 <div class="container-full">
   {% for block in section.blocks limit: 1 %}
   <a href="{{ block.settings.button_link }}" class="slides__image-link">
    <img class="img-responsive lazyload"  data-src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
   </a>
   {% endfor %}
</div>
</div> 
{% schema %}
  {
    "name": "YX Desktop Banner",
    "class": "yx-desktop-banner-section",
    "max_blocks": 1,
    "blocks": [
    {
      "type": "image_picker",
      "name": "Desktop Banner Image",
      "settings": [
        {
          "label": "Desktop Banner Image",
          "id": "yx_image_picker",
          "type": "image_picker"
        },
     	{
          "type": "url",
          "id": "button_link",
          "label": "Image Link Desktop"
        }
      ]
    }

  ],

 "presets": [
    {
      "name": "YX Desktop Banner",
      "category": "Home",
"blocks":[{"type" : "image_picker"}]
    }
]
     
  }

{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

yx-mobile-banner.liquid

<div class="page-width yx-mobile-banner-container yx-desktop-hidden">
 <div class="container-full">
   {% for block in section.blocks limit: 1 %}
   <a href="{{ block.settings.button_link }}" class="slides__image-link">
    <img class="img-responsive lazyload"  data-src="{{ block.settings.yx_image_picker | img_url: '750x' }}" />
   </a>
   {% endfor %}
</div>
</div>

{% schema %}
  {
    "name": "YX Mobile Banner",
    "class": "yx-mobile-banner-section",
    "max_blocks": 1,
    "blocks": [
    {
      "type": "image_picker",
      "name": "Mobile Banner Image",
      "settings": [
        {
          "label": "Mobile Banner Image",
          "id": "yx_image_picker",
          "type": "image_picker"
        },
	    {
          "type": "url",
          "id": "button_link",
          "label": "Image Link Mobile"
        }
      ]
    }
  ],
 "presets": [
    {
      "name": "YX Mobile Banner",
      "category": "Home",
      "blocks":[{"type" : "image_picker"}]
    }
 ]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

[KybeleConcept]

Thank you sooo so much!!!!

[KetanKumar · Accepted solution]

@KybeleConcept 

its my pleasure to help us 

[KybeleConcept · Accepted solution]

Hello again @KetanKumar , I would as well like to make those banners full width on mobile and desktop view. Any possibility you could help me with that too? Or should I post that request under another topic? Many thanks in advance,

[KetanKumar]

@KybeleConcept 

oh sorry please show me issue?

[KybeleConcept]

I have a banner on my website kybeleconcept.com, I would like to make it full width without any white spaces, both on desktop and mobile.

[Image.jpeg]

[KetanKumar]

@KybeleConcept 

sorry i can't see your attachment 

[KybeleConcept]

Hello, I attached it again. it’s the banner under this link at the top of the page kybeleconcept.com[Image.jpeg]

[KybeleConcept]

Hello again @KetanKumar , I attached the screenshots again, I would like to make them full width. Any possibility you could help? many thanks,

my website link is kybeleconcept.com

[KetanKumar]

@KybeleConcept 

please confirm this look

[KybeleConcept]

Hello, confirmed.

[KetanKumar]

@KybeleConcept 

desktop and mobile right?

[KybeleConcept]

yes, for both. thanks so much in advance!

[KybeleConcept]

Hello @KetanKumar any updates on this? looking forward to hearing from you

[KetanKumar · Accepted solution]

@KybeleConcept 

yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

.template-index .main-content {
    max-width: 100%;
    padding: 0;
}

.template-index .main-content .shopify-section {
    max-width: 1340px;
    margin: 0px auto;
    padding: 0px 30px;
}

#shopify-section-1648652706e27ed3c0, #shopify-section-1648652701e885f30f {
    max-width: 100% !important;
    padding: 0px !important;
}

[KybeleConcept]

thank you so mcuh!

[KetanKumar]

@KybeleConcept 

its my pleasure to help us