Add color picker

Retired Boards Appdev Store Design
1

I want to add a color picker to my “add to cart” button so I can change the background color to it.

So anybody can show me how to do it, I would really be thankful. I added a color picker to my announcement bar, I would like to do the same with my buttons as well. I need the code so I can put it in.

Thank you

2

Hi @LouisD1

Step 1 :- Add the Color Picker Setting

Edit your theme’s settings_schema.json file to include a color picker for the button background.

  1. Go to your Online Store > Themes > Edit Code.
  2. Open the config/settings_schema.json file.
  3. Add the following JSON snippet inside the relevant section group (e.g., “Theme Settings”)
{
  "name": "Add to Cart Button Background",
  "id": "add_to_cart_button_color",
  "type": "color",
  "default": "#000000"
}

Step 2 :- Apply the Color in CSS

Now, use the color setting to style the “Add to Cart” button. Update the CSS for the button to reflect the selected color dynamically.

  1. Open the theme.liquid file (or a relevant .liquid file, such as base.css or styles.css).
  2. Add the following CSS code, ensuring it targets your “Add to Cart” button:
<style>
  	.add-to-cart-btn {
    	background-color: {{ settings.add_to_cart_button_color }};
  	}
</style>

Replace .add-to-cart-btn with the actual class or ID of your “Add to Cart” button, which you can find by inspecting the button in your browser’s developer tools.

Step 3 :- Identify the Button Class or ID

Ensure that the class or ID used in the CSS matches your “Add to Cart” button. For example:

<button class="add-to-cart-btn">Add to Cart</button>

If your button has a different class or ID, update the CSS accordingly.