Jump to content

How to Split Product Variants on Category/Shop Pages

Recommended Posts

Hey everyone,

I'm looking to see if anyone has figured out how to split product variants up on the category pages. I have a few products that are available in two different types of wood. I'd like to show both options on my category pages but keep only one master SKU product. This way there is still a single PDP where they can see all available options.

I'm very fluent in HTML/CSS and pretty understanding of JS/jQuery. However, I'm not super familiar with how squarespace sets up their source files. I've been looking around at the JS files under assets.squarespace.com > universal > scripts-compressed but haven't been able to see how and where the category page product list is generated. 

 

Any help would be greatly appreciated!

 

Also, my site is currently under construction as I work through this so I have the shop locked.

The password is: fiverr

Please do not attempt to place any orders.

 

Thanks so much.

Link to comment
19 hours ago, TheSpaltyDog said:

Hey everyone,

I'm looking to see if anyone has figured out how to split product variants up on the category pages. I have a few products that are available in two different types of wood. I'd like to show both options on my category pages but keep only one master SKU product. This way there is still a single PDP where they can see all available options.

I'm very fluent in HTML/CSS and pretty understanding of JS/jQuery. However, I'm not super familiar with how squarespace sets up their source files. I've been looking around at the JS files under assets.squarespace.com > universal > scripts-compressed but haven't been able to see how and where the category page product list is generated. 

 

Any help would be greatly appreciated!

 

Also, my site is currently under construction as I work through this so I have the shop locked.

The password is: fiverr

Please do not attempt to place any orders.

 

Thanks so much.

Can you share the URL of categories page so I can take a look?

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

Do you mean showing the material option on this page?

image.thumb.png.c5ebe303259077cbe0dbf5982e1b53b9.png

Edited by Beyondspace

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
16 minutes ago, TheSpaltyDog said:

I'm actually wanting to show the product twice on that page. The white ash version and then the walnut version. That way people can see there are two options without having to click through to the PDP.

You cannot do this if the finishes have been added as variants of one master SKU.

You must add each finish as a separate product if you would like each finish to appear as a separate thumbnail on the Product List Page (PLP).

Did this help? Please give feedback by clicking an icon below  ⬇️

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.