How can I change the color of my 'Add to Bag' button to #69D3EA?

Store Design

Topic summary

A user seeks help changing their ‘Add to Bag’ button color to #69D3EA (a light blue shade).

Solutions provided:

Method 1 (PageFly-Lucas):

  • Navigate to Online Store → Theme → Edit code
  • Locate the theme CSS file
  • Add this CSS at the bottom:
.ProductForm__AddToCart {
  background: #69D3EA !important;
}

Method 2 (NomtechSolution):

  • Find the CSS selector for the button (e.g., .add-to-bag or #add-to-bag)
  • Update or add the background-color property:
.add-to-bag {
  background-color: #69D3EA;
}

Both approaches involve editing the theme’s CSS file to apply the custom color. The first method uses !important to override existing styles, while the second provides a more general CSS targeting approach.

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

Please, could someone tell me how to change my ADD TO BAG button colour to #69D3EA?

Screenshot 2023-05-25 at 15.00.05.png
Screenshot 2023-05-25 at 15.00.05.png4476×2194 746 KB

2

Hi @Ellibelle

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

Step 2: Search file theme.css

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

.ProductForm__AddToCart {

background: #69D3EA !important;

}

Hope that my solution works for you.

Best regards,

Lucas| PageFly

1 Like
3

  1. Locate the CSS code: Open the CSS file associated with your website or theme. Look for the section or selector that targets the “Add to Bag” button. This might be a class like .add-to-bag or an ID like #add-to-bag.

  2. Change the button color: Once you’ve found the relevant CSS selector, add or modify the background-color property to set the desired color. Update the value to #69D3EA to change the button color to that specific shade of blue. Here’s an example:

.add-to-bag {
  background-color: #69D3EA;
  /* Add any other desired styles for the button */
}