Forms - Add an order form to your store

TyW
Community Manager
Community Manager
404 39 1097

 


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.

 

orderform01.jpg


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':

    orderform02.jpg

  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.

    orderform03.jpg
  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':

    orderform04.jpg

  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.

    orderform05.jpg

  7. You are done. Go to your collection page on your storefront to test things out.

 

Demo shop

 

See our demo page here.

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 25 (25)
Tom_Hooker
Shopify Expert
77 4 10

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?

On The Road Shopify Agency
Helping Shopify stores to become greater with purpose behind design.
info@ontheroaduk.co.uk
http://ontheroaduk.co.uk/
icbd
Tourist
6 0 0

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,

PaulNewton
Shopify Partner
4184 302 887

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.

 

 
 
Save time seeking solutions - Learn To Ask Questions The Smart Way

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
StaceyH
Tourist
3 0 0

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
New Member
1 0 0

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
Shopify Partner
4184 302 887

@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.

Save time seeking solutions - Learn To Ask Questions The Smart Way

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
SharonKeilthy
Tourist
6 0 12

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!

MGBPromo
New Member
2 0 0

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
Shopify Partner
4184 302 887

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" />
Save time seeking solutions - Learn To Ask Questions The Smart Way

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
PaulNewton
Shopify Partner
4184 302 887

@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.

 

 

 

 

Save time seeking solutions - Learn To Ask Questions The Smart Way

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
IGT-devteam
Tourist
4 0 1

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
New Member
2 0 0

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!

Vince24
New Member
1 0 0

Hi Tom,

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

 

Tomelius
New Member
9 0 0

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).

 

orderform.PNG

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
New Member
1 0 0

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?

sunnyghansham
New Member
1 0 0

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

MereNatur
New Member
2 0 1

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

sillycube
Shopify Partner
671 16 96

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 

BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview
Connor11
Excursionist
25 0 6

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

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