How to add an order form to your Shopify store

Do you want to create an order form on your Shopify store? You will list products that belong to a collection inside a table, one product per row with a quantity box. Your customers can 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.

DEMO

Adding an order form to your website lets you collect orders and helps to increase your sales.

In this article, we’ll show you how to create a simple order form in Shopify.

You can add your order form to a regular page, such as /pages/order-form, or to a collection page, such as /collections/wholesale.

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 bellow content
   
   {% 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 %}

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

   {% 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 %}

5. Choose which collection to use in your order form. 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 %}

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

   Replace the your-collection-handle-here bit 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” in the drop-down. Then save your page.
   

   

8. You are done. Go to your page on your store’s front 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 bellow content
   
   {% 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 %}

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

   {% 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 %}

5. Choose which collection to use in your order form.
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” in the drop-down. Save your collection.
   
   
7. You are done. Go to your collection page on your store’s front to test things out.

DEMO

Related Posts via Categories

• Top 4+ “AI Size Recommender” Apps For Shopify
• The Best Shopify Apps for New Order Notifications on Twitch
• How To Check The Total Current Fees of Shopify Apps on Your Online Store
• The Best Shopify Apps For Glasses Virtual Try-On
• The Best Shopify Apps For Converting Prices To Cryptocurrency
• Top Shopify Apps for Seamless Sales Integration Across Multiple Websites
• Top 14+ Best Shopify Video Stories Apps
• Top 10+ “Try Before You Buy” Shopify Apps
• 10+ Necessary Shopify Apps For Your Online Jewelry Stores
• How To Create an On-Sale Automated Collection in Shopify