Help Makeshift button clickable

[MelissaM92]

I have had to make 2 different pictures of my desktop and mobile version of the banner. The original banner that was in the dawn theme had a button already installed on the banner, which I used for Desktop version. I had trouble installing a button for the mobile banner onto the image version so i edited my banner image and created a button on the image. can someone please help me make that button clickable? I need the shop now button for mobile to click onto "all products" page. TIA

moimeme.com.au

Kbf295GhpF113

[Sangeetanahar]

hello @MelissaM92 

 The button which you have placed on your image is not your custom one that's why it is not working. You have to put custom code in the image then it will work

thanks

[MelissaM92]

Can you help with a custom code for it? 

[Sangeetanahar]

yes i can help you  wait for some time .i will make a code for you.

Thanks

[Sangeetanahar]

Can you send me the code of this section so that I can add that custom button for mobile to it?

Thanks

[Small_Task_Help]

Hi,

Need to modify the HTML and CSS for the mobile banner

Open appropriate section file where mobile banner code is located and add Overlay

Code example

<div class="mobile-banner">
  <img src="{{ 'your-mobile-banner-image-url-here' | asset_url }}" alt="Banner Image" class="mobile-banner-image">
  <a href="/collections/all" class="mobile-banner-button-link"></a>
</div>

Add CSS for the clickable button overlay
Code example

.mobile-banner {
    position: relative;
    display: inline-block;
}

.mobile-banner-image {
    width: 100%;
    height: auto;
}

.mobile-banner-button-link {
    position: absolute;
    top: 50%; /* Adjust this value based on the location of your button in the image */
    left: 50%; /* Adjust this value based on the location of your button in the image */
    transform: translate(-50%, -50%);
    width: 200px; /* Adjust width to match the button size */
    height: 50px;  /* Adjust height to match the button size */
    display: block;
    z-index: 10;
}

Adjust the Overlay Position

[goldi1]

Hello @MelissaM92 

I saw your store, you have to add custom code in your store, without that it will not work.

thankasss

[MelissaM92]

Hi thanks for your reply. could you help with a custom code?

[goldi1]

yes sure and thankass for the reply. send me your  section code  so i will start the work thankss