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

[Jason]

Ignoring the code for the moment, first run through the customer journey for purchasing.

Do you have accelerated gateways in place that might skip your custom data logic? 
Do you have the option to buy directly from the product page?

Those could be ways to quickly skip your custom logic.

[Folake1]

Hi, I am trying to follow the steps but my Theme doesn't have cart-template.liquid neither does it have cart.liquid. I am using the Focal Theme. Someone should please help.

[MAPdev]

@Folake1 I would start with looking in product-form-template

[kukkivaoksa]

November 2022 and this tutorial is still valid! 

One minor correction. Modern 2.0 themes do not have <form> tags in the template, so you will need to add ...form="cart"... to each field, otherwise shopify will not acknowledge the attribute content.

[Erno_Vegh]

Great ! What is the max character on the "text short " ? Looks it is an input field

[Erno_Vegh]

Thanks for this article! What is {{ attribute | first }} and what is {{ attribute | last }}

What is firs and last represent ? Will this work for textarea ?

[Erno_Vegh]

no matter where I put this code inside the form , right after <form> or right before </form> , the error message kicks in:( 

"There was an error while updating your cart. Please try again." But then I am redirected to the checkout page just fine.... Any idea why this error is ?

<!--<div id="CartDrawer-CartErrors" role="alert"></div> I ended up commenting the error div out, but I know this is not a good idea...-->
<div class="cart-attribute__field">
<textarea id="yourspecial-notes" placeholder="Your Notes" name="attributes[Your Notes]">{{ cart.attributes["YourNotes"] }}</textarea>
</div>
</form>

[kindredstudios]

I'm using Dawn theme and I did not see cart-template.liquid or cart.liquid when I went to edit code. But I do have cart-drawer.liquid, so I attempted to place the code here even though there was also no </form>  only {%- render 'cart-drawer' -%}

Is there another way to add a required custom input?

[ferchoruiz]

How can I translate the error message for not filling a required form? It currently states "Please fill out this field"

[BV5]

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

Thanks!

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

[SallySmith]

Hi! I used the tutorial to add a Swing Tag Message field which worked perfectly (thank you!). I needed this additional attribute because I used the standard cart notes section for 'Delivery Instructions', however, I've just set up Local Delivery which includes a Delivery Instructions field during Checkout automatically, and therefore I have reverted the standard cart notes area back to a Swing Tag Message field, and no longer need the additional attribute. I deleted the code that I'd added via the Elements Generator and saved the template, however, the additional attribute is still showing on the cart page, i.e. now I have two Swing Tag Message field areas 😕 Any ideas on what I've missed in deleting the additional attribute or other steps I need to take to remove the additional attribute? 

Two fields now showing on Cart page

Highlighted code was deleted and template saved

[chautran]

Hi SallySmith,

I think when you remove all code had attribute after go to front end clear cookie in browser (or open browser private) so will be ok. 

[d_kahr]

Hello. Will the data entered in this cart page field show up in a column on the .csv file when orders are exported? Thanks. 

[Prabhav1]

Hi!

Thanks for the tutorial. I followed it and managed to add a form right on the cart page. It asks for the following:

1. Name of Doctor
2. Upload a file of prescription.

My question is, how do I access this information. As in where will it be available?

[Sharina]

Click to expand...

Hello,

I successfully added the text fields to my cart page.
But I can't seem to find where/how I can translate them.
Can someone help me?

Thanks!

[antonkogan]

is it possible to have cart attribute mapped to ship to name, ship to address? we ship to third parties and need these cart attribute fields mapped to the correct shipping label field

[hope8]

Hello! When a customer selects a shipping date it shows up as "Shipping-Date" on the shopify order. Is there a way to edit the text to say "Delivery-Date" instead?

[MAPdev]

@hope8 Yes, if this is a custom property you added to code or a default input from theme developer. You can change the name of the input i.e. <input name="properties[property-name-you-want]" > 

[dmcgrew]

I can't get the cart attributes to show up in my packing slip. No idea why. The attribute shows up in the order under Additional Details. I put in the following Liquid into my packing slip template but nothing shows up in there..

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

Also not sure what "first" and "last" are referring to.

[MAPdev]

I believe it can be done in dot notation as well

{{attribute.first}}: {{attribute.last}}

I believe this will give you a broader answer Add Additional Details On An Order To The Notifications

[magriguez]

I've had the implemented for a while but am now getting a "There was an error while updating your cart. Please try again." error when a user starts to type in the fields. The field input is not saved. When we type it looks like the page is trying to update and not registering all our keystrokes. Has anyone else run into this issue/have a solution?

Video demo of issue: https://vimeo.com/772095413/ac4c04791b

[Patrick__]

Same here, any solution?

[MAPdev]

I'm not sure what is causing the error exactly but the text not registering could be related to the focus or keyup event capturing the typed text in the field incorrectly or updating too soon

[Patrick__]

It looks like it's making a call to /cart/change and is failing, and returning:

{
"errors": "expected String to be a Integer: quantity"
}

[Erno_Vegh]

I got the same error, can seem to be able to remove it unless I comment out the hole DIV:

<!--<div id="CartDrawer-CartErrors" role="alert"></div>-->

[lokisanae]

this codes worked and appeared on my cart page but everytime someone checkouts, "Additonal Details" on the order page doesnt appear, i dont know what they chose. How can i see the ones theyve choose

[Vikkivixon4]

STOP SEND ME EMAILS!!!