Jump to content

Can the look of the variant dropdown on the new shop update be changed?

Go to solution Solved by tuanphan,

Recommended Posts

I am loving the new improvements to the shop to make it more e-commerce based. I have activated the "Add to Cart Feature" in the shop, but I don't love the look of the black border around the selection button. It just doesn't suit the aesthetic of my site.  

I used to have CSS for it when you clicked into the item and it had no top, left or right border, so it was just a line at the bottom and in my brand colour. (see image below)
I have tried fiddling with the CSS to restore this look but haven't saved it because it wasn't changing and I actually have no idea what I'm doing (lol). 
Any help would be so greatly appreciated! Thankyou! 🙂

My website: www.lumierechandlery.com.au 

How i would like to get it to look again:

What it currently is:

Link to comment
  • Solution

I tried something but can't get Variant Dropdown to same as this Quantity style


If you need to remove black outline only, use this to Website Tools (under Not Linked) > Custom CSS

/* remove variant border on shop page */
.products.collection-content-wrapper .plp-grid-add-to-cart .variant-option select {
    border-color: transparent !important;


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

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.