Re: How can I make my cart icons bigger and allign the cart icon to the Add to cart text in the butt

Solved

How can I make my cart icons bigger and allign the cart icon to the Add to cart text in the button

INKLY
Explorer
110 0 12

Hi I would like to change the cart icon size both top right and inside the add to cart button. I tried modifying some CSS code but it doesn't; seem to work. Does anyone have a solution to this problem? Thank you very much for your help!

 

Store URL: https://inkly.fr/?_ab=0&_fd=0&_sc=1&preview_theme_id=151132897545

 

INKLY_0-1715669704094.png

 

Accepted Solution (1)

Vinsinfo
Shopify Partner
352 125 118

This is an accepted solution.

@INKLY Please follow the below steps to change the cart icon size for both top right (in header) and inside the add to cart button. Let me know whether it is helpful for you.

 
1. Go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Search "base.css" file and paste below code at the bottom of the file like in the below attached screenshot.
NOTE: You can modify the values of the width and height for both icons as per your need.

 

.product-form__buttons .icon-cart__container {
    vertical-align: middle !important;
    display: inline-block !important;
}
.product-form__buttons .icon-cart__container svg {
    width: 22px !important;
    height: 22px !important;
}
header .header__icons .header__icon--cart svg {
    width: 35px !important;
    height: 35px !important;
}

 

Vinsinfo_0-1715673287374.png

 

 
Final result will be like below image. For you information, you can see the header cart icon in the website differs from the screenshot you attached, please reach out to me if any other help is needed.
Vinsinfo_1-1715673296436.png

 

 
 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 7 (7)

Moeed
Shopify Partner
4351 1121 1375

Hey @INKLY 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
.product-form__submit svg.bi.bi-cart {
    top: 3px !important;
    position: relative;
}
</style>

RESULT:

Moeed_0-1715670653531.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

AnneLuo
Shopify Partner
765 145 158

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Add the code below to the base.css file.

 

.product-form__buttons .icon-cart__container {
    vertical-align: middle;
}
.product-form__buttons .icon-cart__container svg {
    width: 25px;
    height: 25px;
}
.header__icon, .header__icon--cart .icon {
    height: 5.4rem !important;
    width: 5.4rem !important;
}

 


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

INKLY
Explorer
110 0 12

@AnneLuo Thank you so much !

Vinsinfo
Shopify Partner
352 125 118

This is an accepted solution.

@INKLY Please follow the below steps to change the cart icon size for both top right (in header) and inside the add to cart button. Let me know whether it is helpful for you.

 
1. Go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Search "base.css" file and paste below code at the bottom of the file like in the below attached screenshot.
NOTE: You can modify the values of the width and height for both icons as per your need.

 

.product-form__buttons .icon-cart__container {
    vertical-align: middle !important;
    display: inline-block !important;
}
.product-form__buttons .icon-cart__container svg {
    width: 22px !important;
    height: 22px !important;
}
header .header__icons .header__icon--cart svg {
    width: 35px !important;
    height: 35px !important;
}

 

Vinsinfo_0-1715673287374.png

 

 
Final result will be like below image. For you information, you can see the header cart icon in the website differs from the screenshot you attached, please reach out to me if any other help is needed.
Vinsinfo_1-1715673296436.png

 

 
 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
INKLY
Explorer
110 0 12

@Vinsinfo Thank you this works on desktop but on mobile it looks like this: 

 

INKLY_1-1715674103146.png

 

 

Vinsinfo
Shopify Partner
352 125 118

@INKLY Try changing the width and height values from 35px to 40px for the element header .header__icons .header__icon--cart svg like below. Please let me know whether it works.

header .header__icons .header__icon--cart svg {
    width: 40px !important;
    height: 40px !important;
}

 

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
INKLY
Explorer
110 0 12

@Vinsinfo When I 'customise' my website from shopify I can see the cart icon even on the mobile version. But when I publish the changes and go on my phone to see if it works. I still see the old default dawn theme cart icon. 

INKLY_0-1715679522866.png