Forms - Add an order form to your store

Highlighted
Community Manager
Community Manager
487 28 701

 


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

1 Like
Highlighted
Shopify Expert
74 4 9

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/
1 Like
Highlighted
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,

0 Likes
Highlighted
Shopify Partner
2294 116 352

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.

 

 
 
Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
New Member
2 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

0 Likes
Highlighted
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.

0 Likes
Highlighted
Shopify Partner
2294 116 352

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

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
Tourist
6 0 1

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!

0 Likes
Highlighted
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!

0 Likes
Highlighted
Shopify Partner
2294 116 352

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" />
Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes