Jump to content

CSS code for variant labels on Product Blocks

Go to solution Solved by justin.mabee,

Recommended Posts

Hi! Can anyone please help me style the Variant dropdown on a  product block? It looks super basic and I don't love it.

I'm building a landing page for a product (not using the actual product page) so I need this variant label styled (where it says select package below). 

image.thumb.png.6e7ea8de8805ff03c2415b69b7b39e72.png

 

Thank you so much in advance!

Link to comment
  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution

Hey Taylor!

So this is a bit complicated because it's hard to specifically target just the dropdown itself, but what I was able to do was target the item itself. 

I've included the code for the product page itself, and then for the product block (which is what you have a screenshot of here). This should get you there!

.ProductItem-details .variant-select-wrapper, .ProductItem-details .product-quantity-input input {
  font-family: '';
}

.product-block .productDetails .product-variants .variant-option {
  font-family: '';
}

 

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.