Sense Theme : Make Product Card Clickable

[webdevil]

I am using sense theme for my store and I want entire product card to be clickable

[beauxbreaux]

I assume you are wanting to to turn your product card into a link. What makes things “clickable” is the tag. This means you will have to touch code to make changes. A good rule of thumb is to make a copy of your theme as a back-up before making any changes. The file that has your product card will depend on your theme. Mine is called product-card-item.liquid. Yours will probably have a similar name. Typically product and card will be in the file name as it is a naming convention.

What you will have to do is move the a tag to be around the parent element of the card. This is just a fancy way of saying the outer most part of the html for that element.

Take a look at my code. You can do the same for yours inside the browser by right clicking the element and clicking inspect.

In this picture you can see the a tag and the closing a tag , everything inside this will have the link also known as the href. You can see from the names the or image of the product is the only thing inside the tag. You will also notice slightly below the closing tag the

with the class ‘product-item-info’ is not inside the opening and closing therefore it will not have the link (be clickable).

To figure out where we want to put the tag we can hover over different elements to see what it is highlighting.

Here is an example:

In this photo I am hovering my mouse over the div tag that is highlighted yellow(which happens to be inside the tag). So you can clearly see everything that is linked is now highlight with blue representing the element and the purple representing the padding (styled-spacing).

You are trying to put more elements inside the tag so you will need to hover over elements outside of the like this:

Notice how now the entire card is selected while hovering? We have found the div we need to wrap our tag around. You can also notice the class names on the div is: “product-card” and “product-card-wrapper”. These are extremely common naming conventions as yours will probably have wrapper in the class name as well. It means like what it sounds like. This is the element at the outer most position that ‘wraps’ itself around the element. We just need to move our opening tag above the opening div tag and the closing tag below the closing

tag so that the entire element is inside the tag.

For me this is the opening tag (we stop at the closing carrot ‘>’ | This tag will be moved above the div with the class product-card-wrapper

Then the closing tag will be moved right above the next next product card opening

which you can find once you hover over elements below.

Here is the example:

This is all done in the browser just to help you solve what you need. Nothing you change in the browser is permanent. You can actually make changes right here in the browser just for practice and it all goes back to normal once you hit refresh. This is mostly just to show you what you are looking for. I often will use the class names to help me find what I need in the file within Shopify’s admin code editor. The code in the browser will be slightly different from in the code editor as what is in the browser is rendered code without the use of variables. But it is similar enough to be able to help guide you in finding the code to edit.

This is a lot for someone new to this. It has been a long time since I first learned this stuff so I may have missed vital information that would be relevant to someone newer. Just let me know if you have any questions. Without your code we can’t really provide a copy and paste solution but you may be able to figure it out from this.

[webdevil]

Thanks for your time with detailed explanation. Earlier I had misplaced the anchor tag, now it’s working! Thanks to you man.