How To Remove Highlighted Text from Buy Buttons And Add to Cart and Buy it Now Button?

Shopify Discussion

Topic summary

Issue: Unwanted gray highlighting on “Bundle and Save” Buy buttons and on Add to Cart/Buy It Now, plus requests to unbold and adjust capitalization (“Add to Cart”, “Checkout”). Screenshots are provided to illustrate the styling problems.

Actions taken (via CSS in theme.liquid, the main Shopify theme file):

  • Removed gray backgrounds: unset background for kaching-bundles bar title and button spans.
  • Unbolded and capitalized button text: font-weight: 400; text-transform: capitalize for product submit and cart drawer checkout.
  • Further tweak: unbolded cart drawer checkout button.
  • Changed checkout label by hiding the original button and adding a ::before pseudo-element with custom text (“CheckOut”) and styling. (A CSS pseudo-element inserts content before an element.)

New/ongoing issues:

  • In the cart, the gray highlight appears to cover Apple Pay/Google Pay icons; the helper could not see payment buttons in their screenshot, so this remains unresolved.
  • Request to standardize “Checkout” (one word with capital C) across locations; current custom text is “CheckOut,” not the exact requested casing.

Status: Partial resolution for background/removal and typography; payment button overlay and exact “Checkout” capitalization remain open, pending further adjustments and possibly store access for inspection.

Summarized with AI on December 20. AI used: gpt-5.
1

Hi,
I am trying to remove the highlighted text in light gray on the Buy 1, 2,3 in the Bundle and Save section. This was not there before.

Also, the add to cart/buy it now section is highlighted in white as well. How can I remove the highlighted sections?

Screenshot 2024-08-31 at 11.59.30 PM.png
Screenshot 2024-08-31 at 11.59.30 PM.png1404×1016 50.1 KB

2

Hello @GEVANTE

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

3

Thanks!

4

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

span.kaching-bundles__bar-title { background: unset !important; } button.product-form__submit span, .shopify-payment-button span { background: unset !important; }

niraj_patel_0-1725176218418.png
niraj_patel_0-1725176218418.png610×497 21.1 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

5

Thanks, do you know how to un-bold that Add to cart text as well? Can’t thank you enough!

6

Not only unbold, but do can you change the text to: Add to Cart, instead of Add to cart?

Capitalizing the letter C in Cart.

Also, when adding the item to cart, I want to capitalize the O in “Check out” as well.

Thank you, please let me know!

7

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

button.product-form__submit { font-weight: 400 !important; text-transform: capitalize !important; } .cart-drawer .cart__checkout-button { text-transform: capitalize !important; }

niraj_patel_0-1725178232899.png
niraj_patel_0-1725178232899.png374×232 12.5 KB

niraj_patel_1-1725178247948.png
niraj_patel_1-1725178247948.png540×177 5.73 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? PLEASE Mark my both solutions as an Accepted Solution.

8

Hey Niraj,

So sorry for the trouble.

One last thing, could you make the Check Out text not be bold?

Thank you so much.

9

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

#CartDrawer .cart__checkout-button { font-weight: 400 !important; }

niraj_patel_0-1725180198260.png
niraj_patel_0-1725180198260.png367×250 12.7 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? PLEASE Mark my ALL solutions as an Accepted Solution.

10

IMG_4411.png
IMG_4411.png1179×2556 157 KB

Hi Niraj,

i see when i go to my cart, the highlighted gray part is covering the Apple Pay and google pay icon. Could you help me with this?

11

Also the checkout O in here is not capitalized as well. Can you actually combine the word checkout into one word? For the previous one you helped me out with, could you also change that check out text into one word “Checkout”? Thanks

12

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

button#CartDrawer-Checkout::before { content: "CheckOut"; visibility: visible; position: absolute; background: rgba(var(--color-button),var(--alpha-button-background)); display: flex; justify-content: center; align-items: center; font-weight: 400 !important; } #CartDrawer .cart__checkout-button { visibility: hidden; position: relative; }

Not able to find your payment buttons and you can see the below image:

niraj_patel_1-1725184266834.png
niraj_patel_1-1725184266834.png379×595 27.1 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Now Please Mark MY ALL SOLUTIONS as an Accepted Solution.

Thanks :slightly_smiling_face: