Making "image with text overlay" clickable in debut theme

Store Design
, ,
1

Hi all,

I would like to make an image clickable with a link to a specific product collection. At first I thought it was my header but I realised its not the header and in fact the “image with text overlay” T

Its on the left side of the theme design section.

There is an option to add a button with a link to product page but the problem is that the button is covering some of the image, so therefore I dont want this button and instead just for it to be possible to click anywhere on that imagine instead. When I remove the button the link is also removed so as you can understand this is very frustrating.

Please can anyone help me or give some kind of advice what I can do to make this image clickable?

Thank you

2

Hi @Hanna86 ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.scss->paste below code at the bottom of the file:

#shopify-section-hero-1 {
    position: relative;
}
#shopify-section-hero-1 .hero-fixed-width {
    position: static;
}
#shopify-section-hero-1 .hero-fixed-width__content {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none !important;
}
#shopify-section-hero-1 .hero__btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 999;
    margin: 0 !important;
}

I hope it would help you
Best regards,

Richard | PageFly

3

THANK YOU a million times!!! this worked and was super easy to do! thank you thank you

4

Hi @Hanna86 ,

You can try below code:

@media screen and (min-width: 767px) { 
    #shopify-section-hero-1 .hero__inner {
        position: static;
    }
}

I hope it would help you
Best regards,

Richard | PageFly