How to change shopping bag icon on Spotlight Theme?

Store Design
, ,

Topic summary

A user wants to replace the default shopping bag icon in Shopify’s Spotlight theme with a custom icon from Remixicon while maintaining the same size.

Main Solutions Provided:

  • PageFly-Theodor’s approach: Upload a PNG image to Shopify, locate icon-cart.liquid in the theme code, comment out old code, and replace with new image URL.

  • Huptech-Web’s approach: Replace the SVG code in both icon-cart.liquid and icon-cart-empty.liquid files, then add CSS to base.css to control icon dimensions (30px width/height).

Key Issue Encountered:

When applying the same code to icon-cart-empty.liquid, the empty cart icon appears misaligned (too high, not centered) despite using identical code that works correctly for the filled cart icon.

Proposed Fix:

niraj_patel suggested adding custom CSS to theme.liquid before the </body> tag to adjust margins and positioning specifically for the header icon at different screen widths.

Status: The discussion remains ongoing as the user continues troubleshooting the alignment issue for the empty cart state.

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

I’d like to change the shopping bag icon on the spotlight theme but keep it the same size. The is the icon I am trying to use - Remix Icon - Open source icon library

Website is: abellire.shop

Password: abellire2023

2

Hello @merchabellire

techlyser_web_0-1703578595986.png
techlyser_web_0-1703578595986.png606×334 7.35 KB

3

So sorry wrong extension, the url is: abellire.shop

4

Hi @merchabellire ,
This is Theodore from PageFly - Shopify Page Builder App.

  • First, you need to find the matching replacement image. preferably a .png image, then upload it to Shopify

  • Next Go to Online Store->Theme->Edit code ->search and find file icon-cart.liquid

  • Next step: comment on the old code again

  • Finally, replace it with the new code and the URL of the uploaded image

PageFlyTheodor_0-1703578829339.png
PageFlyTheodor_0-1703578829339.png399×185 29.1 KB

PageFlyTheodor_1-1703578829552.png
PageFlyTheodor_1-1703578829552.png370×131 1.09 KB

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

5

Hi @merchabellire
You can replace the icon with the below SVG icon code in the icon-cart.liquid
1 Like
6

Works when the cart has something in it. When empty it is the original icon, if I apply the same code to the icon-empty it looks like this (too high, not centered)

merchabellire_0-1703579755618.png
merchabellire_0-1703579755618.png836×200 4.33 KB

7

Hello @merchabellire
you have to change same code in icon-cart-empty file also.

8

I did so, that’s the result thought with that same code in icon-cart empty, its as if the padding or positioning is off

9

you paste same code in icon-cart-empty file?

10

Yep, exact same code

11

techlyser_web_0-1703581134844.png

I have also pasted the code as I told you and you can see the result above.

12

merchabellire_0-1703581333677.png
merchabellire_0-1703581333677.png822×236 7.39 KB

merchabellire_1-1703581362728.png
merchabellire_1-1703581362728.png1738×1320 60.7 KB

not centered in any view

13

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.header .header__icon svg { margin-top: 12px; } @media screen and (max-width:767px){ header-drawer { margin-top: -7px; } }
1 Like
14

Hi @merchabellire
I have updated the icon to fit the size.
Change the SVG icon to the below SVG code for both files icon-cart.liquid & icon-cart-empty.liquid

And add the below CSS code to base.css

.header__icon--cart svg {
    width: 30px;
    height: 30px;
}
2 Likes