Issue with header and cart icon

Technical Q&A

Topic summary

A user requested three CSS modifications for their Shopify store’s product page:

Initial Requirements:

  • Reduce whitespace around the cart icon and make the header sticky (product page only)
  • Fix cart quantity badge placement on mobile
  • Add missing cart quantity number across all platforms

Solution Provided:
A support specialist (BSS-TekLabs) provided custom CSS code to be added to the theme.liquid file. The implementation required two iterations due to a typo in the initial code snippet.

Outcome:

  • Whitespace reduction: ✓ Resolved (user requested further reduction)
  • Sticky header with cart overlay: ✓ Successfully implemented
  • Quantity badge positioning: ✓ Fixed after delay in changes appearing on live site

The issue is now fully resolved. The user noted an unusual delay between code implementation and changes appearing on the live website, but confirmed all modifications are working correctly.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

I need the following:

  1. Reduce whitespace above and below the cart icon in the header on this page, and make the header sticky only on this one page: https://empiricalwater.com/products/starter-kit

  2. Please edit placement of the cart quantity badge on mobile only. This is the incorrect placement:

empiricalarby_0-1722144892337.png
empiricalarby_0-1722144892337.png501×419 42.8 KB

Cart quantity badge placement needs to look like this on mobile:

empiricalarby_1-1722144892601.png
empiricalarby_1-1722144892601.png162×111 477 Bytes

  1. Please add the cart quantity number, which is currently missing on all platforms on that one product page: https://empiricalwater.com/products/starter-kit

Cheers

2

Hi there, @empiricalarby .

Thanks for posting to the Shopify Community! Are you able to share what theme you’re currently using?

3

Hi @empiricalarby ,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the theme.liquid file.

3, Paste the code snippet provided below right before the closing head tag, then save your changes.

BSSTekLabs_0-1722046684147.png
BSSTekLabs_0-1722046684147.png2878×1538 363 KB

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

1 Like
4

The whitespace issue has been resolved, but unfortunately I did not see any changes relating to the cart icon quantity badge. Thanks

5

I would like to reduce that whitespace further as well. Thanks

6

Apologies for the typo mistake in the previous code snippet. Please replace it with the corrected version below:
1 Like
7

I love the sticky overlay you did with the cart button! Very neat, unfortunately I still don’t see any change for the quantity badge. Looks the same as before.

FYI: I have another query and so I made this post just now: https://community.shopify.com/c/technical-q-a/how-to-sticky-overlay-the-buy-buttons-on-this-product-page/td-p/2682011

8

I’ve checked your store, and the quantity badge looks good. The numbers are displaying as expected.

BSSTekLabs_0-1722155638377.png
BSSTekLabs_0-1722155638377.png848×1262 148 KB

1 Like
9

Wow, you’re right. It seems to have taken longer than usual for the change to show up on the live website. It’s 100% fixed now. Thank you so much!

1 Like
10

You’re welcome! :blush: