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

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

[LobnaHegazy1]

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

[BV5]

Hi! No I didnt

Regards!

[harsh28]

As per shopify guide, Collecting or doing any additional custom fields won't work with any dynamic check out options : apple pay, buy now button, paypal.

You have to disable the dynamic checkout button.

[Manifestation]

Hello! Does the field form allow for customers to select more than one response in the radio button or drop-down? How do I add more than one answer for the checkbox?

[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

[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?

[ahoshino]

Hi have you gotten this working? Im using Supply theme as well, but some customers seem to be able to checkout without filling the form out.

I'm having a hard time as the form includes some additional details of the orders, and I cannot obtain it. 

Thank you,

[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!

[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

[Lauren_Guest]

HI Matt, did you work out how to view the additional notes that customer are adding? I've followed all the instructions, the customer can complete the box but it doesn't notify me or share what the customer has written, Thanks, Lauren

[dohcgrey]

hey Matt, did ever find an answer to this? I'm having the same problem on my first order.

[CescaTether1]

Matt, did you find an answer to this? I too have put in the code, the drop down box is working but I can't see where I can find what customers are selecting? Thank you.

[MAPdev]

Change the input from attributes[yourname] to properties[yourname] and {{cart.attributes[yourname]}} to {{properties[yourname]}} this will show up in AJAX and Regular carts make sure it's added inside the product form and for ease of use above add to cart input.

If you are still not seeing it in AJAX cart make sure your ajax cart template has the following code 

                 {{#properties}}
                    {{#each this}}
                      {{#if this}}
                        <span class="someclass">{{@key}}: {{this}}&nbsp;<br></span>
                      {{/if}}
                    {{/each}}
                  {{/properties}}

 and that the theme.js file has some variation of this var someVariable = cartItem.properties  

[chautran]

Hi,

How to remove 1 attribute cart?

Thanks

[chautran]

I got it.

Update attribute[name] = null when remove item in cart or every page

[arjun0274]

Hi Expert!

I did everything as you said,

Copy and paste the code below into your cart.liquid file between the <form> and </form> tags. 

But, there's no change in my cart whatsoever!

I'm using the Debutify theme, Please help me.

[JoeRam]

Hi TyW,

Thanks for your info. I successfully displaying the cart attributes in my cart page (i.e. Delivery date, Message on the card) but somehow I am not sure if they were captured or stored into Database.  I did test order and pick the date and wrote down card message for this order but in my ADMIN order page (where I can see the details of each order), the Notes field (top right corner) did not display the notes that I wrote when I placed that order. 

And also, I tried to incorporate these attributes in my "Notification order confirmation" email and it also didn't show the information that I entered (Only the hardcoded label (title) but not the actual entered values).

Please help.

Thanks

[JacklynKaye]

This worked great for adding a drop down attribute in my cart but I can't get it to show up on my order print out or email so I can't see what they've selected. 

[JacklynKaye]

This is working for me now! No idea how but I can now see the additional attribute in my backend.

[Siemon-Schilder]

I followed the guide and added the code for a checkbox, the checkbox indeed appears, but it doesn't respond, so I can't check the box. Does anyone have the same issue?

https://x9plick10qxn1xbs-39069974572.shopifypreview.com

[Marc_Epstein]

Hi,

Thanks so much for the great tutorial! I was having some trouble customizing my custom form fields. I want to have 2 or 3 columns of them and editing the custom css hasn't been working.

Any tips would be greatly appreciated!

[antonkogan]

I collect cart attributes with a drop of pre selected places we ship to- is it possible to have cart attributes be used in place of ship to when creating a label or using plug ins like ups.com for shipping? 

[hhelmanj]

May i use this attributes to "auto tag" an order based on them...lets say: Every order with Atrribute= XXX tag it with AAATAG. ?

[antonio111]

Hi all,

I am having the same issue described in this thread on "not capturing and displaying cart information in the notification mails and order". This actually occurs rarely, like once every15-20 orders, but it is still painfully I have automated the capturing of order delivery date into order tag.

I will report here how I have included a datepicker to capture order delivery date. I hope it could be of help and maybe you could give me a hint on why sometimes the date is not captured in the orders.

In the Snippet folder, the delivery-date.liquid file contains:

  {{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}

  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

  <div style="width:300px; clear:both;">

    <p>

      <label for="date">Choose delivery date:</label>

      <input required id="date" type="text" readonly='true' name="attributes[date]" value="{{ cart.attributes.date }}" />

      <span style="display:block" class="instructions"> We do not ship on Sundays and holidays.</span>

    </p>

  </div>

  <script>

    window.onload = function() {

      if (window.jQuery) {

        let $ = window.jQuery;

        var unavailableDates = ["19/03/2021", "01/04/2021", "02/04/2021", "03/04/2021", "01/05/2021", "03/05/2021", "04/05/2021", "15/05/2021", "17/05/2021", "12/10/2021", "01/11/2021", "09/11/2021", "06/12/2021", "8/12/2021", "25/12/2021"];

        function noSundaysOrHolidays(date) {

          var day = date.getDay();

          var showDay = true;

          if (day != 0) {

            var string = jQuery.datepicker.formatDate('dd/mm/yy', date);

            showDay= (unavailableDates.indexOf(string) == -1);

            return [showDay];

          } else {

            return [day != 0, ''];

          }

        }

        $(function() {

          $("#date").val('');

          $("#date").datepicker({

            firstDay: 1,

            minDate: +2, 

            maxDate: '+60',

            dateFormat: 'DD d MM yy' ,

            beforeShowDay: noSundaysOrHolidays,

            beforeShow : function(){

var dateTime = new Date();

var hour = dateTime.getHours();

                var day = dateTime.getDay();

if(hour>=18){

$(this).datepicker( "option", "minDate", "+3" );

}

                    if(day == 5 && hour>=18){

$(this).datepicker( "option", "minDate", "+4" );

}

            }

          });

        }); 

      }

    }

  </script>

So, the delivery date is captured in the variable attributes[date].  The delivery-date.liquid snippet goes into the cart-template.liquid --> {% render 'delivery-date' %}

The required declaration did not prevent customers from proceeding to checkout without having selected a date. In order to cope with this issue I have added to file theme.js (at the end of the file) the following code:

// This code makes mandatory the choice of delivery date
$(document).ready(function() {
$('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
      if ($('#date').val() == '' || $('#date').val() === undefined)
      {
           alert("You must choose one of the available dates for delivery.");
           return false;
       } else {
           $(this).submit();
       }
});
});

In the Notification section (in Settings), I have added the following to Order Confirmation template:

<h4>Fecha de entrega:</h4>
{{ attributes.date }}

So given the previous steps, in Order notes an "additional details" section appears where the date (and delivery time even though I have not included it in the code above).

However, as I said before, once every 15-20 orders this information does not appear and I do not have an explanation for this.

Anyone has a clue or could give some help?

Kind regards!