Jump to content

Swatch colour on product option dropdown

Recommended Posts

On 10/23/2022 at 4:59 PM, s7e said:

Hi,

I wonder if it possible to have a square block of colour in the dropdown so that it is easy for the customer to see the different colours while using the dropdown?

Cheers,

S7e

 

 

 

image.thumb.png.b82e3e1d9d43b40070e0f11f28e43d9a.png

The product option dropdown in Squarespace currently is using the basic HTML select with option and we can not set style for it.

Another approach you can consider is using javascript to create new product option field from the current product option.

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
13 minutes ago, bangank36 said:

The product option dropdown in Squarespace currently is using the basic HTML select with option and we can not set style for it.

Another approach you can consider is using javascript to create new product option field from the current product option.

Thanks for the info, much appreciated - do you know if anyone has done this before is there any sample code anywhere pls?

Link to comment
4 minutes ago, s7e said:

Thanks for the info, much appreciated - do you know if anyone has done this before is there any sample code anywhere pls?

I found the following tutorial for reference

https://www.w3schools.com/howto/howto_custom_select.asp

By the way, What is your current plan? javascript requires at least the business plan

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 10/24/2022 at 1:56 PM, bangank36 said:

I found the following tutorial for reference

https://www.w3schools.com/howto/howto_custom_select.asp

By the way, What is your current plan? javascript requires at least the business plan

 

Thanks @bangank36 for the info, I'm on the Business Plan.

Will this just augment the existing select boxes or will it replace them, what is the likely impact of these changes regards updates made to squarespace, would the code need routinely updating? 

Thanks for any info.

Link to comment
On 10/23/2022 at 4:59 PM, s7e said:

Hi,

I wonder if it possible to have a square block of colour in the dropdown so that it is easy for the customer to see the different colours while using the dropdown?

Cheers,

S7e

 

 

 

image.thumb.png.b82e3e1d9d43b40070e0f11f28e43d9a.png

Swatch colors Like this site? https://www.laboart.com/shop/giacca-umbrella-kroynor

(I helped this site)

image.png.af8a31d5941ee1fe322d45deeccb9018.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.