Mobile cart icon disappears

Store Design

Topic summary

A custom cart icon displays correctly on desktop and in the theme editor but disappears on mobile devices, though the clickable area remains functional.

Issue Scope:

  • Problem isolated to iPhone/iOS devices (Chrome and Safari)
  • Android devices display the icon normally
  • Icon is present but invisible on affected devices

Resolution:
The issue was resolved by adding CSS code to the base.css file:

  1. Navigate to theme files and locate base.css or theme.css
  2. Add specific CSS targeting .header__icon svg with stroke and fill properties set to rgb(16,27,45) and !important flags
  3. Save changes

Initial CSS solution didn’t work, but a second code snippet (shown in screenshot) successfully restored icon visibility across all mobile devices.

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

I changed my cart icon to a custom icon, and updated my css to fix sizing, etc. All looks good on desktop and even on the theme editor (desktop/tablet/mobile). But when I look at my website on mobile, the cart icon disappears. However, there is a space where it would be, and it even takes me to the cart when I click that empty space (implying something is there, it’s just invisible).

Can anyone help?

www.joshsclubs.com

Screenshot 2024-07-26 at 10.35.41 AM.png
Screenshot 2024-07-26 at 10.35.41 AM.png4306×2104 479 KB

Screenshot 2024-07-26 at 10.36.27 AM.png
Screenshot 2024-07-26 at 10.36.27 AM.png4300×2228 562 KB

1.jpeg
1.jpeg1290×2796 248 KB

2

BSSTekLabs_0-1722005442810.png
BSSTekLabs_0-1722005442810.png359×807 142 KB

I see it still shows up there. What device are you using to view it?

3

I’m using Google Chrome on my phone, and I’ve tried deleting cache/cookies. What else should I try?

4

This error seems to come from iphone error. I checked all android devices I have and they are normal. Iphone device has error.

5

That’s helpful. How can I edit the code to allow it to show up on all devices?

6
  • Here is the solution for you @joshsclubs
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.header__icon svg {
    stroke: rgb(16, 27, 45) !important;
    stroke-width: 0.0005 !important;
    fill: rgb(16, 27, 45) !important;
}
  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
7

Hmm…still did not work. I added that code to base.css and clicked save, but no change on either Google Chrome or Safari (mobile). I also tried clearing cache again. Is there something else I can try?

IMG_DD92CF0DA95C-1.jpeg
IMG_DD92CF0DA95C-1.jpeg1290×2796 251 KB

IMG_29D03D840E54-1.jpeg
IMG_29D03D840E54-1.jpeg1290×2796 248 KB

8

Add this code

BSSTekLabs_0-1722010200954.png
BSSTekLabs_0-1722010200954.png1253×774 40.9 KB

9

That worked! Thanks so much.

1 Like
10

Glad to help you. Have a good day.