How I can change the color of the icon (hotspot feature)?

Store Design
,

Topic summary

Topic: change the shopping bag icon color in a product hotspot on a Shopify theme.

• Original issue: theme settings only allow changing the hotspot circle color; the shopping bag icon stays black.

• Requests: multiple replies asked for the store URL to provide targeted CSS; the URL was shared (ka3axctah.myshopify.com).

• Proposed solutions:

  • Add custom CSS via Online Store > Theme > Edit code.
  • Suggestions to place code in theme.liquid (bottom, before ) or in theme.css.
  • One detailed CSS example targeted the hotspot button (e.g., setting background-color and animation), implying style overrides via .hotspots__buttons .hotspot__button.

• Outcome: the user confirmed the CSS worked initially (“That was what I was looking for. Thank you!!!”).

• Latest update: the icon reverted to black without any user changes; the user asked for a new solution.

• Status: unresolved/ongoing. The regression suggests the previous CSS no longer applies or was overridden; no final fix or diagnosis was provided in the thread yet.

Summarized with AI on January 1. AI used: gpt-5.
1

2.png
2.png998Ă—711 760 KB

How can I change the color of the symbol (shopping bag)?
In the option it is only possible to change the color of the circle, but not the color of the shopping bag.
It is always black.

2

Hi @Andrej_M
can you share store URL?

3

Hi @Andrej_M you can change the color of icon by using css. If you could share your store url it will be really helpful.
Regards,
Sarib Khan (Shopify Developer).

4

Hi @Andrej_M ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you! Merry Christmas :heart:

Best regards,

Oliver | PageFly

5
6

Hi @Andrej_M you can paste this code in you theme file

Step 1: Go to Online Store >Theme >Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file before the tag and Hit Save.


If you find it helpful please mark it as a solution
Regards,
Sarib Khan (Shopify Developer)
[LinkedIn Profile](https://www.linkedin.com/in/sarib-khan-912299209)
7

Hello @Andrej_M

You can add code by following these steps

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

  2. Open your theme.css file

  3. Paste the below code at bottom
    .hotspots__buttons .hotspot__button {
    left: 35%;
    top: 54%;
    background-color: #4459bf !important;
    animation: pulse 2s infinite;
    }

techlyser_web_0-1703154850426.png
techlyser_web_0-1703154850426.png872Ă—339 345 KB

8

That was what I was looking for. Thank you!!!

1 Like
9

Hey @saribkhan ,

back then the code was working, but now the symbol is black again.

I didn’t change anything. Do you have a solution for this?