Marketing | Creative | Strategy

Your faithful partner in the discovery of endless digital opportunity.

Take the First Step

How to Develop a "Build a Box" Product in Shopify - Part 2: How to Remove the Limit on Flavors in the Box

That’s right folks! A sequel… and let me say something right off the bat. I know that most sequels are never as good as the original, but I’m going to go ahead and say that THIS one finally is. (If you are just stumbling on this for the first time, you can get a full backstory in our How to Develop a "Build a Box" Product in Shopify article

If you are an avid of our blog, please let us know because we don’t expect there are many of you and you should be rewarded somehow… anyway, in the first part of this blog, we discussed how to create what we call a “build a box”. Essentially it forms a parent child relationship between products so that you can build and mix and match all sorts of flavors of chocolates for example into one box. Of course there are a number of apps that you could use to do this, you are then inviting extra risk and a whole new tech support person you’ll have to befriend, so we wanted to find a way to do it just in shopify… and that is what we reference here.

Now, it’s time for part two. The original cast is back, but with a brand new plot twist. We created the “build a box” and everything was fine, but then our heroes encountered another hurdle. What if your client wants hundreds of flavors rather than just the 100 flavors that Shopify allows.

The question then becomes, how do you get around the limitations of flavors… The solution, although a fairly simple one you may think, is to use multiple separate products to split the flavor variants and across each of them. So if we have 250 flavors for example, the first 100 will be added to product 1, the second 100 will be added to product 2 and the final 50 will be added to product 3.

Makes sense so far, but we also need a way to link these products together so that they can essentially operate as one large single product for all intents and purposes.

  • The first thing we need to do is create a new product type, let’s call it “Build a Box”. We assign this product type to each of the flavor products in the settings

  • Then referring back to the code in our original article, which only pulls in a single flavor product of up to 100 variants (i.e. flavors):

<div id="flavors">
{% for variant in product.variants %}
{% if variant.title != "Box" %}
<a data-variant-id="{{ variant.id }}" data-variant-title="{{ variant.title }}" href="#">
<img src="{{ variant.image.src | img_url: '190x' }}" alt="{{ variant.title }}">
<div class="title">{{ variant.title }}</div>
<div class="price">{{ variant.price | money }}</div>
<div class="weight">{{ variant.weight | weight_with_unit: variant.weight_unit }}</div>
</a>
{% endif %}
{% endfor %}
</div>

We modified this to the following:

<div id="flavors">

{% paginate collections['all'].products by 1000 %}

{% for product in collections['all'].products %}
{% if product.type == 'Build a Box' and product.title contains 'flavors' %}
{% for variant in product.variants %}
<a data-variant-id="{{ variant.id }}" data-variant-title="{{ variant.title }}" href="#">
<img src="{{ variant.image.src | img_url: '190x' }}" alt="{{ variant.title }}">
<div class="title">{{ variant.title }}</div>
<div class="price">{{ variant.price | money }}</div>
<div class="weight">{{ variant.weight | weight_with_unit: variant.weight_unit }}</div>
</a>
{% endfor %}
{% endif %}
{% endfor %}
{% endpaginate %}
</div>

The key differences are that we now loop through all products in the store, using the

 {% paginate collections['all'].products by 1000 %} 

method in order to ensure that we truly do get all of the products within the

{% for product in collections['all'].products %}
 

loop, otherwise shopify only returns the first 1000 products, and for stores with more than 1000 products that obviously presents a problem. Thus, the paginate method ensures that we get all of the products in successive increments of 1000 at a time like we intended.

Then we get the flavor products that we are interested in by setting the condition

 {% if product.type == 'Build a Box' and product.title contains 'flavors' %} 
 

and from there output the same HTML markup as before.

This modification means that we can add an unlimited number of flavors in the box product, rather than being limited to a maximum of 100 that Shopify allows, due to the limit of 100 that Shopify places on the number of variants per product.

And there you have it, folks! A sequel better than the original. In the first one, we taught you how to build your own box of an assortment of flavors, and now we tackled how to make an infinite amount of flavors. That’s pretty cool, now your clients can sell chocolate boxes with an infinite amount of chocolates… which sounds like something I would only allow myself to order on holidays.

Enjoy the endless chocolates… in moderation.

Do you need help building this feature for your online store? Read about our Creative & Development services. 

 

Niall Gallagher
Senior Web Developer
If there is a new web app, I’ve tried it. If it’s integratable, optimizable, automatable, and customizable it is right up my alley. I manage and lead a team of developers that specialize in making a workable digital solution for your business out of nothing. I identify and make ongoing recommendations based on your business goals and the operational feasibility of what can be implemented to allow your business to scale and grow freely. Long story short, we’ll solve problems you didn’t know you had, in way you never thought possible.
close[x]

Get A Quote

Please fill out the quote form to the best of your knowledge. Once submitted, a Slicedbread representative will be back in touch with you as soon as possible.

* Required Fields