Add a hover effect to the collection button (Dawn theme)

[dreamtechzone_5]

Hello Everyone!

I am using the Shopify Dawn theme. How to add a hover effect to the collection button? Is it possible? Thank you.

Store: https://puppies-paws-shop.myshopify.com/
Password: Admin

[BSSCommerce-HDL]

Hi @dreamtechzone_5 ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css or styles.css

Step 3: Insert the below code at the bottom of the file → Save

body:has(.collection-list) .card__heading:hover {
    background-color: black !important;
}

body:has(.collection-list) .card__heading {
   transition: all 0.4s;
}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it asa solution. Thank you

[dreamtechzone_5]

When I paste the code, when I hover over the product title, it turns black. Can a border be added to the hover button of the collection? I want the border color to be #9C9405

[BSSCommerce-HDL]

Hi @dreamtechzone_5 , Pls try again with this code:

body:has(.collection-list) h3.card__heading:hover {
    background-color: black !important;
    border: 1px solid #9C9405 !important;
}

body:has(.collection-list) card__heading {
   transition: all 0.4s;
   border: 1px solid transparent !important;
}

body:has(.collection-list) h3.card__heading.h5 {
   border: 1px solid transparent !important;
}

body:has(.collection-list) h3.card__heading.h5:hover {
    background-color: transparent !important;
    border: 1px solid transparent !important;
}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it asa solution. Thank you

[dreamtechzone_5]

Wow Great. It worked. Thank you very much.

[dreamtechzone_5]

I have added the social share icon to the product page through coding. I want to keep the icons inside the button. I have added the image below of how I want the button to be placed. And please check my social share is working? Is it possible? Thank you.

Store: https://puppies-paws-shop.myshopify.com/products/50pcs-dog-bowtie-pet-supplies-small-dog-cat-bow-tie…
Password: Admin

Social Share Button