How to change or remove the white bar appearing in my cart?

How to change or remove the white bar appearing in my cart?

IvanW34
Visitor
1 0 0

Screenshot 2024-02-18 7.51.58 PM.png

How do change the color of the white bar or get rid of it completely. It only happens when i add an item to the cart Thank you.

Replies 3 (3)

Dan-From-Ryviu
Shopify Partner
9668 1936 1971

Hi @IvanW34 

It is a checkout button, but you set the button's background color, and the text is white, so you see it like that.  

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

JoesIdeas
Shopify Partner
2419 224 645

Go to your Theme settings and take a look at the colors in the checkout settings. Change the color of the button or text, that will be a quick fix so it's not a blank button. Also gives the customer the option to go to checkout now, it's always good to have an easy way to check out.

 

To remove it completely, the easiest way is to hire a developer, it would be a quick fix for someone familiar with Shopify, and it's good to have someone on hand for future edits.

 

But if you prefer to do it yourself, here's my recommended workflow:

1) In the theme editor, duplicate your live theme, then work in the new theme (prevent editing the live site)

 

2) Find the code you want to edit. You can either use a browser tool like Chrome Dev Tools, or you can read the relevant files in your theme (start with Theme.liquid and look at the included files, depending on where your screenshot shows up determines where you look. If it's on product page, start with Product.liquid. If it's on every page, start with Theme.liquid)

 

3) Comment out the code that you believe is showing that button, then refresh the preview to confirm that was it.

 

4) Publish the theme.

 

Some resources to help you if the steps above are not clear:

 

-> Editing your theme: https://speedboostr.com/how-to-safely-edit-your-shopify-theme/

 

-> Shopify Liquid documentation: https://shopify.dev/docs/api/liquid

 

• Creator of Order Automator [auto tag, fulfill, connect FBA, order jobs]
• Co-Creator of Product Automator [suite of features for products / collections]
• Shopify developer for 10+ years, store owner for 7 years
• Blog: Shopify Tips, Guides, and Automation Tools

magenest
Shopify Partner
162 12 23

Hi @IvanW34,
Your button's text and background seem to be both white, which causes that situation. You can customize it by using the CSS or config it directly in the Shopify Theme Editor (most themes allow you to do so).

If you need further help, just drop your store URL and password (if any), and we will be happy to help you with any of your questions.

Can you share with us your store URL and password (if any) so our team can check on that? We would love to provide you with a solution for your issues.

Magenest - One-stop Digital Solution Provider
- Don’t forget to drop a thumbs-up and Mark it as a Solution if you find our response useful
- Elevate your online business with our Shopify experts and professional designers