Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save minionmade/fb025e6b6c7cb72d35883adfa4f23bff to your computer and use it in GitHub Desktop.
Save minionmade/fb025e6b6c7cb72d35883adfa4f23bff to your computer and use it in GitHub Desktop.
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! Example: https://getapi.com/collections/hustle-hard-stack#
<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>
@mzdebo
Copy link

mzdebo commented Nov 26, 2017

How do I still add the pre-order function?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment