Changing the style of the cart button - Dawn Theme

Solved

Changing the style of the cart button - Dawn Theme

isaacdob
Excursionist
65 0 1

I was wondering if anyone knew how to change the style of the cart button on. My current button is a shopping bag but I want to change it to a cart. I'm using dawn theme.

 

www.evrenclothing.com

password - chewno

Accepted Solution (1)

PageFly-Noah
Shopify Partner
1317 233 268

This is an accepted solution.

This is Noah from PageFly - Shopify Page Builder App

 

Hi @isaacdob Here's how you can change the icon. I will guide you in detail. Please follow along. If there are any problems, please respond so I can assist you better.
Step 1: Open file header.liquid and find code show icon, Follow image here:

PageFlyNoah_0-1718852299359.png

Step 2: Search name icon "icon-cart"  and past code new icon instead all code here:

PageFlyNoah_1-1718852573130.png

Code new icon:

 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg>

 

Note that you need to copy the lines I highlighted in the image and put them into the new code.

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 2 (2)

Kyle_Poieo-Dev
Shopify Partner
43 4 8

Hi @isaacdob,

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Snippets" folder, you will find "icon-cart.liquid" and "icon-cart-empty.liquid". These contain SVG nodes that can be changed to whatever shape you'd like them to be.

-

Need a Shopify developer? Send me an Email


- CEO & Lead Developer at Poieo Dev
- Shopify Design Changes | Shopify Custom Coding | Custom Modifications | SEO | E-Commerce Management
Poieo Dev

PageFly-Noah
Shopify Partner
1317 233 268

This is an accepted solution.

This is Noah from PageFly - Shopify Page Builder App

 

Hi @isaacdob Here's how you can change the icon. I will guide you in detail. Please follow along. If there are any problems, please respond so I can assist you better.
Step 1: Open file header.liquid and find code show icon, Follow image here:

PageFlyNoah_0-1718852299359.png

Step 2: Search name icon "icon-cart"  and past code new icon instead all code here:

PageFlyNoah_1-1718852573130.png

Code new icon:

 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg>

 

Note that you need to copy the lines I highlighted in the image and put them into the new code.

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.