Jump to content

Product Variant Option Selector Change Font Size and Color

Recommended Posts

  • Replies 4
  • Views 532
  • Created
  • Last Reply

Top Posters In This Topic

You can use this to Website > Website Tools > Custom CSS

.ProductItem-details .variant-select-wrapper select, .ProductItem-details .variant-select-wrapper select *, .product-details .variant-select-wrapper:before {
    font-size: 10px !important;

With color, I think there is no way to change it, browser/device control color, each devices (Windows/iOS/Mac) will have a different color.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Posted (edited)

Thanks as always Tuan for the amazing assistance.
That's interesting re: color. I'll stop obsessing about that then I guess:)

Re: Font size-  In Mobile Mode that code effects the size of the variant "Select Pattern" and "Select Threader Length" selection area (see blue box items in photo). But it does not effect "Select Threader Length" in the drop down menu (see red circle in photo). Basically I'm trying to avoid the text wrap-around in mobile mode by lowering the font-size of that section specifically. Any thoughts?

Interestingly enough in Laptop mode that code does effect font size in both the blue square and red circle area. 🤷

Wana Earring Threader — RAEH collection.jpeg

Edited by afs242
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.