VARIANT LIMITS

Highlighted
Shopify Partner
4 0 1

Simple problem ....

6 colors x 20 sizes = 120 unique SKU's.

None of the options impact price (e.g., all 120 SKU's are $50).

I need to track inventory at the SKU level (e.g., Blue / Size 43). 

Everything works fine up until the 100 variant limit.....

I know I can break up my product offering (one product at 3 x 20 and one product at 3 x 20) or reduce my offering (5 colors x 20 sizes or 6 colors x 16 sizes)....but that doesn't work for me.

Surely there must be a way to do this in Shopfiy??  Any help would be greatly appreciated.

Thank you.

 

 

 

 

20 sizes

All are the 

 

1 Like
Highlighted
Shopify Expert
9852 98 1614

The 100 variant limit can't be changed. Breaking the product up into smaller ones is the option you've got left. If you didn't need to track stock than line items would have been the option.

You could add custom code to the theme that takes all the "broken up" products and shows them on a product page so there's the illustion that they are the one product.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Shopify Partner
64 0 4

Hi Jason, is there any way you can give me a hint on how to list those few products together?

0 Likes
Shopify Expert
9852 98 1614

The methods are a tad varied. Here's one.

  • Make a new product. This product will just be a shell and will never be added to the cart
  • Add a metafield(s) to the product that sets sub products (via their handles)
  • Code on the product template grabs info on all those subs...
  • ... and combines them into the one page, in whatever layout is needed
  • When adding to the cart it will add the correct product.

As for the code to drive that -- too fat and crazy for a forum post (and quite simple not enought time!).

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Shopify Partner
64 0 4

Come on, not even a little bit of a coding nudge to get me started!? :-)

0 Likes
Highlighted
Shopify Partner
64 0 4

And also, how would I get the options to display together? for example, I have a product that has more than 100 of one option (window shades, and for each drop-down length, there are more than 100 different width sizes that we offer) How can I split that list and then have the size list together in one option drop-down?

0 Likes
Highlighted
Shopify Expert
9852 98 1614

That comes down to the smarts you add into the theme code. You're largely on your own here with the coding. I can nudge you in the right direction but you have to take the giant leaps, or alternatively seek outside help. This is not a small task.

At the very least if you need to get all the variants from 3 products (for example) on the one page:

{% assign productHandleArray = 'foo-1,foo-2,foo-3' | split:',' %}
{% for productHandle in productHandleArray %}
  {% for variant in all_products[productHandle] %}
    <p>Variant id: {{ variant.id }}</p>
  {% endfor %}
{% endfor %}

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Shopify Partner
64 0 4

OK, so i got a little further, but still cat get all the variants to split up based on options. Here's what I have so far:

{% assign productHandleArray = product.metafields.global.productHandle | split:',' %}
{% for productHandle in productHandleArray %}
  {% for variant in all_products[productHandle].variants %}
    {% capture allvariants %}{{ allvariants | append: variant.id }}{% endcapture %}
    {% capture allvariants %}{{ allvariants | append: ',' }}{% endcapture %}
  {% endfor %}
{% endfor %}
{% assign product_variants = allvariants | split:',' %}
        
<div class="product-options">

          <div class="select clearfix">
            <select id="product-select" name="id">
              {% for variant in product_variants %}
              <option value="{{ variant.id }}"{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}>{{ variant.title }} - {{ variant_price | money }}
              {% endfor %}
            </select>
          </div>

With this, I currently have nothing showing up :( This is after a lot of trial and error. If I take out the id="product-select" of the selection, then it shows up, but i dont know if thats important

0 Likes
Highlighted
New Member
2 0 0

Hi Menny did you get any further with your solution as we are facing the same issue and would appreciate any further information.

Cheers

0 Likes
Highlighted
Shopify Partner
64 0 4

Yes I did actually. I got it to work on my test product late on Friday. Now I'm working on getting all the other products set up to work with this idea. I was going to post this idea for others, but i was waiting until i finished testing all aspects and it was foolproof. Before I post the whole idea, I want to thank Jason for the idea, a guy named Thomas Reggi on Github for showing me where I went wrong, and another guy from Github named Zak Hardage with his idea that saved me last minute.

The idea was already posted by Jason, above, so I'm just gonna post how i was able to implement it. I'm gonna try to dummy this down, so that if any newbies come across this, they wont be like "o.O HUH!?". To work this, you are going to need a metafield app. So, go ahead and download ShopifyFD and if you need this idea for many products (as I do), I suggest you get an app that works best for you that has CSV metafield uploads (Start here: https://apps.shopify.com/search/query?utf8=%E2%9C%93&q=metafield)

OK, so here goes: first you have to set the "Parent Product" this will be a shell, that will not contain any information other then the name and the location (which collection you want this in). So we'll call this "Parent Product". Then, you have to set the products that you need to list together. (Note: you can even set one variant per child product as long as you have the same options set in all the child products - I actually did this. I have a wholesale website and have 75 customers who have custom pricing. I use Boldapps Custom Pricing for that, but that multiplies all the variants by the amount of different prices that are needed, so since i have 75 different prices, I need to list each variant in different child product separately so that it can multiply by 75 without going over 100 in the child product)

Now, what you want to do, is create a metafield in Parent Product that has all the product handles of the child products inside. So in ShopifyFD, set the namespace to be "global", the key to "productHandle" and in the value field list all the child product handles separated by commas. 

Now comes the fun: In your themes, add a snippet titled "metafield-options", and copy this into it:

<form action="/cart/add" method="post">
{% assign productHandleArray = product.metafields.global.productHandle | split:',' %}
  {% assign productHandle = productHandleArray | first %}
  {% if all_products[productHandle].options.size > 1 %}
		{% if all_products[productHandle].options[0] %}
			{% assign used = '' %}
			<label for="select-one">{{ all_products[productHandle].options[0] }}</label>
			<select id='select-one' onchange="letsDoThis()">
              {% for productHandle in productHandleArray %}
				{% for variant in all_products[productHandle].variants %}
					{% unless used contains variant.option1 %}
						<option value="{{ variant.option1 }}">{{ variant.option1 }}</option>
						{% capture used %}{{ used }} {{ variant.option1 }}{% endcapture %}
					{% endunless %}
				{% endfor %}
              {% endfor %}
			</select>
		{% endif %}
		{% if all_products[productHandle].options[1] %}
			{% assign used = '' %}
			<label for="select-one">{{ all_products[productHandle].options[1] }}</label>
			<select id='select-two' onchange="letsDoThis()">
              {% for productHandle in productHandleArray %}
				{% for variant in all_products[productHandle].variants %}
					{% unless used contains variant.option2 %}
						<option value="{{ variant.option2 }}">{{ variant.option2 }}</option>
						{% capture used %}{{ used }} {{ variant.option2 }}{% endcapture %}
					{% endunless %}
				{% endfor %}
              {% endfor %}
			</select>
		{% endif %}
		{% if all_products[productHandle].options[2] %}
			{% assign used = '' %}
			<label for="select-one">{{ all_products[productHandle].options[2] }}</label>
			<select id='select-three' onchange="letsDoThis()">
              {% for productHandle in productHandleArray %}
				{% for variant in all_products[productHandle].variants %}
					{% unless used contains variant.option3 %}
						<option value="{{ variant.option3 }}">{{ variant.option3 }}</option>
						{% capture used %}{{ used }} {{ variant.option3 }}{% endcapture %}
					{% endunless %}
				{% endfor %}
              {% endfor %}
			</select>
		{% endif %}
	{% endif %}
	<input type="hidden"name="id" id="product-select" value="{{ all_products[productHandle].variants.first.id }}" />				
</form>

<script>

	function letsDoThis() {
  {% assign productHandleArray = product.metafields.global.productHandle | split:',' %}
  {% assign productHandle = productHandleArray | first %}
		{% if all_products[productHandle].options[0] %}var opt1 = document.getElementById('select-one').value;{% endif %}
		{% if all_products[productHandle].options[1] %}var opt2 = document.getElementById('select-two').value;{% endif %}
		{% if all_products[productHandle].options[2] %}var opt3 = document.getElementById('select-three').value;{% endif %}
		var id = '';
        {% for productHandle in productHandleArray %}
		{% for v in all_products[productHandle].variants %}
		if(opt1=="{{ v.option1 }}"{% if all_products[productHandle].options[1] %} && opt2=="{{ v.option2 }}"{% endif %}{% if all_products[productHandle].options[2] %} && opt3=="{{ v.option3 }}"{% endif %}) {
				var id = {{ v.id }};
				var price = "{{ v.price | money }}";
			}
		{% endfor %}
      {% endfor %}
		if(id!='') {
			document.getElementById('product-select').value = id;
			document.getElementById('price').innerHTML = price;
		} else {
			document.getElementById('product-select').value = '';
			document.getElementById('price').innerHTML = 'Unavailable';
		}
	}

</script>

Then, add the snippet wherever the option selector is in your theme file titled "product.liquid". If you have some products that need to be split and some that dont, then you can either have two product page liquid templates and set those products that need to have the child products to use the product page that has this code in it, or you have an if statement like this in your regular product page template:

{% if product.metafields.global.productHandle %}
       {% include 'metafield-options' %}
{% else %}
       <div class="select clearfix"{% if hide_default_title %} style="display:none"{% endif %}>
            <select id="product-select" name="id">
              {% for variant in product.variants %}
              <option value="{{ variant.id }}"{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}>{{ variant.title }} - {{ variant_price | money }}
              {% endfor %}
            </select>
          </div>
{% endif %}

You'll also want to change the links in your cart and the customer's previous order page so that when the customer clicks on the product, he is directed to the parent product and not the child product. So what we'll do is use metafields again ;-). So, now, in the CHILD product, we'll create a metafield with the namespace of "link", the key of "URL" and in the value, we'll place the URL of the PARENT product. then in your cart page (and then in the order page) replace this (wherever you find it, it could be in there a couple of times):

<a href="{{ item.url }}">

with this:

<a {% if item.metafields.link.URL %}href="{{ item.metafields.link.URL }}"{% else %}href="{{ item.url }}{% endif %}">

I hope this works for you. There are some things in here that i havent tested yet (havent applied the changing of links in the cart page), but I think I got it right.

 

Also, if any experts can look it over and see if this can be dome simpler, I would be very grateful :-)

2 Likes