Change add to cart icon/color on mobile with Impact theme

Store Design
,
1

I’m using Impact theme, on mobile it displays a small shopping basket icon. I would like to change the background color to #aadd20 to match my theme. This is for the product card in mobile only.

Store: strongafstyle.com

Thanks!

2

Hi @SAF2

Do you mean like this?

Made4uoRibe_0-1724085646651.png

If it is check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 699px){
a.relative.tap-area {
    fill: #aadd20;
}
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Hi @SAF2 ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1724086037374.png
BSSCommerceB2B_0-1724086037374.png400×195 26.3 KB

Step 2: Search for the file theme.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 768px) {
  .product-card__quick-buy button.product-card__mobile-quick-buy-button {
    background-color: #aadd20 !important;
  }
}

Step 3: Save and reload home page.

=>> The result:

BSSCommerceB2B_1-1724086116908.png
BSSCommerceB2B_1-1724086116908.png634×943 294 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

4

Exactly what I needed, thanks so much!

5

Dear @SAF2 ,

We’re happy to see that our suggestion helped you solve the issue.

Glad to hear that.

Have a nice day!