In this article you will know how you can make a order form to use in a page, in this order form all of collection of your store will be shown in one page user can directly select the products and their quantities and then add all selected products in cart.
Follow these Steps to to make an Order form to use in a page or collection template:
- From your Shopify Admin Navigate to Online store > Theme > Actions >Edit Code .
- In the online Shopify code editor go to Templates and click on Add new template, From the dropdown list select template type to collection and name this template to “order-form” and click Create template button.
- New template file will be named “collection.order-form.liquid“. Delete all content from the file and paste this code to the file.
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 84 85 86 87 88 89 90 91 |
{% comment %} Source: https://gist.github.com/carolineschnapp/9122054 If you are not on a collection page, do define which collection to use in the order form. Use the following assign statement, replace 'your-collection-handle-here' with your collection handle. {% assign collection = collections.your-collection-handle-here %} Use the assign statement outside of this comment block at the top of your template. {% endcomment %} {% 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 %} |
- Now from your Shopify Admin Navigate to Products > Collections and click Create Collection button.
- Enter any title of the collection and select collection template to “collection.order-form“.
- Save it. and test the results.
Preview here