How to hide shopping cart icon in desktop and mobile

Shopify Discussion

Topic summary

A user seeks to hide the shopping cart icon on both desktop and mobile versions of their Shopify store (using the Studio theme).

Proposed Solutions:

  • CSS customization: Multiple respondents suggest adding CSS code to hide the cart icon
  • Implementation methods: Add the CSS either to the theme’s base.css file (at the bottom) or within a custom Liquid section/block using a <style> tag
  • Specific CSS selectors mentioned: #cart-icon-bubble, .header__icon, and related classes with display: none property

Important Reminders:

  • Always backup themes before making code changes
  • Check theme general settings first, as some themes have built-in options to disable features
  • Verify language translations aren’t causing the icon to appear blank instead of hidden

Status: The discussion provides technical solutions but doesn’t confirm whether the original poster successfully resolved the issue.

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

Hi,

My URL is www.momentstayz.com.au

can you please advise how can i hide shopping cart icon in home page?

cecilia_jin111_0-1667965671553.png
cecilia_jin111_0-1667965671553.png999×220 21.7 KB

thanks

cecilia

2

Studo theme - Hide the cart icon in the header for all devices and screen sizes.

Customization themes 101:

  1. Search for previous discussions “{theme name} {problem}”
    1. https://community.shopify.com/c/forums/searchpage/tab/message?q=studio%20theme%20hide%20cart%20icon
  2. Always check a themes general settings for a relevant setting.
  3. Or see if making the language translation blank result in a feature being disabled.

Use the following CSS either in a style tag added to a custom-liquid section|block.

Or add it to the end of the themes base.css

Always backup themes before changing code.

#cart-icon-bubble {
 display: none;
}
3

@cecilia_jin111 Go to assets/base.css and paste below css at bottom of file.

.header__icon:not(.header__icon--summary), .header__icon span

{
display: none !important;
}
4

Apply the Css property {

display:none;

}