Hi, I’m using the stiletto theme at the moment but not looking to actually sell any products at this moment in time. As I’m just using a landing page for now I wanted to remove the cart icon at the top of the page. I’ve had a look through some solutions and can’t seem to find one that works for this theme. Any help would be great please!
Topic summary
Goal: hide the cart icon in the Stiletto Shopify theme while using the site as a landing page.
Initial attempts: A user hid all header icons with CSS (.icon-button__icon .icon { display: none; }) and set the cart count background to white when it didn’t hide. They placed CSS in Assets > custom.css, noting uncertainty about overwrite risk.
Alternative placement: Another reply suggested adding code in theme.liquid above , but did not provide specific CSS.
Working desktop fix: Adding CSS to theme.css—.header__icon-touch:last-child { display: none; }—successfully removed the cart icon on desktop.
Mobile issue: The cart icon still appeared on mobile. Images were provided showing desktop removed vs. mobile still visible (attachments central to illustrating the issue).
Mobile fix: Adding CSS to theme.css—.header__row-mobile .header__row-segment.right .header__icon-touch:nth-child(2) { display: none; }—targets the mobile header and hides the cart icon.
Status: With both desktop and mobile selectors applied in theme.css, the cart icon is removed across devices. No remaining questions were raised, suggesting the issue is resolved.
I am far from an expert - this is my first Shopify site (my agency uses WordPress), and I usually get coding help from my developer, but I used this CSS to hide all of the icons in the header. (Also using Stiletto).
.icon-button__icon .icon {
display: none;
}
[data-js-cart-count]{
background-color: #ffffff;}
The cart count didn’t hide, so I set the color to white. Someone else may have a more elegant solution.
Thank you for getting back to me! can I ask where you added this code?
In Edit Code > Assets > custom.css
I sent the theme developer a message last week to confirm if that was where they recommended placing CSS and to find out whether they use SASS but I haven’t received a reply. I want to ensure that it isn’t going to be overwritten.
1 Like
Hi @hadam1992
This is Victor from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Victor | PageFly
Hello @hadam1992
It’s GemPages support team and glad to support you today.
You can follow these steps:
-
Go to Online Store → Theme → Edit code
-
Open your theme.css file and paste the following code below:
.header__icon-touch:last-child{
display: none;
}
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
1 Like
That’s brilliant. Thank you so much for your help
I am glad that my solution is helpful to you.
Best regards,
GemPages Support Team
Sorry I just realised that this code has only removed the cart on the desktop version but not on mobile. Is there a way I can tweak this so that the cart does not show on the mobile version too? Thank you !
You can add the following code in the theme.css file:
.header__row-mobile .header__row-segment.right .header__icon-touch:nth-child(2){
display: none;
}
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team