Dear people, how do i make my Grafic buttons on my hero banner clickable on desktop and mobile version and at the same time stay aligned when customers resize in different screen sizes ? my theme is ecomify-lite ver. 1.0.0 and my website lucky4voeter.nl
i want to upload the new banner “see the image at the bottom“ but i don’t seem to get the buttons clickable.
can someone please help how to make this work ?
Hi @Antonynex,
Kindly provide your store URL please and if it is password protected, please share the password as well.
Thanks!
Hi @Antonynex,
Kindly provide your store URL please.
Thanks!
Hi my url is: https://www.lucky4voeter .nl
On which page is this exact banner image?
Sorry for the delay, here is the link of my website to the exact banner image https://lucky4voeter .nl
I am on mobile right now, i see the banner but I don’t see the buttons.
Yes they said i had te remove the buttons on the banner cause my theme does not support it. I jave the ecomify lite 1.0.0 theme
But in order for me to check I will need the buttons there.
You can duplicate the theme, add the buttons on that theme banner and send me url for that duplicate.
Or
You can give me Collab access to your store to try to add it myself. Also tell me me how and where you need the buttons and where do you want it to direct.
Best
Ok i wil upload the banner with the buttons in a few, that way you can see exactly where the buttons have to be at the bottom of the banner at the same time. I’ll let you know when i have the banner with buttons published on my website and it wil be the same link i wil send you the exact links where the 2 buttons ha e to link to in the next message in a few
ok i have uploaded the banner with the buttons for mobile and desktop and you can see where they have to be exactly, furthermore her are the exact links that the buttons should be linked to:
For the button with “Shop Bestsellers”
https://lucky4voeter.nl/collections/best-sellers
For the button with “Bekijk Nieuwe Collectie” where the word “collectie” wil become the word “Producten”
By the way the button with “Shop Bestsellers” has a typing error for that one, the text wil become “Shop Best Sellers”
Don’t know if that matters for you but just let you know.
Thank you so Mutch for you help !
Right now:
Use the Hero / Slideshow section (NOT Image with text)
Go to:
Online Store → Themes → Customize**
Navigate to your homepage hero banner.
Replace the banner image
Upload:
Add real buttons
Inside the hero section settings:
Set Button 1
https://lucky4voeter.nl/collections/best-sellers
Button 2
https://lucky4voeter.nl/collections/nieuwste-binnenkomers
These buttons will now be fully clickable
You can definitely follow what @oscprofessional said and exactly what I thought was the case. Since your buttons are not different elements but part of the image they are treated as an image and not buttons. I am sure you get this.
You can use image with text sextion add your background image to it. And style the buttons from the customizer to have that color and shadow. You might have to add a bit of css to exactly match the styling but mostly you will be able to from the customizer.
Best
Thank you for your info and that is exactly what i meant, ik now have uploaded de banners for mobile and desktop without the buttons, but when ik go to the hero image button settings and fill in text and appoint an collection, the buttons does not show up at all. it seems to do nothing see screenshot
Modify the hero section file so buttons render independently.
Typical file
sections/image-banner.liquid
or
sections/carousel-slide.liquid
Fix
button_label existsExample logic:
{% if block.settings.button_label != blank %}
<a href="{{ block.settings.button_link }}" class="button">
{{ block.settings.button_label }}
</a>
{% endif %}
This is a safe, clean fix and won’t break updates.
My honest recommendation
A small custom tweak is the correct approach, not fighting the theme UI.
Okay so can you add the section and these two buttons on the duplicate theme. You already sent me the url, just let me know and I will check from the frontend, may be a css style or something is hiding it.
Hi @Antonynex,
Step 1 :
Go to Online Store → Theme → Edit code and create a file (File Name: custom-hero-banner.liquid).
Step 2 :
Paste this code .
{% schema %}
{
"name": "Custom Hero Banner",
"settings": [
{
"type": "image_picker",
"id": "desktop_image",
"label": "Desktop Banner Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile Banner Image"
},
{
"type": "header",
"content": "Image Size Adjustment"
},
{
"type": "range",
"id": "desktop_height",
"min": 300,
"max": 800,
"step": 10,
"unit": "px",
"label": "Desktop Banner Height",
"default": 600
},
{
"type": "range",
"id": "mobile_height",
"min": 200,
"max": 600,
"step": 10,
"unit": "px",
"label": "Mobile Banner Height",
"default": 400
},
{
"type": "select",
"id": "image_fit",
"label": "Image Fit Type",
"options": [
{ "value": "cover", "label": "Cover (Fill Space)" },
{ "value": "contain", "label": "Contain (Show Full Image)" }
],
"default": "cover"
},
{
"type": "header",
"content": "Button 1 Settings"
},
{
"type": "text",
"id": "btn_1_text",
"label": "Button 1 Text",
"default": "Shop Bestsellers"
},
{
"type": "url",
"id": "btn_1_link",
"label": "Button 1 Link"
},
{
"type": "header",
"content": "Button 2 Settings"
},
{
"type": "text",
"id": "btn_2_text",
"label": "Button 2 Text",
"default": "Bekijk Nieuwe Collectie"
},
{
"type": "url",
"id": "btn_2_link",
"label": "Button 2 Link"
},
{
"type": "header",
"content": "Button Colors"
},
{
"type": "color",
"id": "btn_bg_color",
"label": "Button Background Color",
"default": "#ebe3d5"
},
{
"type": "color",
"id": "btn_text_color",
"label": "Button Text Color",
"default": "#5d4037"
},
{
"type": "color",
"id": "btn_hover_bg",
"label": "Button Hover Background",
"default": "#5d4037"
},
{
"type": "color",
"id": "btn_hover_text",
"label": "Button Hover Text",
"default": "#ffffff"
}
],
"presets": [
{
"name": "Custom Hero Banner"
}
]
}
{% endschema %}
<section class="custom-hero">
<div class="banner-container">
{% if section.settings.desktop_image != blank %}
<div class="banner-wrapper desktop-only">
<img src="{{ section.settings.desktop_image | img_url: 'master' }}" alt="Desktop Banner">
</div>
{% endif %}
{% if section.settings.mobile_image != blank %}
<div class="banner-wrapper mobile-only">
<img src="{{ section.settings.mobile_image | img_url: 'master' }}" alt="Mobile Banner">
</div>
{% else %}
<div class="banner-wrapper mobile-only">
<img src="{{ section.settings.desktop_image | img_url: 'master' }}" alt="Mobile Banner">
</div>
{% endif %}
<div class="banner-buttons">
{% if section.settings.btn_1_text != blank %}
<a href="{{ section.settings.btn_1_link }}" class="custom-btn">{{ section.settings.btn_1_text }}</a>
{% endif %}
{% if section.settings.btn_2_text != blank %}
<a href="{{ section.settings.btn_2_link }}" class="custom-btn">{{ section.settings.btn_2_text }}</a>
{% endif %}
</div>
</div>
</section>
<style>
.custom-hero { position: relative; width: 100%; overflow: hidden; }
.banner-container { position: relative; width: 100%; }
.banner-wrapper {
width: 100%;
overflow: hidden;
}
/* Desktop Height Adjustment */
.banner-wrapper.desktop-only {
height: {{ section.settings.desktop_height }}px;
}
.banner-wrapper img {
width: 100%;
height: 100%;
object-fit: {{ section.settings.image_fit }};
display: block;
}
.banner-buttons {
position: absolute;
bottom: 12%;
display: flex;
gap: 20px;
justify-content: center;
width: 100%;
z-index: 10;
}
.custom-btn {
background-color: {{ section.settings.btn_bg_color }};
color: {{ section.settings.btn_text_color }};
padding: 14px 35px;
text-decoration: none;
font-weight: 600;
border-radius: 4px;
transition: all 0.3s ease;
font-size: 16px;
min-width: 200px;
text-align: center;
}
.custom-btn:hover {
background-color: {{ section.settings.btn_hover_bg }};
color: {{ section.settings.btn_hover_text }};
}
.desktop-only { display: block; }
.mobile-only { display: none; }
@media (max-width: 768px) {
.desktop-only { display: none; }
.mobile-only {
display: block;
height: {{ section.settings.mobile_height }}px;
}
.banner-buttons { flex-direction: column; bottom: 8%; align-items: center; gap: 12px; }
.custom-btn { width: 85%; min-width: unset; }
}
</style>
Step 3 :
Go to Edit them and add new custom hero banner section .
Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
