Collect information from your customers with cart attributes

Cart attributes are custom form fields that let you collect additional information from your customers on the cart page. The information that you collect will display in a note on the customer's order in the admin. For example, if you want to allow customers to indicate whether they'd like their order to be gift-wrapped, then you can add an I want my order gift-wrapped checkbox to the cart:

Cart attributes

Note

Cart attributes can only be added to a cart page, and are not compatible with cart drawers, or cart popups. To change your cart style, go to the Customize theme page.

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. To figure out whether your theme supports sections, go to the theme's Edit HTML/CSS page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, then click the Sectioned themes button and follow the instructions. If you are using non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

Creating a cart attribute field

You can add as many custom form fields to your cart form as you need. You can use the Shopify UI Elements Generator tool to easily generate the HTML and Liquid code for each form field that you want to add to your cart page. This tool was created by Shopify to help simplify the process of adding custom user interface elements, such as form fields and icons, to Shopify themes.

  1. Go to the Shopify UI Elements Generator.

  2. In the Set your form field section, select the type of form element that you want to use from the Type of form field drop-down menu:

    Types of form fields
  3. Enter a label for Your form field label:

    Cart attribute markup generator set form field
  4. Check Required if you want your theme to prevent customers from reaching the checkout before they have filled in your form field.

  5. You can see a preview of your form field in the Preview section:

    Cart attribute markup generator preview
  6. Copy the generated code from the box in the Grab your code section:

    Cart attribute markup generator grab code

Adding a form field to your theme code

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Sections directory, click cart-template.liquid. If your theme doesn't have a cart-template.liquid, then, in the Templates directory, click cart.liquid.

  3. Find the closing </form> tag in the code.

  4. On a new line right above the closing </form> tag, paste the code that you copied from the Shopify UI Elements Generator. You can experiment with putting the code in different places to see where the form field appears on your cart page.

  5. If you set your form field to be required, then you will need to remove the novalidate attribute from the checkout form. Find novalidate, which is inside the opening <form> tag. The code might look something like this:

    <form action="/cart" method="post" novalidate class="cart">
    

    Delete novalidate:

    <form action="/cart" method="post" class="cart">
    
  6. Click Save.

The gift-wrapping information will be shown on the order page of your admin in the Additional Details section:

Cart attributes on order page

Showing cart attributes in email templates

You can show cart attribute information for orders in your email notification templates. To add cart attributes to an email template, add the following code to the template in the place that you would like the cart attributes to be shown:


<h4>Additional details</h4>
<p>
{% for attribute in attributes %}
{{ attribute | first }}: {{ attribute | last }}<br>
{% endfor %}
</p>

The result will look something like this:

Email notification cart attributes

Showing cart attributes in Order Printer templates

If you use the Order Printer app to print your orders, you can add some code to your templates to show cart attributes on your printouts. To add cart attributes to an Order Printer template, add the following code at the very bottom of the template:


{% for attribute in attributes %}
{{ attribute | first }}: {{ attribute | last }}<br>
{% endfor %}

The result will look something like this:

Order Printer cart attributes

Creating a cart attribute field

You can add as many custom form fields to your cart form as you need. You can use the Shopify UI Elements Generator to generate the HTML and Liquid code for each form field that you want to add to your cart page.

  1. Go to the Shopify UI Elements Generator.

  2. In the Set your form field section, select the type of form element that you want to use from the Type of form field drop-down menu:

    Types of form fields
  3. Enter a label for Your form field label:

    Cart attribute markup generator set form field
  4. You can see a preview of your form field in the Preview section:

    Cart attribute markup generator preview
  5. Copy the generated code from the box in the Grab your code section:

    Cart attribute markup generator grab code

Adding a form field to your theme code

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Templates directory, click cart.liquid.

  3. Find the closing </form> tag in the code.

  4. On a new line right above the closing </form> tag, paste the code that you copied from the Shopify UI Elements Generator. You can experiment with putting the code in different places to see where the form field appears on your cart page.

  5. If you set your form field to be required, then you will need to remove the novalidate attribute from the checkout form. Find novalidate, which is inside the opening <form> tag. The code might look something like this:

    <form action="/cart" method="post" novalidate class="cart">
    

    Delete novalidate:

    <form action="/cart" method="post" class="cart">
    
  6. Click Save.

The gift-wrapping information will be shown on the order page of your admin in the Additional Details section:

Cart attributes on order page

Showing cart attributes in email templates

You can show cart attribute information for orders in your email notification templates. To add cart attributes to an email template, add the following code to the template in the place that you would like the cart attributes to be shown:


<h4>Additional details</h4>
<p>
{% for attribute in attributes %}
{{ attribute | first }}: {{ attribute | last }}<br>
{% endfor %}
</p>

The result will look something like this:

Email notification cart attributes

Showing cart attributes in Order Printer templates

If you use the Order Printer app to print your orders, you can add some code to your templates to show cart attributes on your printouts. To add cart attributes to an Order Printer template, add the following code at the very bottom of the template:


{% for attribute in attributes %}
{{ attribute | first }}: {{ attribute | last }}<br>
{% endfor %}

The result will look something like this:

Order Printer cart attributes

Want to discuss this page?

Visit the Shopify Community