Show variants from other products on another product page

[JoshuaLG2]

Hi guys,

I know this question has been asked many times before on the site, however, I can't find any answers that are suitable for what we are hoping to accomplish in our store.

Before I dive into asking and explaining what I'm looking for, I do want to say I am aware that Shopify will extend it's max variants from 100 to 2,000 at some point this year. While I do think that will help us in a lot of cases, unfortunately because they don't plan to add more than 3 product options (after asking Shopify Plus Support) this will still limit us as we have anywhere from 5-8 options on a lot of our products. Because of this, if we solely rely on the 2,000 variant limit that is upcoming, our customers will still have to scroll through long lists of product variants until they see the option they want, something that would be alleviated if we had additional options that they could select to narrow it down.

One of our products has more than 800 versions of it because we allow customers to choose things like color, injector size, throttle body size, ECU features, pump style, etc (automotive systems btw) and each specific combination has it's own price and SKU. With Shopify's current limits, we have had to split our product into multiple product pages so that customers can see or find each option. What we want is to have one product page that gives our customers the option to build it from that one page. I have tried about 15 different apps from the app store that allow you to "have more product options" but each of these apps only lets you do that by adding a product that adds to the parent item price. We want it to actually work like how the apps advertise where it lets them choose a different variant that has it's own price and SKU that replaces the default selected price/SKU. 

Has anyone found any app that would accomplish this, or perhaps another way to go about doing this? 

Thank you in advance!

[PaulMartin]

Hmmmm. Could you give me a sample of on how it works? I'm currently working with someone where they sell wires, and in their Shopify store, they have set up a system that narrows down the choices. From a general category down to the most specific. An example of how their system works is:
General wire type -> Categories under that general type -> Category of the category of general type -> differing products under that category, differing by their wire thickness I think -> the actual product
Copper wire -> Copper wire categories -> Category of that Copper wire category -> then the products under that category -> product

The one you are looking sounds like a product builder or narrower. Like I asked above, can you give me a sample of how it works? 

[JoshuaLG2]

Sure thing, here's an example:

Caliber ECU is the product name and it has:

Option 1 | Screen Size:

Small or large

Option 2 | Throttle Body Color:

Black, Polished, and Gold

Option 3 | Distributor Type:

SB/BB Chevy, 289/302 SBF, 351W SBF, 351C/460 BBF, Ford FE, Pontiac 326-455, VW Type 1, 232-258 6-Cyl., Mopar SB LA 273-360, Mopar BB 383/400, or Mopar BB 426/440

Option 4 | Fuel System Type: 

Inline, in tank 1, in tank 2, surge tank, tank conversion 1, tank conversion 2

So in total there are 396 different options that a customer can choose from. Let me know if you need any other information, thanks!

[PaulMartin]

It is indeed a product builder. I got one last question. You mentioned that:
> With Shopify's current limits, we have had to split our product into multiple product pages so that customers can see or find each option.
So, from the 396 options, there are also 396 product pages. Am I correct?

[JoshuaLG2]

Not quite, it depends on the product but generally we have 3-8 product pages depending on how many options we have for that product.

For this one in the example, it might be divided across 3 pages like:

Caliber ECU (Black)

Caliber ECU (Polished)

Caliber ECU (Gold)

Each of the 3 product pages would then have options such as:

Option 1 | Screen Size:

Small or large

Option 2 | Distributor Type:

SB/BB Chevy, 289/302 SBF, 351W SBF, 351C/460 BBF, Ford FE, Pontiac 326-455, VW Type 1, 232-258 6-Cyl., Mopar SB LA 273-360, Mopar BB 383/400, or Mopar BB 426/440

Option 3 | Fuel System Type: 

Inline, in tank 1, in tank 2, surge tank, tank conversion 1, or tank conversion 2

This way, the customer chooses the color they want by clicking on the product page specifically for that color

(This math doesn't work out perfectly, but this is just an example of how we would divide the 300+ variants across product pages).

[PaulMartin]

Ohh, that makes more sense. You're looking to have this in just one product page. I'll try to come up with something here, do some testing and such. And I'll let you know what I come up with.

[JoshuaLG2]

Yes, I should have clarified that at the start haha. I appreciate it! Our current theme allows us to link other products pages to one via buttons (they click on an option like black, polished, or gold and it reloads the page with the with the one you clicked on) but we would like something that doesn't refresh the page as this might throw the customer off. With this setup, we have the buttons above the variant drop downs, and we have text that tells them to choose a color (one of the buttons) first and then choose from the drop down after the page refreshes, so this is also a little clunky and not a super smooth solution, though its the best one we could find for now.

[PaulMartin]

This is going to sound a bit technical, so hope you're ready for it.

The current setup you have is already good, so no need to change into something new. You have a few options for not having it to reload, when clicking the color options, you can use either the Section Rendering API to pull the product section and replace content in the page or Product AJAX API to pull the product details and build the product page from the product details you requested.

[PaulMartin]

You could also use some JS tricks like SPX | Single Page XHR or Turbo Drive which allows you to navigate from one page to the next without needing to reload the browser.

[JoshuaLG2]

Ah good stuff! I will look into this. Thanks so much!

[tim]

One approach was here for years -- https://freakdesign.com.au/blogs/news/105830151-make-a-product-in-shopify-with-more-than-the-100-var... 

It's not that relevant now, since variant selection is now created mostly in liquid and option_selection.js is a thing of the past. 

Also, it's probably not relevant in your case since your main problem is not total quantity of variants but rather a limited number of options.

Now, if every option of yours is price/SKU-changing, you'd really need a product builder, especially if you're talking about hundreds of options.

But one way to approach this without an app could be to combine your options in backend and then split them for display on site.

For example, you may have option "Finish/Screen size" which will have 6 values like

"Polished/Small", "Polished/Large", "Black/Small", "Black/Large", "Gold/Small", etc...

The theme may split them into separate dropdowns for  "Finish": ["Polished", "Black" , "Gold"] and "Screen size": ["Small", "Large"] ...

This, however will require some discipline when creating your variants to avoid having "Black", "BLACK" and "black" ...

And probably would not really work for more than a dozen "options" anyway -- never checked what is a limit on the option name length or option value length are... 

[JoshuaLG2]

---

But one way to approach this without an app could be to combine your options in backend and then split them for display on site.

For example, you may have option "This, however will require some discipline when creating your variants to avoid having "Black", "BLACK" and "black" ...

And probably would not really work for more than a dozen "options" anyway -- never checked what is a limit on the option name length or option value length are... 

---

Yep! This is what we are going to do when the new variant limit is introduced- along with a combination of what we have currently.

[sdservices]

You could try Product Variants Reloaded app
This app allows combining multiple products so that all of their variants can be shown on a single product page. Their premium version also allow having more than 3 options which are tied to real Shopify variants.