Hi image 1 is how my add to cart button looks like now , i want to change it to a smaller icon as seen in image 2 . However i was unable to figure out how . Any help is appreciated, Thanks.
this can be done by editing theme code
Please share youre store link
1 Like
You can add this code at the bottom of your base.css file, replace the cart icon link in my code with your own
.card-action .product-form__submit {
color: transparent;
width: 50px !important;
height: 50px;
max-width: 50px ! IMPORTANT;
min-width: 50px !important;
float: right;
background-image: URL("https://cdn.shopify.com/s/files/1/0678/7717/5538/files/add-button.png?v=1744961943");
background-size: 24px;
background-position: center;
background-repeat: no-repeat;
}
Thank you for your help .
-
Is there anyway to change the icon to be circular like in image 2 .
-
Is there a way to chnage the colour of the black icon to white.
-
Can i make the icon only show up when hovering over the image instead of showing permanently
Please use this code instead, and the icon can show when hovering over an image on desktop only. It does not have hover action on mobile.
.card-action {
position: absolute !important;
}
.card-action .product-form__submit {
color: transparent !important;
width: 50px !important;
height: 50px;
max-width: 50px ! IMPORTANT;
min-width: 50px !important;
float: right;
background-image: URL("https://cdn.shopify.com/s/files/1/0678/7717/5538/files/icons8-add-shopping-cart-96.png?v=1744968892") !important;
background-size: 24px !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-radius: 50% !important;
}
1 Like
Thank you for your Help Dan