Issue with Changing Add to Cart Button Background Color in "Honey" Theme

Store Design
, ,

Topic summary

A Shopify store owner using the “Honey” theme is attempting to change the “Add to Cart” button background color to #68BB88 without modifying the theme’s five color schemes. They’re constrained by a 500-character CSS limit and need a concise solution.

Initial attempts failed:

  • Targeting .grid-view-item__link .btn--secondary didn’t work
  • Suggestions to use button#AddToCart selector in base.css were unsuccessful
  • The .product-form__submit selector also failed to apply the color change

Current status:
After the user shared their site URL (mezcalmitre.com), a working solution was provided:

.product-form__item__button-submit {
    background: #68BB88 !important;
}

This selector specifically targets the Honey theme’s button class. The code should be added to the theme’s CSS file (base.css, style.css, or theme.css) in the Assets folder.

Key takeaway: The correct CSS selector varies by theme implementation, requiring site-specific inspection to identify the exact button class being used.

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

Hi everyone,

I’m using the “Honey” theme in my Shopify store and I’m trying to change the background color of the “Add to Cart” button to #68BB88. However, this theme uses five different color schemes, and I don’t want to modify them, which is why I need a CSS-only solution.

I have limited access to custom CSS (only 500 characters max), so I need a concise CSS solution that works within this limit.

I’ve tried the following code, but it doesn’t seem to apply correctly:

css

.grid-view-item__link .btn--secondary { background-color: #68BB88 !important; color: #fff !important; }

I’ve also tried inspecting the elements and using different selectors, but nothing seems to work. Any suggestions or solutions that work specifically for the “Honey” theme without changing the color schemes?

Thanks in advance!

2 Likes
2

Hi @RivonLastWolf

TRy this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
button#AddToCart {
    background: red;
}

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

3

Hello @RivonLastWolf

Go to Online Store, then Theme, and select Edit Code.

Search for assets/base.css Add the provided code at the end of the file.

button#AddToCart {

background: red;

}

4

not working

5

not working

6

If you want to change the background color of the “Add to Cart” button without modifying the theme’s color schemes, here’s a concise CSS solution that should fit within the 500-character limit:

.product-form__submit {
    background-color: #68BB88 !important;
    color: #fff !important;
    border-color: #68BB88 !important;
}

Here’s what you need to do:

  1. Go to Online Store > Themes > Customize.
  2. Find the option for adding custom CSS (often in Theme Settings > Custom CSS).
  3. Paste the code above.

Why It Works- .product-form__submit specifically targets the “Add to Cart” button in most Shopify themes, including “Honey.”

  • !important ensures the custom style overrides the theme’s built-in rules.
  • The concise code fits within your character limit.

Simpler Solution with EasyEdits

If you’re tired of dealing with character limits or inspecting elements, EasyEdits can make this process effortless. I’m the developer, and the app lets you visually change button colors and more. You can try it free and keep all your changes permanently, even without subscribing.

Hope it works out—let me know how it goes!

7

no, it is not working :disappointed_face:

RivonLastWolf_0-1737661536500.png
RivonLastWolf_0-1737661536500.png1464×534 363 KB

8

Hmm… could you share the site URL? Could be a site specific problem.

9

sure. mezcalmitre.com

10

Replace the code on this one. I only use demo theme for that code.

Same instruction.

.product-form__item__button-submit {
    background:  #68BB88 !important;
}

And Save.

Result:

Made4uoRibe_0-1737737370278.png
Made4uoRibe_0-1737737370278.png529×329 9.5 KB

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