Browse/Select Product Option by Image+Text

Site URL: https://cymbals-earthworm-2mb3.squarespace.com/

I have a business selling made-to-order, one-of-one garments handmade in England and am in the process of building the site which has a large focus on e-commerce.

What I am having difficulty with is; on product pages, in addition to the customer being able to choose 'size' they also need to be able to choose 'fabric' as this is at the core of the business concept—

I have added an additional product-option for 'fabric' but what I am yet to wrap my head around is how to visualise the options as images+text not text-only as per the Squarespace native design (dropdown). I imagine this working one of two ways:

1. Custom dropdown which in addition to text has the corresponding image—this would apply on both desktop and mobile.

2. The 'fabric' option is visualised as a list of thumbnails which act as buttons which would effectively select the 'fabric' before adding to cart.

I appreciate that this might go beyond the scope of help of the forums, but am eager to hear from anyone who might understand how to do this.

*The site is currently in trial mode so I am unable to share but happy to provide login should anyone require it.

**Have added an image below of how I imagine this working on mobile, and desktop would just be adapted from that.

On 11/23/2021 at 12:55 PM, paul2009 said:

Hi Calum

There isn't a built-in feature that does this, but there's a third-party addon that you can use. It's called the Product Color/Image Swatch Variant Plugin.

In case it helps you with further questions, you can allow us to view the site whilst in a trial by setting a public password in the visibility settings and sharing it with us. 🙂

As you seem to have a very clear vision of what you require, I also wanted to provide you with a quick tip about the sequence in which you build your site.

Before you spend any time on the design and aesthetics, or import hundreds of products, I recommend that you try adding one or two of the most complex products (a variety of product types with many variants) first to see how you get on.

Next, pretend to be a customer by trying to purchase some of your products using some test orders with a range of addresses with different shipping options. This will help you to find any issues early on in your process, and confirm that Squarespace meets your needs in every area - product options, tax, shipping and so on. I say this because I often receive calls from entrepreneurs who have built 95% of their site and are pulling their hair out because a critical feature doesn't exist. It may be worth taking a quick read of my Squarespace Commerce limitations post.

I'll be interested to hear how you get on.

Paul

Hi Paul,

Thanks so much for your reply.

Your post on Commerce Limitations in Squarespace was incredibly informative and has raised some concerns for me regarding Squarespace for this specific project.

In light of this I am going to attempt to build the site in Webflow as I believe it will give me greater design freedom and more comprehensive commerce integration.

Thanks again,
Calum

57 minutes ago, another_calum said:

Your post...was incredibly informative and has raised some concerns for me regarding Squarespace for this specific project.

Hi Calum.

I'll be interested to know a little more about the specific limitations that were an issue and, when you've spent some time on Webflow, whether you were able to overcome these limitations. 

Paul