How to Split Product Variants on Category/Shop Pages

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.

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?

@Beyondspace 
www.thespaltydog.com/shop
password: fiverr

Do you mean showing the material option on this page?

@Beyondspace 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.

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  ⬇️

@Beyondspace Thanks, I was hoping to implement a custom solution by updating the array of products to include the wood variant options as well. I just wasn't able to really find how the products were generated on page load.