Now you can create bundles and product stacks on Shopify using a single collection page to showcase multiple products, allowing multiple products to be added to the cart all at once!


<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">  {% if collection.products_count > 0 %}
      {% for product in collection.products %}
        {% if product.available %}
              <div class="row">
                <div class="col-xs-12 col-sm-4">
                    <img src="{{ product.image | default: product.featured_image | img_url: 'large' }}" alt="{{ variant.title | escape }}" />
                </div>
                <div class="col-xs-12 col-sm-8" style="padding: 15% 40px 0">
                <div class="col-xs-12 col-sm-12">
                   <a class="product-title" href="{{ product.url | within: collection }}">{{ product.title | split: '|' | first }}</a>
                </div><br><br>
                <div class="col-xs-12 col-sm-12">
                   <a class="product-title" href="{{ product.url | within: collection }}">{{ product.title | split: '|' | last }}</a>
                </div>
                <br><br>
                <div class="row" style="padding: 5px">                 
                <div class="col-xs-12 col-sm-8">
                  <div class="col-xs-12 col-sm-12">
                  <div class="row" style="padding: 3px">
                     <select name="id[]" style="-webkit-appearance: none; border: 3px solid #000; border-radius: 0; text-transform: uppercase; color: #000; font-weight: 700; width: 100% ; font-size: 15px">
    		           {% for variant in product.variants %}
    		           {% if variant.available %}
        			   <option value="{{ variant.id }}" id="variant-{{ variant.id }}">   
      			       {{ variant.title | escape }}
        			   </option>
        		       {% else %}
        		       <option value="{{ variant.id }}" id="variant-{{ variant.id }}" disabled="disabled" class="disabled">   
      			       {{ variant.title | escape }} &mdash; SOLD OUT
        			   </option>
        		       {% endif %}
    			       {% endfor %}
    		         </select>
      		         <input type="number" id="Quantity" name="quantity" value="1" min="1" class="qty-remove-defaults quantity-selector" style="display: none">
                  </div>
                  </div>
                </div>
                </div>
                </div>
                </div>
        {% endif %}
      {% endfor %}
   
       <input type="submit" href="{{ product.url }}" class="btn" name="add" value="Buy Stack" style="float: right;"/>
 
       {% else %}
       <p>There are no products in this view.</p>
  {% endif %}

</form>