Forms - Add an order form to your store

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

Caution

This document has not been verified to work with sectioned themes. You can try to implement this on your theme, but keep in mind that it may not function.

---

So, you would like to list products that belong to a collection inside a table, one product per row with a quantity box. You want your customers to be able to add to the cart all products in that table that don't have their quantity box set to zero with one click on a single button.

You can add your order form to a regular page, such as /pages/order-form, or to a collection page, such as /collections/wholesale. To use a page, start at the "Add an order form to a regular page" section. If you'd rather use a collection page, then skip to the "Add an order form to a collection page" section.

Add an order form to a regular page

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. On the left side, under Templates, click Add a new template. Create a new template for 'page' called 'order-form':
   
   
   
   
4. Replace the content of your new page.order-form.liquid template with the content of this gist.
5. Choose which collection to use in your order form. Do you want all products in your shop to be listed? Create a collection with handle all as per these instructions. Once you have decided which collection to use, take note of its handle, and at the very top of your template, add this line of code:
   
   

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

   Replace your-collection-handle-here with your collection handle.
   
   Then save.
   
   
6. Create a new page under Pages.
7. After you created your page, scroll all the way down to the Template section, and select page.order-form from the drop-down list. Then save your page.
   
   
8. You are done. Go to your page on your storefront to test things out.

Add an order form to a collection page

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. On the left side, under Templates, click Add a new template. Create a new template for 'collection' called 'order-form':
   
   
   
   
4. Replace the content of your new collection.order-form.liquid template with the content of this gist.
5. Choose which collection to use in your order form. Do you want all products in your shop to be listed? Create a collection with handle all as per these instructions.
6. Once you have decided which collection to use, browse to that collection in your store's admin, then scroll all the way down to the Template section, and select collection.order-form from the drop-down list. Save your collection.
   
   
   
   
7. You are done. Go to your collection page on your storefront to test things out.

Demo shop

See our demo page here.

[Tom_Hooker]

Is it possible to have that order form but instead of sending that all to the cart page can you send it in a form to the store owner?

[icbd]

great question! I have a similar question but it's regarding ajax forms. I am in need of help trying to add a customized form on my wholesale page that resembles (the following) where the form lists the products suggested retail quantity and total - all the customer does is adjust quantities and the form auto-calculates the total. At the end of the form, fees are also calculated based on the selection of products and the services the buyer needs. when this form is submitted an email comes to me and I, in turn, send the customer an invoice. This form will also include contact details. How can I accomplish this on a full-width format page? I am familiar with Html but I believe this needs javascript.  Also, I can accomplish this look in excel including the icons to adjust quantity but need it on my Shopify page using debut theme.

Thanks in advance,

[Vince24]

Hi Tom,

Did you work out if it is possible to send the cart page to the store owner?

[PaulNewton]

For more advanced builds using ajax you can now use /cart/add.js for multiple items

/cart/add.js

The /cart/add.js endpoint (add to cart) of the AJAX API has been updated to support adding multiple items to the cart in a single request. This previously required a complex queuing system to send multiple requests. The previous payload format is still supported, but the "multiple items" payload format is now the recommended approach. Learn more about the Ajax API in the Help Center.

via  https://shopify.dev/changelog/new-article-updated_at-liquid-property-and-updated-behavior-for-cart

[StaceyH]

This is almost a perfect solution for my wholesale order form! If you could just solve one thng for me! Can I add a wholesale price to this form rather than the retail price? Please let me know how to do this!

Thank you

[milesdevland]

Hi,

We have used the order form but it seems to have a one way function when adding items to the the cart. Is there a way to modify this so that it does not overwrite what is currently in the cart if a user goes to this wholesale order form to add more items. Currently if you add something to cart then return to the order form to add more of something else it deletes the original items.

[PaulNewton]

@milesdevland Quick answer is you'd want to do a check in the product loop to see if a product is already in the cart and if so set that products line quantity to the existing cart quantity.

That way when the form is submitting the values just stay the same.

[SharonKeilthy]

Hi all, could anyone help me with a "paste this code into this file in your theme" kind of answer? Sorry, can't figure this one out, have the same 'order form overwrites cart contents every time submitted' problem.

Thanks!

[PaulNewton]

Untested, 

To make the order form reflect the quantities in the cart work the the following to get your solution:

After this line in the order form

{% if variant.available %}

Set a variable to hold a quantity, initialize it to 0 so it always reset each time the loop happens

{% assign variant_in_cart_quantity = 0 %}

then check to see if it's in the cart, if so set variant_in_cart_quantity value for with the input button

{% for line_item in cart.items %}{% if item.variant_id == variant.id %}{% assign variant_in_cart_quantity = line_item.quantity %}

Update the inputs to use variant_in_cart_quantity for the the value attribute the represents quantity when the form is submitted

<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="{{variant_in_cart_quantity }}" tabindex="1" />

[zar27]

Dear Community

I need help with this order form. I have been able to follow the tutorial and add it to my website. I would like to have a filter on top, to filter the products by collection instead of showing all products or a specific collection. Please give guidance as to how to add a collection filter on top of the page?

[MGBPromo]

This is very close to what I'm looking for.  Is it possible to create a form like this on each product page?  My products tend to have many variants and we are selling to business/group type customers, so they will be ordering many pieces of each item at a time.  I'd like a way for them to add to cart all the quantities/sizes (of shirts and such) at one time, instead of bouncing back and forth from the cart.  There are 2 apps that I have tried that offer this, but neither play nicely with other apps so it would be great to create this as a product template page without breaking other apps and such.

Any help or direction is appreciated!

[PaulNewton]

@MGBPromo It's very possible to use the methods in this customization this on product description pages(PDP's) for variants, instead of products in a collection.

You'd want to swap references to collections and it's properties out for products, then the same with references to products swapped with variants.

[IGT-devteam]

Utilizing this solution for a bulk order, but the Add to Cart button isn't actually adding any items to the cart. Any help?

https://ingoodtaste.com/pages/order-form

[MGBPromo]

Sorry, no solution here.  Im currently still looking, but for our industry (custom tshirts and SWAG stuff), I think Im going to use the Zakeke app for customization which also has a bulk add to cart feature.

Haven't tried it yet though.

Good luck!

[Tomelius]

I have entered the code as described, unfortunately, all what shows are the buttons. I am not able to display any collection (no matter what collection I enter).

The reason is likely because I have duplicated collections and products and created "wholesale templates" (page.wholesale, collection.wholesale) to show different menus and pricing to logged in re-sellers. So, the conditions are "if template contains wholesale" and "if customer is tagged with wholesale" - Show "wholesale main menu".

In this guide, one shall create collection.order-form and page.order-form, and given these two does not contain "wholesale", I am not able to get the order form to work. I was thinking that maybe I could create like page.wholesale-order-form and collection.wholesale-order-form in hope that all would show. But I do not know how to enter this code in the theme.liquid, to have both the "wholesale" and "order-form" conditions and get it to work. Or, could I enter the below code twice? One for wholesale and again for order-form?

{% if template contains 'wholesale' %}
{% if customer %}
{% if customer.tags contains 'wholesale' %}
{{ content_for_layout }}
{% else %}
{% include 'wholesale-note' %}
{% endif %}
{% else %}
{% include 'wholesale-note' %}
{% endif %}
{% else%}
{{ content_for_layout }}
{% endif %}

Can I

1) enter like {% if template contains 'wholesale' or template contains 'order-form' %}?

{% if template contains 'wholesale' %} {% if customer %} {% if customer.tags contains 'wholesale' %} {{ content_for_layout }} {% else %} {% include 'wholesale-note' %} {% endif %} {% else %} {% include 'wholesale-note' %} {% endif %} {% else%} {{ content_for_layout }} {% endif %}

and

{% if template contains 'order-form' %}
{% if customer %} {% if customer.tags contains 'wholesale' %} {{ content_for_layout }} {% else %} {% include 'wholesale-note' %} {% endif %} {% else %} {% include 'wholesale-note' %} {% endif %} {% else%} {{ content_for_layout }} {% endif %}

Any help would be highly appreciated. I would very much like to have this in place and behind me, soonest possible. I am setting this up for a client, and have no clue what to do, so starting to get stressed over this.

[Hendy1234]

I did as above but when I go on and check the page when it was live all it says is 

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

I cannot figure out how to resolve it. Can anyone help?

[Connor11]

I'm having this exact issue too. Changed the line text exactly as described

{% assign collection = collections.order-form %}

[Anthony_David_]

@Connor11 Add your collection name instead of writing "order-form"

Eg. 

In my case i will write related instead of order-form

{% assign collection = collections.related %}

Thanks

[Connor11]

I've done exactly this. I was worried that the issue could of been 2 words so i used "related" as a collection name but the issue still persists

.

[Anthony_David_]

Share complete code that you built

[Connor11]

https://pastebin.com/wByrQhX8

[sunnyghansham]

Is it possible for u to customise this form according to my needs 
u can contact me on tnvcollection1@gmail.com

[MereNatur]

Is it possible to add inventory quantity available from a specific location to this form?  If so how would we do that?

[sillycube]

Hi @MereNatur 

For product variants, you can only show the aggregate of inventory across all locations. For a specific location, you probably need to use InventoryLevel API.

For an aggregate inventory, you can use variant.inventory_quantity in your liquid 

[Sinister_Auto]

Is it possible to make a form like this for custom orders/quotes?

What I mean by this is so the customer can fill out their details (name, email address, address, phone number, comments box. Much like the contact page)  but with a added form (like a spreadsheet) where they can then type in the manufacturer, the SKU numbers (as many as they want) and quantities of each item they are wanting, then they can click a submit button that emails it off to the vendor, so that the vendor can provide them with a quote?

I'm only a small shop, and whilst I have quite a range being put up on my website, some of the brands I carry have over 12,000 line items, and that's just one brand, some of which I'm not ever going to carry on hand or on my web store.

However having the option there for the customer to submit a request form for items not listed on my web store would be handy, It also would help me see trends and what items should be added to my web store from the various manufactures I deal with.