Changing Cart Icon in Debut theme only worked on Desktop and not mobile?

Store Design
1

I changed icon-cart-liquid to:

because I wanted to change the cart icon. It only shows up on desktop view, and not mobile. How do I fix this?

Thanks!

1 Like
2

Hi,

You want hide or add new for mobile version ?

3

Add new for mobile version

4

Hello SneakerSoul,

This is because there’s a different header for mobile.

In your admin, you have to go to header.liquid and search mobile header there.

Change the code in icon-cart-liquid in the mobile header and your cart icon will appear for the mobile view.

Hope this helps :slightly_smiling_face:

5

Hi, I ended up changing the size of the cart icon smaller, and it showed up on mobile. But it is not aligned with the menu, and when I go to desktop view it way bigger. Any idea how to fix this? If not, do you have the original code handy so that I can revert to the original? thanks!!

1 Like
6

Hello SneakerSoul,

To make it show on the mobile, please go through my above post. You didn’t have to change the size, you just have to go to the mobile header and add/change the icon.

Now as you have ended up increasing your icon size for desktop view, you can reduce the pixels by changing the “width” in the below code:-

<img src “https://cdn.shopify.com/s/files/1/0592/3435/3336/files/shopping-cart_2.png?v=1628749296” width=" " />

Thanks

7

Hi,

upload cart image file in file section

oscprofessional_1-1628832183583.png
oscprofessional_1-1628832183583.png1872Ă—694 70 KB

copy the link & Add image path for cart in

oscprofessional_0-1628832114588.png
oscprofessional_0-1628832114588.png1779Ă—789 91.4 KB

oscprofessional_5-1628832261848.png
oscprofessional_5-1628832261848.png1649Ă—784 43.7 KB

after this add these css

.mobile{
  display : none;
}

@media only screen and(max-width:749px){
.mobile{
  display : block;
}
svg.icon.icon-cart {
    display: none;
}
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Note : If your store is having this media already (for mobile version) then no need to add whole code . Only just add css in that media ie 749px(already exist)

you can style after that you want!
hope this will work for you

8

your store front end will look like this

oscprofessional_0-1628832666934.png
oscprofessional_0-1628832666934.png1874Ă—622 75.6 KB

9

thank you so much for your response. I have inserted all the code in the right places, but on icon-cart.liquid, I am missing the first line of code that you have. I deleted it earlier when I was trying to change it. Do you mind pasting that? Thanks a lot!

-Brock

10

Hi send screenshot of icon-cart.liquid