Cart - Use cart attributes to collect more information

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

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 ask customers how they heard about your store, then you can add an How did you hear about us? drop-down selection question to the cart.

Tip: Cart attributes are different from order notes and line item properties. Order notes, which are available in every free Shopify theme, let you capture special instructions on how to prepare and deliver an order. Line item properties are used to record customization information about specific products in an order. Line item properties are specified directly on the product page.

Sectioned themes and non-sectioned themes

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.

To figure out whether your theme supports sections, go to the theme's Edit code 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 an older, non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

• Sectioned themes
• Non-sectioned themes

[TyW]

Sectioned Themes

Create 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:
   
   
   
   
3. Enter a label for Your form field label.
4. If you want your theme to prevent customers from reaching the checkout before they have filled in your form field, check Required.
5. You can see a preview of your form field in the Preview section.
6. Copy the generated code from the box in the Grab your code section.

Add a form field to your theme code

To add a custom form field:

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. In the Sections directory, clickcart-template.liquid. If your theme doesn't have acart-template.liquid, then, in the Templates directory, click cart.liquid.
4. Find the closing </form> tag in the code.
5. 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.
6. 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">

7. Click Save.

The new field is shown on the order page of your admin in the Additional Details section.

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

Show 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>

Show 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 to the very bottom of the template:

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

[TyW]

Non-sectioned Themes

Create 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:
   
   
   
   
3. Enter a label for Your form field label.
4. You can see a preview of your form field in the Preview section.
5. Copy the generated code from the box in the Grab your code section.

Add a form field to your theme code

To add a custom form field:

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. In the Sections directory, click cart-template.liquid. If your theme doesn't have acart-template.liquid, then, in the Templates directory, click cart.liquid.
4. Find the closing </form> tag in the code.
5. 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.
6. 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">

7. Click Save.

The form field is shown on the order page of your admin in the Additional Details section.

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

Show 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>

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

[Alan_Houser]

Where do I find the "Order Printer" template that you mention in your post? 

(I'm running Supply, and not finding it.) 

THX

[mandm]

Hi TyW

I have followed your instructions and pasted the code that was generated by the Shopify UI Elements Generator. The preview showed me exactly how I wanted this form field to look.   I wanted to create a form field with a drop down list for the customer to select their preferred charity.   
When I tested it and viewed how the Cart page looked, I found that ONLY the Label name came up and the drop down field was not visible.  

Any clues as to what I might have done wrong here?  
I have attached the screenshot of my cart-template.liquid within my theme showing you where I embedded the code the the UI Elements generator created. 

I have also attached the screenshot of what my shopping cart looks like after I embedded the code. 
For your reference, the theme I'm using is Envy by Wetheme.  

Any help would be very much appreciated.  

thanks

Mich

 

[ngoenka]

this worked perfectly

[gab33]

Hello, this tutorial is really helpful and I manage to add a required checkbox on my cart page.

However, the "required" field in combination with the removal of "novalidate" attribute in the form doesn't prevent the customer to proceed with checkout through the additional checkout buttons (Google Pay, Apple Pay etc). Is there any way to block the user to compile required fields before heading to the quick checkout experience?

Thanks in advance

[ngoenka]

Strange, worked well for me. I removed 'novalidate' in the <form action...

and then used this code for my usecase:

Hello - Here's what I did to ensure that customers complete the newly added fields before being allowed to go to checkout

     <p class="cart-attribute__field">

        <label for="customer-name"><font color="BLACK"><strong>కస్టమర్ పేరు</strong></label></font></label> 

  <input required class="required" id="customer-name" type="text" name="attributes[Customer Name: ]" value="{{ cart.attributes["Customer Name"] }}">

</p> 

[BV5]

Hi, thanks for the tutorial but it doesnt work in my website, I put the code below <form> tag.

Thanks!

[LobnaHegazy1]

@gab33 I have the same problem. Did you find a solution, please?

[BV5]

Hi! No I didnt

Regards!

[tialamb]

Id like the make our form required however per your instructions, I am not finding a "novalidate" in the code. Novice here, so appreciate any help.

[Aleach13]

I've having issues with making cart attributes required. Coding looks okay but customers can still proceed to check-out without filling in required fields.

Any help anyone? I'm currently using Supply theme. (https://gencowine.com.au/cart)

    
            <p class="cart-attribute__field">
  <label for="enter-mobile-number">Enter Mobile Number</label>
  <input required class="required" id="enter-mobile-number" type="text" name="attributes[Enter Mobile Number]" value="{{ cart.attributes["Enter Mobile Number"] }}" required>
</p>
            
<p class="cart-attribute__field">
  <label>Preferred Delivery Window </label>
  <input required class="required" type="radio" name="attributes[Preferred Delivery Window ]" value="3pm - 4pm"{% if cart.attributes["Preferred Delivery Window "] == "3pm - 4pm" %} checked{% endif %}> <span>3pm - 4pm</span><br>
  <input required class="required" type="radio" name="attributes[Preferred Delivery Window ]" value="4pm - 5pm"{% if cart.attributes["Preferred Delivery Window "] == "4pm - 5pm" %} checked{% endif %}> <span>4pm - 5pm</span><br>
  <input required class="required" type="radio" name="attributes[Preferred Delivery Window ]" value="5pm - 6pm"{% if cart.attributes["Preferred Delivery Window "] == "5pm - 6pm" %} checked{% endif %}> <span>5pm - 6pm</span><br>
  <input required class="required" type="radio" name="attributes[Preferred Delivery Window ]" value="6pm - 7pm"{% if cart.attributes["Preferred Delivery Window "] == "6pm - 7pm" %} checked{% endif %}> <span>6pm - 7pm</span><br>
  <input required class="required" type="radio" name="attributes[Preferred Delivery Window ]" value="No Preference"{% if cart.attributes["Preferred Delivery Window "] == "No Preference" %} checked{% endif %}> <span>No Preference</span><br>
  <input required class="required" type="radio" name="attributes[Preferred Delivery Window ]" value="Industry Partner"{% if cart.attributes["Preferred Delivery Window "] == "Industry Partner" %} checked{% endif %}> <span>Industry Partner</span><br>
</p>

[Aleach13]

I've still not be able to find a fix after days of searching. Anyone else find a fix?

[Luckypacket]

hi is there way to use the custom cart atrributes to filter orders?

[karacorvid]

I'm using the Debut theme and I believe Ajax is enabled on the theme. I've added my custom required fields:

<div class="fein-resale">
           <p class="cart-attribute__field resalecert idnumbers">
  				<label for="resale-certificate">Resale Certificate Number *</label>
  				<input required class="required" id="resale-certificate" type="text" name="attributes[Resale Certificate]" value="{{ cart.attributes["Resale Certificate"] }}">
	 	   </p>
      	   <p class="cart-attribute__field fedidn idnumbers">
  				<label for="federal-tax-id">Federal Tax ID Number *</label>
  				<input required class="required" id="federal-tax-id" type="text" name="attributes[Federal Tax ID]" value="{{ cart.attributes["Federal Tax ID"] }}">
	  	   </p>
           <div style="clear:both;"></div>
        	<p class="required"><small>* required</small></p>
      </div>

but I can't get it to validate. I'm trying to use javascript but don't think I'm getting it quite right. Could someone help me get the right code possibly?

Here's what I have but I know it's incomplete:

$(".template-cart form[action='/cart']").on("submit", function(e){
  $(".cart_error").remove();
  if(#resale-certificate == ""){
   alert("Please enter your Resale Certificate #");
   attributes[Resale Certificate].focus();
  return false;
  }
  if(#federal-tax-id == ""){
   alert("Please enter your Federal Tax ID #");
   attributes[Resale Certificate].focus();
  return false;
  }
});

Also, I have this at the bottom of the theme.js file under the last line:

$(theme.init);

Is that correct?

Thank you for your time and help!

[julenehunter]

I want to add a reference form to my cart at checkout. Used the form creator. Followed instructions as noted to add code. No dropdown appearing anywhere.

Please help!

Theme: Minimal

Some pages customized in PageFly ( not cart or checkout)

https://swphmarketplace.com/

UI creator code:

<p class="cart-attribute__field">
<label>How did you hear about us?</label><br>
<select required class="required" id="how-did-you-hear-about-us" name="attributes[How did you hear about us?]">
<option value="Our Newsletter"{% if cart.attributes["How did you hear about us?"] == "Our Newsletter" %} selected{% endif %}>Our Newsletter</option>
<option value="Facebook"{% if cart.attributes["How did you hear about us?"] == "Facebook" %} selected{% endif %}>Facebook</option>
<option value="Instagram"{% if cart.attributes["How did you hear about us?"] == "Instagram" %} selected{% endif %}>Instagram</option>
<option value="Our Website"{% if cart.attributes["How did you hear about us?"] == "Our Website" %} selected{% endif %}>Our Website</option>
<option value="Email Campaign"{% if cart.attributes["How did you hear about us?"] == "Email Campaign" %} selected{% endif %}>Email Campaign</option>
<option value="trim&Terrific referral"{% if cart.attributes["How did you hear about us?"] == "trim&Terrific referral" %} selected{% endif %}>trim&Terrific referral</option>
<option value="Other"{% if cart.attributes["How did you hear about us?"] == "Other" %} selected{% endif %}>Other</option>
</select>
</p>

[EricPoncho]

Hi, I am not seeing any </form> tag in my code. I do not have a cart-template.liquid. under Sections so I checked under Templates in cart.liquid but there is not </form> tag. I tried placing the code from the Shopify UI Elements Generator in there anyway but it is not showing anything in the checkout cart when I preview the theme. Is there somewhere else I can post it? Thanks 

[Matt80]

Hi TyW,

I have been running the code and now the box appears in my cart and is mandatory. However I don't get notified about what the customer typed in the box. Any ideas why that could be?

Thank you very much for your help

Matt

[chautran]

Hi,

How to remove 1 attribute cart?

Thanks