How can I make an entire image clickable in Debut theme?

Store Design
1

I want to add a link to a specific product collection on an image, but I realized that the “image with text overlay” on the left side of the theme design section is not the header as I initially thought. Although there is an option to include a button with a link to the product page, it covers part of the image. Consequently, I do not want the button, and instead, I want the entire image to be clickable. Unfortunately, removing the button also removes the link, which is frustrating. Can anyone offer advice on how to make the image clickable? I’m using debut

Thank you

2

Hi @zatia ,

This is Victor 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;
}

Hope my answer will help you.

Best regards,

Victor | PageFly

1 Like
3

Amazing, thank you very much

4

This is what I have been asking Shopify for!
We have the current Dawn (9.0) and there isn’t a /theme.scss under the assets code folder. Would you have a suggested solution of code to change?

1 Like
5

I’m trying to do the same, make the images in the multicolumn be direct links to the related collection. I tried adding the code to the multicolumn asset but it didn’t change anything (that I could see). I am using the theme Sense and there is no theme.scss file under assets. Other solutions??