Products no clickable

Store Design
, , , ,
1

Hi there,

My product images are not clickable: Electric Kettles UK | Fast Boil & Stylish Kettles | Vibe Home

They use to be but did some edits and changes a few weeks ago and just noticed it does not work. Anyone know how to fix? Warm regards and thanks in advance.

2

You can add this code to Custom CSS in Theme settings, then check again

.product-card-wrapper a.card__media-link:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}
Best regards,

Dan from Ryviu: Product Reviews App

3

Hi Dan, thanks for the message. Sadly that does not work.

4

You could try to add code to base.css file at the bottom instead

5

find .ratio class and replace it with

.ratio {
    display: flex;
    position: relative;
    align-items: stretch;
    flex-direction: column;
}
6

Hello @vibehome

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.

  2. Open your main CSS file, which is usually named base.css, theme.css, or main.css.

  3. Add the following CSS at the bottom of the file:

.card__inner {
  position: relative;
}

.card__media-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  cursor: pointer;
}

.card::after,
.card__inner::before,
.card__inner::after,
.media::after {
  pointer-events: none !important;
}

.card__content {
  position: relative;
  z-index: 1;
}

Let me know if you need further assistance!

7

Try this code in “Custom CSS” in “Theme Settings”:

.product-grid .card {
  --border-width: 0px;
}

Explanation:
the code below was deleted from your base.css and --border-width variable is needed for the theme code to make your product card image clickable.
I’d try to restore this code first, but it may have some drawbacks, so you can simply use the code I’ve suggested above.

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
8

Hello , please implement this below solution hope this will work :
Goto the theme assest and search base.css file

Navigate to Online Store

  • Click here “edit code”

  • Search base .css file

  • Open this file and paste the below code at the bottom of the page please refer the below screenshot.
    Code :

    .product-card-wrapper .card__media-link {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    }

image (11)
image (11)1912×643 46.1 KB

9

thanks so much that has fixed it :smiley: