Shopify Dawn theme Product card clickable area

AntheiaE
Visitor
2 0 1

I am setting up Dawn theme for our store. For the product card, right now, the whole card is clickable. I want to limit the clickable area to the product image and product heading. 

 

Kindly suggest the code changes i can do to achieve this.

 

Regards,

Nitansh 

Replies 4 (4)

Halothemes
Trailblazer
168 30 44

Hi @AntheiaE , 

 

If you use dawn theme, you can try follow the instruction below:
1. Go to Online Store -> Theme -> Edit code.
2. Asset -> /base.css paste code below into end of the file.

 .card--card:after, .card--standard .card__inner:after, .card__heading a:after{
    display: none !important;
  }
  .card .card__inner .card__media{
    z-index: 1 !important;
  }
  .card__badge, .card__information {
    z-index: 2 !important;
  }

3. Snippets -> /card-collection.liquid and /card-product.liquid. Please add code at above <img> tag like image.

<a href="{{ card_product.url }}" class="full-unstyled-link"></a>

Screenshot_6.png

 

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

HaloThemes - Top Premium Shopify Theme Provider
Ella Shopify Theme OS 2.0 - #1 Best Selling Shopify Theme of All Time
Want to try Shopify? Open a Store for FREE

Zworthkey
Shopify Partner
5581 642 1574

@AntheiaE 
<a href="{{ card_product.url }}" class="full-unstyled-link"></a>

add this type of link into your product card,
Thank you

AntheiaE
Visitor
2 0 1

Hi @Halothemes,

 

Thanks a lot for your help.

Now the product title is clickable. 

I want the product image also to be clickable. Actually i am adding "Add to Card" CTA in the card. and to make it clickable, I want only product title and image to be clickable and the rest of the card area should not be.

Halothemes
Trailblazer
168 30 44

Hi @AntheiaE , 

 

Please share your store URL and password of front view.

So that I will check and let you know the exact solution here.

 

Best regards

HaloThemes - Top Premium Shopify Theme Provider
Ella Shopify Theme OS 2.0 - #1 Best Selling Shopify Theme of All Time
Want to try Shopify? Open a Store for FREE