Search code examples
e-commerceshopifyhttp-redirectproductclickable-image

Shopify product images are unclickable


I have a store https://firefits-com.myshopify.com and Fashe colorlib theme is installed.

Issue

The product name is clickable and redirects me to the product detail page but the images are unclickable and do nothing when i hove mouse to it.

What I want

I want the product images that clickable and redirect me to product page as the product name do.

I have searched a lot on Shopify forums, their e-commerce university and theme help but none of them help me.


Solution

  • Your CSS is making things difficult. The grey overlay is in front of the go to page link wrapping the image so the link is unclickable.

    Adding something like this your assets/custom.css stylesheet starts to address the issue but you have a bunch more things to do so that the overlay functions the way you want it to.

    .block2-img.wrap-pic-w {
        width: 100%;
        height: 0;
        padding-top: 133%;
    }
    
    .block2-img a {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: transparent;
        margin: 0;
    }