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.

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, 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

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, 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

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.