How can I make my custom banners clickable on a 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 [email protected] 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 

[kybelestudios]

Hello again, 

you previously helped me on this topic perfectly, now I have a second store but am using dawn theme. I'd again like to have clickable custom banners for mobile & desktop. any possilibity you could help me on this? many thanks in advance,

[KetanKumar]

@kybelestudios oh sorry for that issue can you please share your store url  so i will check and update you

[kybelestudios]

Hello, I am building my store, kybelestudio.com

Using the dawn theme, but I need two different banners for mobile & desktop that are clickable. Dawn theme doesn’t provide that. Could you possibly help me with this?

[KetanKumar]

@kybelestudios Thanks for url yes you have try this solution its work all theme 

[KybeleConcept]

Hello I just created two banners (desktop&mobile) with the exact same codes and the sections are successfully showing up on sections, but when I upload the images I dont see the images visible on website. What could be the reason?

[KetanKumar]

@KybeleConcept oh sorry but i can't see section  at your home page

[kybelestudios]

Yes indeed, that’s actually the issue. I attach a screenshot for your reference. I copy pasted the mobile & desktop banner codes I had, the sections are showing up on the menu to add, but when I add the sections and upload images & save, on the live view the banners are not visible. What could be the issue? Many thanks again,

[KetanKumar]

@kybelestudios oh sorry, don't worry about it if possible to you have add me a staff account so i will easy to check code and let you know what issue so please share details in DM

[kybelestudios]

hello, I just sent you the invite. thanks a lot in advance!!

[KetanKumar]

@kybelestudios 
Thanks for your all support

but sorry i can't see 

i have give new code can you try this 
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"  src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
   </a>
   {% endfor %}
</div>
</div> 
<style>
@media (max-width: 749px) {.yx-mobile-hidden {display: none;}}
</style>
{% 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"  src="{{ block.settings.yx_image_picker | img_url: '750x' }}" />
   </a>
   {% endfor %}
</div>
</div>
<style>
@media (min-width: 750px) {.yx-desktop-hidden {display: none;}}
</style>
{% 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 %}

[kybelestudios]

it worked, thank you so so much. but the images are huge. what would need to be modified to adjust the site width?

 

[kybelestudios]

hello again, I just adjusted the width thanks to chatgpt. but thank you so much for the code it saved me sooo much time!!

[KetanKumar]

@kybelestudios wow that would be great 

thanks for your all support 

if you want more customization please let me know on DM and email 

[kybelestudios]

Thank you so much I definitely will, I’m very thankful to your help every time.

[KetanKumar]

@kybelestudios its my pleasure to help us.