Customize New Product Variant Button Style

I am in LOVE with the new variant button option we have in Squarespace!! 🙌 

I decided to tinker a bit with the design of it, changing up colors, borders, shape, and adding a hover effect, all using CSS based on the full selector for these buttons: 
.variant-option .sqs-button-element--secondary 

Here is a tutorial video I made about it, and the codes I used in case anyone else wants to get creative here, too! 🎉

/* change the variant button style */
.variant-option .sqs-button-element--secondary {
  background:#F6EDCE!important; /* change the button background color */
  border: 2px solid #EDD17D!important; /* change the button border */
  border-radius:0!important;/* change the button shape */
  font-size: 1rem!important;/* change the button font size */
  text-transform: uppercase;/* change the button character style */

}

/* change the button on a hover */
.variant-option .sqs-button-element--secondary:hover {
  background:#EDD17D!important; /* change the button background color */
  color: brown!important; /* change the font color */
  box-shadow: 5px 5px 15px rgba(0,0,0,0.2) /* give the button a shadow */
}

/* change the selected button style */
.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label { 
  background: #e5f5f6 !important;/* change the button background color */ 
  color: #50bdb8 !important;/* change the button font color */
  border: 1px solid #50bdb8 !important; /* change the button border */
  border-radius: 3rem !important; /* change the button shape */
}

Why is the word !important used a gazillion times in this code?! That little extra CSS is helping us overwrite the style already being applied to the button based on your secondary button style. Everyone has different design settings selected for this button, so you might not need to add !important to every value in your code, but I added it to this code to make sure it will work! It won’t add a significant amount of load time to your site, and it won’t affect anything else that is loading - just the variant buttons we are restyling. 

Anyhoo - hope you found this info helpful, and have fun with your Squarespace website! 🥰

This is cool, however I can't get the selected button to play ball. Any tips? 

This is the code I'm working with:

.ProductItem-details .variant-radiobtn-wrapper label {
  text-align: center;
  margin: 5px 0px;
  display: block !important;
  width: 100% !important;
}

/* change the selected button style */
.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:cheacked+label { 
  background: #e5f5f6 !important;/* change the button background color */ 
  color: #50bdb8 !important;/* change the button font color */
  border: 1px solid #50bdb8 !important; /* change the button border */
  border-radius: 3rem !important; /* change the button shape */
}

On 8/16/2023 at 10:25 PM, DreamrW said:

This is cool, however I can't get the selected button to play ball. Any tips? 

 

This is the code I'm working with:

.ProductItem-details .variant-radiobtn-wrapper label {
  text-align: center;
  margin: 5px 0px;
  display: block !important;
  width: 100% !important;
}

/* change the selected button style */
.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:cheacked+label { 
  background: #e5f5f6 !important;/* change the button background color */ 
  color: #50bdb8 !important;/* change the button font color */
  border: 1px solid #50bdb8 !important; /* change the button border */
  border-radius: 3rem !important; /* change the button shape */
}

 

 

If you share link to a variant product, we can check and help easier

3 hours ago, tuanphan said:

If you share link to a variant product, we can check and help easier

I've actually removed it now Tuan, thanks though. 

The issue with the code above is that the word checked is spelt wrong. correct this and it works....

Thanks for the original code, works great! I have used it here...

https://www.therum.company/shop/p/rum-club-gift

/* change the variant button style */
.variant-option .sqs-button-element--secondary {
  background:#F6EDCE!important; /* change the button background color */
  border: 2px solid #EDD17D!important; /* change the button border */
  border-radius:0!important;/* change the button shape */
  font-size: 1rem!important;/* change the button font size */
  text-transform: uppercase;/* change the button character style */

}

/* change the button on a hover */
.variant-option .sqs-button-element--secondary:hover {
  background:#EDD17D!important; /* change the button background color */
  color: brown!important; /* change the font color */
  box-shadow: 5px 5px 15px rgba(0,0,0,0.2) /* give the button a shadow */
}

/* change the selected button style */
.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label { 
  background: #e5f5f6 !important;/* change the button background color */ 
  color: #50bdb8 !important;/* change the button font color */
  border: 1px solid #50bdb8 !important; /* change the button border */
  border-radius: 3rem !important; /* change the button shape */
}