Insert an order form to a regular page

Want to add an order form to a regular page in your Shopify store but not sure how? Many store owners struggle with this, missing out on potential sales from custom orders or special requests. This guide will show you exactly how to insert an order form into a regular Shopify page. We’ll walk you through the process step-by-step, making it easy even if you’re not tech-savvy.

How to insert an order form to a regular page

• Step 1: Choose the theme
• Step 2: Edit code
• Step 3: Add new template
• Step 4: Open page.order-form.liquid
• Step 5: Choose collection
• Step 6: Add new page
• Step 7: Save

With order form on regular page, you are able to list all products that available from your collection in a table, or in other words, a form. It allows one product per row along with quantity box check. Within one click, you can let your customers add to the cart all product in that form that do not have quantity box set to zero.

Following is the tutorial for you to create an order form in a regular page on desktop

Step 1: Choose the theme

Open your Shopify admin, go to Online Store > Themes.

Step 2: Edit code

Click Actions > Edit code at the theme that need to be edited.

Step 3: Add new template

Click Add a new template under template in the left side.

When the Add a new template box open, then in Create a new template for drop-down menu, chose ‘page’, in called box, insert the name order-form.

Step 4: Open page.order-form.liquid

Open your new page.order-form.liquid template and replace the code below.

{% 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 %}
              {% unless variant.requires_selling_plan %}
              <tr class="{% cycle 'pure-table-odd', '' %}">
                <td>
                  <a href="/%7B%7B%20variant.url%20%7C%20collection%20%7D%7D">
                    <img src="{{ variant.image | default: product.featured_image | img_url: 'small' }}" alt="{{ variant.title | escape }}" />
                  </a>
                </td>
                <td>
                  <a href="/%7B%7B%20variant.url%20%7C%20collection%20%7D%7D">
                   {{ 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>
              {% endunless %}
            {% 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 %}

Step 5: Choose collection

Based on your needs, choose the collection you would like to appear in your order form. You can also choose all of your collection by creating a collection with the handle all that we mentioned in other tutorial.

When you done with choosing which collection to be shown, take note of its handle and add this following code at the beginning of your template content:

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

After that, delete the your-collection-handle-here bit and insert with your collection handle. Then save.

Step 6: Add new page

Add new page in your Shopify admin by open Online Store > Pages

Step 7: Save

After done adding your page, at the Template section, choose “page.order-form” in the drop-down. Then save your page.

After finishing this, you might need to go to your business page to check out if this order form works or not.

Conclusion

Adding an order form to your Shopify regular page can significantly streamline your ordering process and enhance customer experience. By following these steps, you’ve learned how to insert this powerful tool into your store. Take action now: implement this order form on your chosen page and start reaping the benefits of easier, more efficient ordering. Remember, a well-designed order form can boost sales and customer satisfaction, giving your Shopify store a competitive edge in the e-commerce world.