How to collect additional data Shopify Checkout

In this article, we’re going to show you how to collect additional data for your Shopify orders created from the online store.

Orders have the ability to store data under custom attributes or metaobjects.

We’re going to focus on custom attributes as it is the easiest solution currently available to all merchants. If you’re currently signed up on Shopify Plus, we recommend you look into Metaobjects, Metafields, and Checkout Extensibility.

If you’re on a regular Shopify plan and you need to collect more details from your buyers at checkout, we’re going to show you how.

First, we need to outline that Shopify’s checkout isn’t customizable unless you’re subscribed to Shopify Plus. Since we’re not able to customize the checkout pages, our next best option is to collect information on the cart page.

If you want to make sure your buyers never skip the cart page, you’ll have to disable the quick checkout button, for example on the product page or slide cart page.

For this example, we have a merchant who needs to collect additional delivery details from their buyers for local delivery. Buyers can choose from a set of delivery schedules.

What does this look like on a live store?

1. The buyer gets to the checkout page

   

   
   

2. The buyer selects a value and is able to click Checkout

   

   
   

3. Completes checkout, order is created, custom attribute is visible in the admin

   

Let’s add the necessary code to our main-cart-footer.liquid template.

You can generate an example of the code you need on this free code generator for cart attribute collection.

The code generated will give you a starting point but a simple copy pasta probably won’t work and you’ll have to adjust it to your theme’s syntax.

In our example, we’re using the theme Crave on OS 2.0 and this is what our code looks like.

<div class="cart__footer">
  <div class="cart__blocks">
    <p class="cart-attribute__field">
      <label >
        <strong>Select your Delivery Schedule</strong>
      </label><br>
      <select
        id="delivery-option"
        name="attributes[delivery-option]"
        form="cart">
        <option
          value=""
          name="attributes[delivery-option]"
          disabled
          selected>⚠️ Select an Option Before Checkout</option>
          <option
            name="attributes[delivery-option]"
            value="Home Delivery | Wednesday 2-7pm"
            {% if cart.attributes["delivery-option"] == "Home Delivery | Wednesday 2-7pm" %}
            selected
            {% endif %}>Home Delivery | Wednesday 2-7pm</option>
          <option
            name="attributes[delivery-option]"
            value="Home Delivery | Thursday 10am-2pm"
            {% if cart.attributes["delivery-option"] == "Home Delivery | Thursday 10am-2pm" %}
            selected
            {% endif %}>Home Delivery | Thursday 10am-2pm</option>
          <option
            name="attributes[delivery-option]"
            value="Home Delivery | Friday 10am-2pm"
            {% if cart.attributes["delivery-option"] == "Home Delivery | Friday 10am-2pm" %}
            selected
            {% endif %}>Home Delivery | Friday 10am-2pm</option>
      </select>
    </p>
  </div>
	<div class="cart__blocks">
		...
  </div>
</div>

One important line we had to add from the code generated is the form="cart" in the select opening tag.

Part 2: Disabling the checkout button until a custom attribute is selected

This is only needed if the cart attribute is required for the customer to check out. If it’s optional feel free to skip this part.

Still in main-cart-footer.liquid remove the conditional around disabled in the checkout button element.

This will make the Checkout button disabled by default so be extra careful and text this step before deploying. A mistake could break your buyer’s flow and make it impossible for your customers to checkout.

<button
  type="submit"
  id="checkout"
  class="cart__checkout-button button"
  name="checkout"
  disabled
  form="cart">
  {{ 'sections.cart.checkout' | t }}
</button>

Now we want to enable the button once a buyer has selected a value in our cart attribute dropdown. Let’s add a bit of JavaScript to help us.

Find the <script> element in main-cart-footer.liquid and add a code block like the following depending on what your selector is.

const dropdown = document.querySelector('#delivery-option'); // replace with your selector
// when a value is selected on page load, enable the checkout button
if (!dropdown.value == "") {
  document.querySelector('#checkout').removeAttribute("disabled");
};
dropdown.addEventListener('change', () => {
// when no value is selected, and change is triggered in the dropdown select, enable the checkout button
  document.querySelector('#checkout').removeAttribute("disabled");
});

Part 3: Displaying the attribute in your order confirmation email

{% if order.attributes.delivery-option %} 
  Your delivery preference is {{ order.attributes.delivery-option }} 
{% endif %}

Limitation

Packing slips do not have access to order custom attributes at this point so the code you use in your order confirmation email won’t work if you try to customise your packing slip template.