Solved

How do I change the style of the "Empty Cart" to match the buttons of my theme?

AsianFoodGrocer
Tourist
15 0 1

Can anyone help me change the "Empty Cart" button to where it is aligned in the center, just like the "Checkout" and "Go to cart" buttons. I have pasted the code

 

<a href="/cart/clear" class="btn clear-cart">Empty Cart</a>

 

However I do not know how to style the button.

AsianFoodGrocer_0-1711122634701.png

The link works and it empty the cart however I would like the design to be a little bit better

Accepted Solution (1)
Sweet_Savior_3
Shopify Partner
1054 86 94

This is an accepted solution.

Hello Thanks for waiting.

 

Please add below HTML 

<a href="/cart/clear" class="button button--primary" style="
    margin-top: 20px;
    border: 1px solid #fff;
">Empty Cart</a>

 

it should be added here in the HTML:

Sweet_Savior_3_0-1711125377646.png

 

OUTPUT:

Sweet_Savior_3_1-1711125412645.png

 

BTW your site is really cool. Nice UI.

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!

View solution in original post

Replies 6 (6)

Sweet_Savior_3
Shopify Partner
1054 86 94

Hello @AsianFoodGrocer 

 

Welcome to Shopify Community.

 

Can you please add below code and check

<a href="/cart/clear" class="button btn clear-cart">Empty Cart</a>

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
AsianFoodGrocer
Tourist
15 0 1

Thanks for the fast reply. I pasted the code under like you said and this is what it gave me 

AsianFoodGrocer_0-1711123212816.png

The button looks nice as well, however I have 2 "Empty Cart" buttons. What should I do to get rid of the black "Empty cart" letters?

Sweet_Savior_3
Shopify Partner
1054 86 94

Wait can you please share your store URL so I will give the exact HTML to add and you can remove all the old link HTML added so there will be only one Empty Cart button.

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
AsianFoodGrocer
Tourist
15 0 1

I am trying to send you the password to my store through your inbox however it will not let me do it because, it said "none of the users have PM enabled, I am assuming that personal message, I will see if I can enable mines and hopefully you can enable yours, so I can send you the password to my store, for we are not live yet and do not people on this thread trying to purchase anything yet.

Sweet_Savior_3
Shopify Partner
1054 86 94

This is an accepted solution.

Hello Thanks for waiting.

 

Please add below HTML 

<a href="/cart/clear" class="button button--primary" style="
    margin-top: 20px;
    border: 1px solid #fff;
">Empty Cart</a>

 

it should be added here in the HTML:

Sweet_Savior_3_0-1711125377646.png

 

OUTPUT:

Sweet_Savior_3_1-1711125412645.png

 

BTW your site is really cool. Nice UI.

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
AsianFoodGrocer
Tourist
15 0 1

Thank you so much and that code worked perfectly 😀, and thank you also for the compliments on the site, you are truly a life saver👍