How do I remove the shopping cart Icon? I just want it to say BAG

Store Design

Topic summary

A user wants to remove the shopping cart icon from their Shopify store header while keeping the text “BAG” visible. The issue affects both desktop and mobile views.

Solutions Provided:

  • Multiple community members suggested adding CSS code to base.css or theme.liquid files
  • The CSS targets .site-header__cart-icon svg with display: none !important
  • For mobile view, a media query targeting @media only screen and (max-width: 767px) was recommended

Current Status:

  • The desktop solution initially worked for the user
  • Mobile view implementation remains problematic - the icon still appears despite applying suggested CSS fixes
  • Multiple CSS variations were attempted without success on mobile
  • The conversation appears ongoing, with the user indicating they will email for further assistance

The discussion includes code snippets and screenshots demonstrating the issue, though the mobile view problem remains unresolved.

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

@GemPages @PageFly-Kate

Screenshot 2023-02-12 at 12.52.37 PM.png
Screenshot 2023-02-12 at 12.52.37 PM.png578Ă—342 1.7 KB

2

@AbdulShakir

send preview link

3

https://abdulshakir.myshopify.com/

1 Like
4

@AbdulShakir

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.scss and paste this at the bottom of the file:
.top-bar svg.icon.icon-cart {
    display: none;
}
5

Hallo @AbdulShakir

You can add code by following these steps to change

  1. Go to Online Store → Theme → Edit code > assets > base.css

paste below code at bottom(base.css)

a.site-header__cart svg {
display: none !important;
}

If you require any further information, feel free to contact me.

Best regards,

6

@AbdulShakir

thanks for link bt i can’t see know this icon i hope do you have fix!

let me know if you need more help

7

Thank you that worked but it only shows it on desktop view how can I get it to show on mobile view as well?

8

Hi @AbdulShakir ,

Glad to support you today.

You can check out my suggestion below to get your concern resolved:

  1. Go to Edit code on Online Store:

GemPages_0-1676269690277.png
GemPages_0-1676269690277.png400Ă—163 25.3 KB

  1. add my code above the tag on Theme.liquid:

Eg:

GemPages_1-1676269741487.png
GemPages_1-1676269741487.png820Ă—826 16.7 KB

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

9

Hallo @AbdulShakir

mobile view

You can add code by following these steps to change

  1. Go to Online Store → Theme → Edit code > assets > base.css

paste below code at bottom(base.css)

@media only screen and (max-width: 767px) {
a.site-header__cart svg {
display: none !important;
}
}

If you require any further information, feel free to contact me.

Best regards,

10

It still doesn’t show

IMG_69326DF980A5-1.jpeg
IMG_69326DF980A5-1.jpeg1284Ă—2778 99.2 KB

11

@AbdulShakir

To remove it, remove all the CSS you have applied so far. And apply this CSS.

@media only screen and (max-width: 767px) {
a.site-header__cart svg {
display: none !important;
}
}

12

It did not work

13

…

14

I’m going to email you