Jump to content

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

Go to solution Solved by creedon,

Recommended Posts

Posted

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. 

 

 

example.png

Posted

To specify, I want them to all be different colors for "START PROGRAM NOW" or "SIGN UP NOW" - the button on the far right is just that, a regular button. The button in the middle is the button I have applied site-wide CSS to but it changes ALL Add to Cart buttons to that style. 

  • Solution
Posted

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;
  
  }

432941743_ScreenShot2022-07-12at12_26_22PM.thumb.png.36667a8be3ffae780fad82430699ed82.png

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.

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.