Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Order form to use in a page or collection template.
{% comment %}
Source: https://gist.github.com/carolineschnapp/9122054
If you are not on a collection page, do define which collection to use in the order form.
Use the following assign statement, replace 'your-collection-handle-here' with your collection handle.
{% assign collection = collections.your-collection-handle-here %}
Use the assign statement outside of this comment block at the top of your template.
{% endcomment %}
{% paginate collection.products by 100 %}
<form action="/cart" method="post">
{% if collection.products_count > 0 %}
<div>
<h1>{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
<input type="submit" value="Add to the cart" />
</div>
{% else %}
<h1>{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
{% endif %}
{% if template contains 'page' and page.content.size > 0 %}
<div class="rte">
{{ page.content }}
</div>
{% elsif collection.description.size > 0 %}
<div class="rte">
{{ collection.description }}
</div>
{% endif %}
{% if collection.products_count > 0 %}
<table>
<tbody>
{% for product in collection.products %}
{% if product.available %}
{% for variant in product.variants %}
{% if variant.available %}
<tr class="{% cycle 'pure-table-odd', '' %}">
<td>
<a href="{{ variant.url | collection }}">
<img src="{{ variant.image | default: product.featured_image | img_url: 'small' }}" alt="{{ variant.title | escape }}" />
</a>
</td>
<td>
<a href="{{ variant.url | collection }}">
{{ product.title }}{% unless variant.title contains 'Default' %} - {{ variant.title }}{% endunless %}{% unless variant.sku == blank %} - {{ variant.sku }}{% endunless %}
</a>
</td>
<td>
{{ variant.price | money }}
</td>
<td style="text-align:right;">
<input name="updates[{{ variant.id }}]" onfocus="this.select()" class="quantity field" min="0" {% unless variant.inventory_management == blank or variant.inventory_policy == 'continue' %} max="{{ variant.inventory_quantity }}" {% endunless %} type="text" value="0" tabindex="1" />
</td>
</tr>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</tbody>
</table>
<div>
<input type="submit" value="Add to the cart" />
</div>
{% else %}
<p>There are no products in this view.</p>
{% endif %}
</form>
{% endpaginate %}
{% if collection.products_count > 0 %}
<script>
jQuery(function($) {
$('table .quantity:first').focus();
$('[max]').change(function() {
var max = parseInt($(this).attr('max'), 10);
var value = parseInt($(this).val(), 10) || 0;
if (value > max) {
alert('We only have ' + max + ' of this item in stock');
$(this).val(max);
}
});
});
</script>
{% endif %}
@dglage

This comment has been minimized.

Copy link

commented Sep 17, 2014

"Add to cart" buttons does nothing when clicked?

@carolineschnapp

This comment has been minimized.

Copy link
Owner Author

commented Nov 13, 2014

@dglage Look for a JavaScript error in your JavaScript console.

@paperanniversary

This comment has been minimized.

Copy link

commented Dec 9, 2014

Thanks Caroline for another amazing tutorial. The orderform is showing all of my product variants- I only want it to show the first (default). How can I change this? Thanks, from a fellow Montrealer :)

@ghost

This comment has been minimized.

Copy link

commented Dec 17, 2014

Hey Caroline,

I am very appreciate of all of your work.

Quick question:

I was was wondering how I can implement one of the other styles? I'm not sure where to move one of those lines to see what they look like. I want to make the table about 75% of the page width with equal margins on both sides.

Any help would be greatly appreciated.

Thank you,
Corben

@ghost

This comment has been minimized.

Copy link

commented Dec 17, 2014

Also, I was wondering if it would be possible add this table to the bottom of our regular collection template and have the products on the top of the page and then an order form at the bottom. Is this possible?

Thanks,
Corben

@dzivot

This comment has been minimized.

Copy link

commented Jan 12, 2015

Hi Caroline! Like paperanniversary, I don't want to show variants (I'm using Bold Apps Quantity Breaks). When I take the variants out of the code, the add to cart script breaks.

@crypticcarousel

This comment has been minimized.

Copy link

commented Apr 13, 2015

This works great! However, if I need to add additional info outside of the form. It automatically appears above the form and the page link awkwardly opens in the middle of the page. Is there an easy fix I am missing?

@mennyg

This comment has been minimized.

Copy link

commented Jun 3, 2015

Hi Caroline... I just installed this to my store and it works great, however, I only want it to show the customer's recently ordered items. Is that possible? to somehow get the information out of their account info and make a temporary collection or whatever?

@tensworth

This comment has been minimized.

Copy link

commented Jun 15, 2015

For Paperanniversary and dzivot,

Edit line 36 and add limit:1

It should look like this:

{% for variant in product.variants limit:1 %}

This will only display the main variant.

@mac3545

This comment has been minimized.

Copy link

commented Jun 17, 2015

Is there a way to have my variants listed in a drop down menu in a column on the default product instead of listed out as individual products?

@nuriamestres

This comment has been minimized.

Copy link

commented Sep 18, 2015

It is possible to change "add to chart" for "send email"?
Thanks!!

@kumvandu

This comment has been minimized.

Copy link

commented Oct 26, 2015

Hi,
If I want to limit my quantity to one and give a checkbox instead of text field to enter quantity, how can I do that?

@cchileshe

This comment has been minimized.

Copy link

commented Dec 4, 2015

I'm a noob at javascript and I'm having the same problem as @dglage, the error says shopify is used before it is defined, what do I need to add? Add to cart button is not working. Everything else displays perfectly! Thank you so much for this code!

@ghefner

This comment has been minimized.

Copy link

commented Dec 6, 2015

Thanks Caroline, I am using wholesaler app for my wholesale customers and the classic theme. Is there a way to hide my wholesale pricing for non-wholesale customers and vice versa when my wholesalers are logged in? Currently, all the variants show up regardless who is logged in.
Thanks again

@Cam

This comment has been minimized.

Copy link

commented Dec 29, 2015

@carolineschnapp is "{% paginate collection.products by 100 %}" really ok in this circumstance? I thought we had to respect the 50 limit globally. Is it ok in this case from your point of view?

@hjmoore420

This comment has been minimized.

Copy link

commented Jan 15, 2016

so one issue i had wit this, and its a style thing, not a code thing, was:

we are selling shirts on our sites, so the collection will loop through and create a huge table of products but only the main image will show for the collection. We offer other colors but only the orange shirt shows. So it can be confusing with and orange shirt showing and a black shirt as the description.

So i added an if checking for the variant (variant2) for this page:

% if variant.option2 == 'LightBlue' %}

{{ product.featured_image.alt | escape }}

i checked the images for each shirt and swapped them out in the loop.

I am not sure how to do it other than hard coding the if, if anyone knows how to do that I would appreciate...if you want to work this into your code...please do.

@zinyosrim

This comment has been minimized.

Copy link

commented Mar 10, 2016

Hi,
I want to have an order form for every collection.
I created an order form button on top of the collection template page which links to pages/order-form.
But this simply won't show the products. What am I doing wrong?

@PaulSavignano

This comment has been minimized.

Copy link

commented Mar 26, 2016

Hi Caroline,
Would it be possible to loop through specific collections and return your form for each? I would only like 4 of my collections displayed. I would like to create an array of these collections and assign an index to each so I may control the loop order.

@sowjipriya

This comment has been minimized.

Copy link

commented May 29, 2016

Hi,
Liquid error: Array 'collection.products' is not paginateable.?

how to resolve this?

@hellomslewis

This comment has been minimized.

Copy link

commented Jun 7, 2016

Thank you for this, looks great. How would I somehow include the current inventory numbers? We are a B2B wholesaler doing small batch product runs. Any help appreciated.

@cloudflying

This comment has been minimized.

Copy link

commented Jul 9, 2016

@hellomslewis use
{{ variant.inventory_quantity }}
inside the section and it will display current inventory levels for that variant

@ohmnominal

This comment has been minimized.

Copy link

commented Jul 31, 2016

It looks great and is exactly what I need save for a couple of... vittles, but when I go to add items to the cart, even selecting just one, clicking "add to cart" leads to "Cart Error: Your cart can't contain more than 500 items." Do I just have too many variants or what can I do? Any help would be massively appreciated.

@tndog

This comment has been minimized.

Copy link

commented Aug 17, 2016

Hi Caroline,
thanks for all your tutorials. I have this working nicely for standard products but have run into a problem for dropdowns for multiple variants which refuse to submit.

<form action="/cart" method="post" class="buy" id="collection_two">
...
  <input name="updates[{{ variant.id }}]" onfocus="this.select()" class="quantity field" min="0" {% unless variant.inventory_management == blank or variant.inventory_policy == 'continue' %} max="{{ variant.inventory_quantity }}" {% endunless %} type="text" style="text-align:center;" value="1" tabindex="1" />
...
<input type="submit" value="Buy Lite Pack" id="collection_two_btn" />
...
<div class="select">
        <label>Housing & Length</label>
        <select form="collection_two">
              <option selected="selected" name="updates[5443349059]" value="1">Dive / 20ft</option>
              <option  name="updates[10155469443]" value="1">Dive / 100ft</option>
              <option  name="updates[10155571523]" value="1">Dive / 125ft</option>
         </select>
    </div> 

The issue is I can't get the select statement data to post as part of the form. Other products not a problem.

I am using a function as follows to prevent the page from going to the cart page and also to add the text "Added!" to the button to give the customer comfort that something has happened when they click.

$('form[id=collection_two]').submit(function(e){
    var form1 = $( this );  
    console.log( "Collection Two added" );
    console.log(form1.serialize());
    $.post($(this).attr('action'), $(this).serialize(), function(JSONproduct) {

      var el = document.getElementById("collection_two_btn");
      el.value = "Added!";


      }, 'json');                             
 e.preventDefault();
 });         

Any assistance would be greatly appreciated.
Thanks again for your tutorials and samples.
Dean

@artlaw1000

This comment has been minimized.

Copy link

commented Aug 30, 2016

I am using the minimal theme. Is there a way I can get the list view as in your Demo rather than the minimal theme tiled view?

@PonytailsandFairytales

This comment has been minimized.

Copy link

commented Sep 6, 2016

Thank you so much for this. I am trying to add order forms to a few different pages, using collections, and I thought that it made sense to add "page.order-form-two" and then copy-paste your above code, and name the second collection to draw from in here: {% assign collection = collections.your-collection-handle-here %} - however it's not working. I am new to shop building, and new to code (and surprised that I managed to implement what you've explained above!). I am using minimal theme. Can anyone point me in the right direction, please?! :)

@nwlemmer

This comment has been minimized.

Copy link

commented Sep 12, 2016

The cart resets every time the form is submitted for me. If I have a customer that forgot to add a product to their cart from a certain collection, is there a way to not reset the cart when the form is submitted?

@ElisaME

This comment has been minimized.

Copy link

commented Sep 22, 2016

Hi , I really appreciate all your work. Quick question, can you add a search form in order to select the products easily, in my case we have like 180 products and it would be better to look for the product by name. Thanks!

@JSCadavid

This comment has been minimized.

Copy link

commented Nov 18, 2016

Thanks for this Caroline, works great!

Quick question, how can I change how the products are sorted? I would like to display them in alphabetical order

@Sayukat

This comment has been minimized.

Copy link

commented Nov 21, 2016

Hi Caroline,

I have the same issue as @nwlemmer, When adding to cart from two different collection it works but when adding to cart from same collection it reset the cart.

Do you have any idea what could cause this issue?

Kind regards,

@tavisy

This comment has been minimized.

Copy link

commented Dec 20, 2016

Form works great - but is there a way to set a minimum quantity total for the items added? I need to have a minimum of 6 total items (can be 1 of each line-item, or 6 of one line-item) before they can add to the cart (preferably with a message that will display "you need a minimum of 6 total items before you can add to cart).

any help appreciated!!
thanks

@hansrc

This comment has been minimized.

Copy link

commented Jan 26, 2017

How can this be altered to add a dropdown menu to select the desired variant rather than listing each variant individually? Thanks for posting this code!

@claudiahoward

This comment has been minimized.

Copy link

commented Jan 26, 2017

I'd love to see a version with a dropdown menu to select variants (rather than listing variants individually), too. Thanks!

@Bandiwear

This comment has been minimized.

Copy link

commented Feb 17, 2017

Has a resolution been found the the problem @mwlemmer and @Sayukat were having in 2016 where cart resets every time form is submitted? I am having the same trouble. Customer adds one piece from a collection, goes back later if they want another piece from the collection, anything they add on the second round supercedes what was in the car previously. Would love some help with this. Used the code exactly as provided.

@davelowensohn

This comment has been minimized.

Copy link

commented May 10, 2017

@nwlemmer @Sayukat @Bandiwear - probably too late to be helpful, but check out my fork of this gist, it uses some simple AJAX + jQuery to populate the inputs with existing cart quantities & change the button from "Add..." to "Update..." when that's the case.

@chelcwill

This comment has been minimized.

Copy link

commented Aug 24, 2017

Hi Caroline, this order form is exactly what I needed! I have managed to add another column so I have original price and sale price but I need to make my sale price red, any help with this would be great! Thanks

@morenoluis-86

This comment has been minimized.

Copy link

commented Jan 18, 2018

Hi caroline, How can I apply a discount to this order form??? Any help with this would be great! Thanks

@13014932

This comment has been minimized.

Copy link

commented Jul 10, 2018

Hi, caroline, can you help me to, how i display some products below a product. After that i want add all to cart button. to add all to cart.

@hasbrowow

This comment has been minimized.

Copy link

commented Sep 17, 2018

It looks great and is exactly what I need save for a couple of... vittles, but when I go to add items to the cart, even selecting just one, clicking "add to cart" leads to "Cart Error: Your cart can't contain more than 500 items." Do I just have too many variants or what can I do? Any help would be massively appreciated.

Did you ever get this fixed? Has anyone else run into this issue?

@ulysseslanugon

This comment has been minimized.

Copy link

commented Oct 30, 2018

Hello Caroline, thank you for this great tutorial. I wonder what this name="updates[{{ variant.id }}]" attribute do? I want to make it a radio type input because I have two group of products and I only want to select one of each product, like a bundle.

Thanks

@freshynek

This comment has been minimized.

Copy link

commented Dec 4, 2018

Liquid error: Array 'collection.products' is not paginateable.

@schulerswanie

This comment has been minimized.

Copy link

commented Jan 7, 2019

When I click add to cart items are not adding to cart I get a blank cart. No Console errors on the order form page

@treii28

This comment has been minimized.

Copy link

commented May 8, 2019

Liquid error: Array 'collection.products' is not paginateable.

I see the same error posted at least twice with no apparent follow-ups. Is this tutorial orphaned?

@rmanke

This comment has been minimized.

Copy link

commented Aug 14, 2019

Liquid error: Array 'collection.products' is not paginateable.

I see the same error posted at least twice with no apparent follow-ups. Is this tutorial orphaned?

If you are using this outside of a collection page, you have to move this statement out of the comments to the top of the code, and assign a collection to it for this code to work.

{% assign collection = collections.your-collection-handle-here %}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.