How can I make my custom banners clickable on a minimal theme?

Store Design
1

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 %}

{% endif %}

{% for block in section.blocks limit: 1 %} {% endfor %}
{% 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 %}

 {% endif %}

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

Many thanks,

www.kybeleconcept.com

2

@KybeleConcept

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

3

Hello,

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

4

@KybeleConcept

sounds good

5

Hello,

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

6

@KybeleConcept

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

yx-desktop-banner.liquid

{% if block.settings.image_link != blank %}
   
{% endif %} 

 

   {% for block in section.blocks limit: 1 %}
   
    
   
   {% endfor %}

 
{% 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


 

   {% for block in section.blocks limit: 1 %}
   
    
   
   {% endfor %}

{% 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 %}

Kybele Concept _ Customize Minimal _ Shopify.png
Kybele Concept _ Customize Minimal _ Shopify.png1920×937 344 KB

7

Thank you sooo so much!!!

8

@KybeleConcept

its my pleasure to help us

9

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,

10

@KybeleConcept

oh sorry please show me issue?

11

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]

12

@KybeleConcept

sorry i can’t see your attachment

13

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

14

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

15

@KybeleConcept

please confirm this look

KetanKumar_0-1656400117119.png
KetanKumar_0-1656400117119.png1920×1080 318 KB

16

Hello, confirmed.

17

@KybeleConcept

desktop and mobile right?

18

yes, for both. thanks so much in advance!

19

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

20

@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;
}