Jump to content

Help with customizing the Add to Cart buttons on a shop page

Recommended Posts

I could use help applying css code to the Add to Cart buttons on my shop page. I used the following code for the buttons on my home page, and I would like for them to match; however, I am having difficulty figuring out how to get it to apply to my shop page as well. Any help would be greatly appreciated

.sqs-block-button-element{
background: inherit!important;
background-color: rgba(255, 255, 255, .3)!important;
backdrop-filter: blur(5px)!important;
}

Link to comment
  • Replies 2
  • Views 166
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

 

@Stacysays8 You can try one of the following code snippets

Option 1:

#pdp .sqs-add-to-cart-button {
  background: inherit!important;
  background-color: rgba(255, 255, 255, .3)!important;
  backdrop-filter: blur(5px)!important;
}

Option 2:

#siteWrapper.site-wrapper .sqs-button-element--primary {
  background: inherit!important;
  background-color: rgba(255, 255, 255, .3)!important;
  backdrop-filter: blur(5px)!important;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
3 hours ago, Lesum said:

 

@Stacysays8 You can try one of the following code snippets

Option 1:

#pdp .sqs-add-to-cart-button {
  background: inherit!important;
  background-color: rgba(255, 255, 255, .3)!important;
  backdrop-filter: blur(5px)!important;
}

Option 2:

#siteWrapper.site-wrapper .sqs-button-element--primary {
  background: inherit!important;
  background-color: rgba(255, 255, 255, .3)!important;
  backdrop-filter: blur(5px)!important;
}

 

The second one worked! Thank you so much for your help!! 🙂

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.