Jump to content

Browse/Select Product Option by Image+Text

Go to solution Solved by paul2009,

Recommended Posts

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.

Sold Out Website Mockup – Mobile Small.jpg

Edited by another_calum
Adding additional information and images
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution
14 hours ago, another_calum said:

on product pages, in addition to the customer being able to choose 'size' they also need to be able to choose 'fabric'.

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

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.

15 hours ago, another_calum said:

The site is currently in trial mode so I am unable to share

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. 🙂

15 hours ago, another_calum said:

Have added an image below of how I imagine this working

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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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

 

Link to comment
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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.