Shopify Tutorial: How to Create an Order Form
Shopify Tutorial – learn how to create a table that can be used to order multiple products at once.
In this tutorial we’re going to be creating an order form in your shop that customers can use to add several items to the cart at once. You can see a demo of this here.
Please note that you cannot select any options/variants through the order form. The order form in this tutorial is set to always add the first variant of a product.
1. Create a new linklist
The first thing you want to do is create a linklist that holds the products that you want to sell through the order form. Go to the “Navigation” page of your admin, and create a new linklist called “Order Form”. Next, add links to the products that you want to have listed on the order form.
2. Create an alternate “page” template
In your Template Editor, click “add a new template” under the Templates section. Select “page”, and call it “order-form”.
Copy the code from this gist and paste it in page.order-form.liquid. Hit save. It’s pretty bare-bones, and there’s a bit of inline CSS so you’ll have to pretty it up a bit.
3. Create a new page for your order form
Go to Blogs & Pages, and create a new Page. You can title it whatever you wish. The important part here is to tell it to use the freshly-created page.order-form.liquid template. You do this by selecting it under the “Templates” dropdown, shown below:
4. Download and add the Javascript
In your Template Editor, create a new snippet called ‘order-form-script’. Copy this script, paste it in this new snippet, and hit Save. This script queues up every product from the Order Table link list, and adds them to the cart one-by-one with the power of AJAX.
Finally, in “theme.liquid”, please place the code below right before the closing </body> tag.
{% include 'order-form-script' %}
Conclusion
That’s all! Have fun :)
UPDATE 05/01/2013 Fixed some stuff in the script. Thanks Caro for the tips, as usual :)
43 Comments
Hi Tetchi,
The link provided for the Order Form template is the same link for the javascript.
I believe the correct code is this.
https://gist.github.com/2932738
Did a quick google search on GIST for order form liquid and found it.
@Edwin Fixed – thanks for catching that and apologies for the confusion!
Hi there,
I’m using this script which is great and almost exactly what I’m after, although I’d like to display all products rather than using a link list.
Could you please provide a quote for a mofified version of this code to work with all products?
Thanks, Ben
Hey Ben,
No problem at all, here’s an altered version of the code where it lists ALL products in a shop: https://raw.github.com/gist/4151207/13c9360f714ea96ce0d8a846d78e03db4e1749ee/gistfile1.txt. You can paste that into page.order-form.liquid. :)
Make sure you create a Smart Collection called “All” that contains all products in your shop first (you can set its condition to ‘price is greater than zero’).
Hope that helps!
Tetchi
Hello,
Thank you for posting this information, it is very helpful.
I am having one issue.
The last step of placing {% include ‘order-form-script’ %} right above the closing .
When I do this, it puts a small table with an add button all the way at the top of the page in the header, near the log in, cart and check out buttons.
Any suggestions as to why this is happening?
Thanks,
Eric
Tetchi Thanks for your help,
i have followed your scripts exactly, my order form table will only add the first three product to cart,could you provide advice
regards
Hi Nick,
Replace the following in order-form-script:
var length = {{ linklist.size }};
With:
var length = {{ linklist.links.size }};
Hey!
I’m using the alternate version to display ALL products. Would the script file stay the same??
It’s not working on my site.
Thanks!
Andrea
Sorry about that guys! It’s all fixed now, thanks to Caro!
This is awesome – however, for some reason the input for quantity is grayed out and I am unable to click in it and set the value. If I set “Value=”1″” in the code so it shows up there by default, then it’s still grayed out. I can’t click it to change it, but if I hit add it adds 1 of each item to the cart.
Any ideas what I do not have set correctly?
Thanks, and great tutorial!!
To be more specific, this is the chunk of code I am having the issue with (I think). Originally this was showing up with a 0 in the quantity fields, and they were grayed out so I could not edit them. I added value=”1″ just to see if the script worked. It does and it adds one of everything to the cart, but why would the input fields be grayed out? Thanks.
**************************************************************
Sorry code was removed. Here is a screenshot:
http://www.lmktechnologies.com/OLDSITE/tetchi-screenshot.jpg
@AJ are the products in your link list sold out? Do they have any inventory left?
It seems like that could have something to do with this issue, but we don’t actually set the inventory amount. We manufacture things here so we haven’t messed with that at all.
So under products in the chart I just see little infinite symbols.
I have a similar issue ( great tut btw ): i cannot add products to the cart. I have no inventory tracking, i have my order form in a pop up modal. This pop up modal is available from all pages.
If you view: http://herzog-group7717.myshopify.com/ – scroll to the bottom left of the page and click configuration, then head to slide 4. My input boxes are all disabled ( i have stock and 1 default variant ), i just cant get this to work.
Here is one more quick question – If I wanted to have a button at the top and bottom of my table to add to cart, I need a unique ID for each button or 1 of them wont work. My first button is called id=”submit-table”, my second one is called id=”submit-button2″. How can I add this second ID to the script without copying the entire function and changing the following line to the new name, as such:
…..$(“#submit-table2”).click(function(e) {…..
Thanks.
Hi Tetchi,
This is awesome information, thanks. I am still learning Shopify templates and Liquid. When I went to create this page.order-form.liquid, it is not taking (no little HTM sign like other templates). It shows up as a new template but does not allow me to select this template in the Page section. I cannot figure out why.
Please help :'(
Hey guys, I’m going to be away on vacation for the next two weeks, I’ll try and take a look as soon as I’m back!
Here is an interesting one. I have a total of 3 linklists on 3 seperate pages that I am using this with. Each page template is the same, except for the linklist name that is called. Strangely though – they all WORK without me changing the following line in the order-form-script.liquid file:
…
{% assign linklist = linklists[‘NAME-TO-CHANGE’] %}
…
Why does the script work, even though it only references the first of 3 linklists?
Thanks, hope you had a great trip.
Excuse me – I was incorrect. The script did NOT work, it only added 11 of the 13 otems in one kit, because it was getting the var length from the number of items on the previous linklist. When I make the following change, I can use 1 script for every package we offer:
//{% assign linklist = linklists[‘kit-vac-a-tee’] %}
//var length = {{ linklist.links.size }};
var length = 250;
Thoughts?
@AJ still in Japan at the moment, I’ll take a look when I’m back home.
Hey AJ, I found a small typo in the page.order-form.liquid – try with the new code and let me know how that goes: https://gist.github.com/Tetsuro/2932738/raw/7c0c5aea3cd59b35194f61e2c6c0b1c7f852f9fb/page.order-form.liquid.
Hi,
Hope you enjoyed your holiday, i have used the updated code for the page.order-form.liquid and carolines fix to the order-form-script, unfortunate to no success, the site will only add some of the products list to the cart, i have tryed to alter the var length statements, but nothing seems to work.
Your blog is awesome and so are you.
@Nick I’m just on the road now for a conference, I’ll take a look when I’m back! What is your shop URL?
Awesome! It seems like that did it, and I can still set the initial value to 1 without causing any errors. Thank you very much for your help!!!
What was the typo you fixed??
Again, my sincerest thanks. :)
Thanks heaps the url is http://www.catcaps.myshopify.com, it hasn’t been launched or finished yet so i put the link for order form under shipping info tab, i think the store front is passworded in which case it is just ‘password’ thanks for all your help.
@AJ No worries! Glad I could help. It was actually more of a syntax error, I wasn’t calling some variants properly
@Nick I just tried out your form, and it appears to be working fine! I added 1 of every item in your form, and it did just that: http://take.ms/zAoSx.
Works perfect – thank you very much for this.
TETCHI,
Thanks, this worked great on my shopify shop… I need to do the same thing in Bigcommerce, for my father’s shop PJSIGNS.com
Could you pull it off?
Thanks,
Jody
Sorry Jody, I’ve never used BigCommerce before and I don’t plan to, so I won’t be able to help you there!
Hi Tetchi,
First up – I would like to thank you very much for this tutorial – really helped out.
Im currently using the above method to make a online paint shop. I would like to make the Quantity column into drop down menus – is this possible??
Also it seems to be taking a considerable amount of time after clicking ‘add to cart’ to go to shopping cart… I got 52 products (paint colours) that I am listing. Is there any way of making this process quicker (it is taking on average 20-30sec).
much appreciated
Hi Tetchi,
Sorted out the problems mentioned above.
But now looking into the following issues:
1. I need a temp total quantity at the bottom of the form. Showing how many items have been selected. tried using regular javascript but seems like I need some liquid to do this…
cheers
Hi tetchi.
In my store I have used your script for four linked lists,
I have repeated all the steps four time for all the four lists (like created four “page.liquid” file and created four “order-form-script” snippets)…
Its working fine now but the problem is it is taking double the quantity to cart page after I click Add button, for example if i put 3 in quantity box it is showing 6 in cart page after I click add button..
Here is the link to my store:
http://www.manifestdestiny.in/pages/stack-em
Thanks for the great tutorial! I am using the “05/01/2013 updated version” of the scripts. I’m also seeing that each quantity is doubled when items are added to the cart. I would like to investigate this and solve it. Any suggestions? Thanks again.
I have exactly the same problem as mentioned by Mani on Oct 17 2013. I have created 3 sets of order forms by repeating the steps. After the 1st set was created and tested, everything was working nice as expected. But after I had created 2 more sets and have included 3 scripts in the theme.liquid, the quanities of products are showing as 3x times in the cart while the quantity is being selected as either 1 or 2 while adding to cart.
The following are in my theme.liquid
{% include ‘order-form-script’ %}
{% include ‘order-form-script-medium’ %}
{% include ‘order-form-script-large’ %}
If I test by removing any 2 scripts here and keep 1, every thing works fine. So I suspect the quantity variable is adding 3x times the quantity mentioned in the form as all the 3 scripts are being executed one after another. But I am not well versed with web programing. Could I get some help to identify the variable name which is responsible for carrying the qty to the cart. I will use separate variables so that it doesn’t carry its value from one script to another.
Hey Tetchi,
I’ve used this tutorial for the order form on http://3duckday.com/pages/order-form
It works ok but it automatically adds 2 of the item upon initially clicking ‘+’ and then then only way to revert to ‘0’ is to select and delete the field entry. Using the ‘-‘ only returns the total to ‘1’. Any ideas what might be happening here?
Thanks,
Matt
Hello! This is a great form, and just what I am after – thanks!
Is there anyway I can change the quantity input field into a dropdown select box? What I’d ideally like is to be able to select quantities of 20,30,40,50,60,70,80,90,100…. and so on?
Thanks in advance!
Hi Tetchi,
Thanks for the great tutorial of the online form. I have added this to my website and it works perfectly. I would like to do some further customisation. Can you please tell me how I can:
– Change the quantity selection bar to a dropdown menu with multiples of 5;
– Change the layout of the table?
Many thanks in advance.
Regards, Linet
Hello,
I’m having the same issues that:
mani on October 17th, 2013, David on November 21st, 2014, and myfamilycart on February 24th, 2015
have with creating multiple sets of the order form and quantities/pricing are doubled in the cart. Was this resolved and if so any help would be much appreciated!
Many thanks!
hi there, is there a chance to get the code for the version that shows ALL products? the link is broken unfortunately.
thx
ben
Hey Techti,
This solution worked great, thank you so much for posting this. I am trying to add a temporary total at the bottom of the form, do you have any insight on how to do this? Im using this as a wholesale form so cutomers will be charged via invoice, therefore the order total is 0, id like to display the order total at the bottom of the form, so I just need to write a function that does orderPrice*quantity for each product and adds them together, just not sure how to implement this.
Thanks!
Hey Tetchi,
Many Thanks for this code and tutorial. This was the exact thing I was looking for and it worked like a charm.(Surprisingly even after 8 years of the solution- some custom changes made by myself but this code pointed me to right direction) Very helpful solutions. After this solution I read almost all of the blog posts and would really love to see more tutorials and code on shopify to help the community.
Big cheers and congratulations on being a father !
Thanks,
Shreyank
Thank you Shreyank and I’m glad it helped :)