Jump to content

Several "add to cart" buttons with different colors for each one.

Go to solution Solved by creedon,

Recommended Posts

Site URL: https://www.focusnutritionus.com/

I'm building a website for a client and this is absolutely insane. I cannot for the life of me find out how to change individual "add to cart" buttons colors. I have three product blocks with add to cart buttons that need to be on the same section for some plans the website is advertising. I cannot find the code or keywords to change only a single product's add to cart button color, which does not seem like a reasonable limitation from the web builder. I've tried using the block ID for the specific product but it completely breaks the buttons design instead, as if it doesn't follow the same CSS rules as any other block. 




Link to comment
  • Solution

Here is some example CSS.

.primary-button-style-solid .site-wrapper #block-yui_3_17_2_1_1657607972117_327082 .sqs-button-element--primary {

  background-color : green;

.primary-button-style-solid .site-wrapper #block-yui_3_17_2_1_1657607972117_74694 .sqs-button-element--primary {

  background-color : blue;


Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.