How to remove or hide the shopping cart button

Store Design
, , , ,

Topic summary

Main Issue:
Users want to hide or remove the shopping cart button from their Shopify store, particularly during early brand-building phases when e-commerce functionality isn’t needed yet.

Primary Solutions Offered:

Option 1 (PageFly-Victor):

  • Navigate to Online Store → Theme → Edit code
  • Search for base.css file
  • Add CSS code: #cart-icon-bubble { display: none !important; }
  • Save changes

Option 2 (GemPages):

  • Go to Online Store → Theme → Edit code
  • Open theme.liquid file
  • Paste provided code before </body> tag

Ongoing Challenges:

  • Mobile-specific visibility: Multiple users (Alif09, shoelgaard) report the cart button persists on mobile view despite working on desktop/tablet
  • Media query conflicts: One user discovered their CSS was caught by a desktop media query, limiting effectiveness to desktop screens only
  • Partial resolution: Shoelgaard fixed their issue by moving the CSS code to the bottom of base.css after the last curly bracket, avoiding media query conflicts
  • Unresolved cases: Alif09 (using Minimal theme) still experiencing issues even after trying suggested fixes, including placing code in theme.scss.liquid

Status: Discussion remains open with mobile display issues unresolved for some users.

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

We know that shopify can quickly build a cross-border e-commerce website, which is its main application scenario. But in fact, shopify’s website building function is also very powerful, no matter in terms of design, typesetting, mobile and desktop adaptation, etc., it is very convenient.

How to hide or remove the shopping cart button when our website is in the early stage of brand building and does not need the online shopping function temporarily? Here is a workaround:

Enter the source code editing interface, select “Section”, open “header.liquid”, find the following code, and mark it as “Comment”, namely: . Note here, it is not recommended to delete the code, so that it can be restored later.

hidden.png

It’s OK.

2 Likes
2

Hi @dongfull ,

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

Step 3: Paste the below code at bottom of the file → Save

#cart-icon-bubble{
    display: none !important;
}

Hope that my solution works for you.

Best regards,

Victor | PageFly

2 Likes
3

Hello @dongfull ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1669347299103.png
GemPages_0-1669347299103.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1669347338596.png
GemPages_1-1669347338596.png1242×854 35.4 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

1 Like
4

Very good. It’s very easy and convenient. The workload required is minimal and flexible.

Thanks. :victory_hand:

1 Like
5

I am glad that my recommendation is helpful to you :grin: .

1 Like
6

Hi Victor,

Please can you help with removing the cart button from mobile view. It doesn’t display on tablet or desktop only on mobile. I have added all the codes I could find from other forums to try solve this, but still no luck.

Thanks

Screenshot 2023-12-14 at 21.41.55.png
Screenshot 2023-12-14 at 21.41.55.png926×149 14.6 KB

7

Hi, I’m trying to do something similar + hide the search icon on Dawn theme.

I wrote:

.header__icon–search {
display: none !important
}

#cart-icon-bubble {
display: none !important;
}

It works perfectly on desktop, and also on mobile in theme editor.

However on real mobile view on my iPhone, it doesnt work.

Does mobile have a different selector or why doesnt it work?

Website
https://ad-client.myshopify.com/

Any help would be greatly appreciated

Best regards
Sylvester

1 Like
8

It turns out my code was caught by a deskop media query, so only had effect on desktop screens.

As soon as I put it all the way in the bottom of base.css after the last } it worked.

A little bit embarresing, but hey, if somebody did the same as me, at least they’ll know how to fix it now! :slightly_smiling_face:

9

Hi there, glad it worked it out for you! Thanks for sharing your solution. It doesn’t seem to be my problem for some reason, I checked and unfortunately I’m still having the same issue :disappointed_face:

10

Hi Alif

Damn, thats frustrating!

Try to put the code in the top of the file, instead of the bottom. If that fixes it, I think you might have pasted the code before the last curly bracket.

11

No luck with that either unfortunately :sleepy_face: I’m using the minimal theme and I entered into theme.scss.liquid if that makes a difference.