My website has products that have size, color and material variants. However, I don’t necessarily have the variant available in each one of these combinations. I have only created the variants I have in the page. Here is the example:
I have 6 entries for this product with the variants: Color, Size Assortment, Material
If I go to the product and see the first variable (brown color, 37, synthetic-mozaik-nubuck-fanetta) in the above table, then I click on the (black) , the behavior is currently to not do anything, because there is no product that is (black, 37, synthetic-mozaik-nubuck-fanetta); however, there is a product (black,37, synthetic-mozaik-fanetta), which if I click on the product images load.
I want to know how I can change the code to behave in this scenario in a way, where the page redirects you to existing options of the variant you chose. So in this case, if the same scenario above happened, then I would want the page to automatically redirect you from (black, 37, synthetic-mozaik-nubuck-fanetta) to (black,37, synthetic-mozaik-fanetta).
Any ideas how I can do this or any direction I should be looking into? I am aware of dependent dropdowns, but I would prefer to make it work the way I explained above.
It looks like you’ve made some changes to the page to achieve this, but it’s causing an issue where some combinations show as “Unavailable” instead of “Sold Out.”
Let me know if I understand your problem correctly:
Issue:
Since most variants are sold out, you want to display only the available variants to customers.
Solution:
While this isn’t a simple fix, it can be achieved through custom theme development. Follow these steps:
– Shopify automatically selects the first available variant. Undo any changes made to this function.
– Intercept the variant change event, check availability, and auto-select the next available variant in the list.
Note – Ensure a message is displayed when the system changes the variant, so customers are aware of the adjustment.
Let me know if you need further clarification! Let me know if you need someone for this.
The issue is to basically redirect customers away from unavailable variants like in the example I explained, where a certain color is only available in one of the materials and clicking on that color in other materials, just causes the images to not change. The page doesn’t have to redirect if the size assortiment changes, but I need the correct images to load if a material of the same color gets chosen. From what I understand shopify does this automatically if you have only 2 variants, but that logic doesn’t work when there are three variants. The other issue is that I added some custom code to show image swatches instead of colors, but from what I understand the issue is most likely in shopify’s default behavior not applying for 3 and more variants, rather than the image swatches. Let me know what you think I can do please.