Re: Cart - Use cart attributes to collect more information

Cart - Use cart attributes to collect more information

TyW
Community Manager
463 71 1238

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.

 

 

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 73 (73)
chautran
Excursionist
21 1 1

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
Visitor
1 0 0

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
Visitor
2 0 0

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
Visitor
1 0 0
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
Excursionist
30 1 8

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
Visitor
1 0 0

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?

Screen Shot 2022-04-06 at 3.50.29 PM.png

MAPdev
Shopify Partner
16 1 1

@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
Visitor
1 0 0

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
Shopify Partner
16 1 1

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
Shopify Partner
3 0 4

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__
Tourist
4 0 2

Same here, any solution?

MAPdev
Shopify Partner
16 1 1

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__
Tourist
4 0 2

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
Shopify Partner
7 0 19

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
Excursionist
16 0 10

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
Visitor
2 0 0
STOP SEND ME EMAILS!!!

j30
Shopify Partner
2 0 0

This helped me;


$(document).ready(function() { 
$('input[name="attributes[your_attribute]"]').change(function() {
 var newValue = $(this).is(':checked') ? 'Yes' : 'No';
$.post('/cart/update.js', { attributes: { "your_attribute": newValue } }, function(cart) { console.log('Cart updated:', cart); });

});

});

tendtome
Excursionist
42 1 4

I have added a cart attribute but its not showing up on the order page in Additional Information section. Please help - what am i missing?

MAPdev
Shopify Partner
16 1 1
  • If you are attempting to add more information to the order as a whole use attributes if you are trying to add more information to a individual item use properties e.g.   

    The Product properties usually are added in the product-form on the product page not in the cart although they can be added there.

    The Cart/Order attributes usually are added in the cart-form/ajax-cart-form not in the product page 


    ORDER:  <input type="text" id="name" name="attributes[your-attribute-name-here]" />
    PRODUCTS:  <input type="text" id="name" name="properties[your-property-name-here]" />

    The properties are passed to the individual item i.e. a T-shirt with a "custom text" property will have the Title of the T-shirt product and then underneath in smaller text on the custom text property. 

    T-SHIRT Product
    Custom Text - Custom Text Added by User 

    The  Attributes are passed to the order itself and are not shown on the product they are visible in the Orders Admin Page in the Additional Details section underneath the Notes section unless the attributes were no passed at the time of order.

  • KEEP in mind if no value is given to the attribute the attribute will not show up on the order

  • If you are trying to pass information to the inputs without customer interaction (i.e. not a text field they would fill out but something about the product you wish to know such as tags associated with the product that apply to the handling time for the product then change the type to type="hidden" ) this will still pass a property to the product the customer can see it, but cannot change it in this example.

 

 

Hopefully that helps if not let me know 

tendtome
Excursionist
42 1 4

This is the code I used to add the cart attribute. But the attribute answer from the customer is not showing on the order page in additional details as mentioned. Is there something wrong with the code? Are you able to help please? 

<p class="cart-attribute__field">
<label for="van-registration-or-zone-build-number">Van Registration or Zone Build Number </label>
<input required class="required" id="van-registration-or-zone-build-number" type="text" name="attributes[Van Registration or Zone Build Number ]" value="{{ cart.attributes["Van Registration or Zone Build Number "] }}">
</p>
MAPdev
Shopify Partner
16 1 1

Ok a few things

1.) You do not need a DEFAULT value in (value="") part of the input remove the {{cart.attributes[] }}  .. from it 
2.) If this is for a whole cart regardless of the products in the cart then add the input in the cart form
3.) if it's for a individual product add the in put inside the product form
4.) if you still have a issue post the form code you added your code to so it can be seen in context or a link to the site if live


tendtome
Excursionist
42 1 4

this is added to the main.cart-footer-liquid:

Screenshot 2024-04-02 at 11.13.50 am.png

 

site URL is: https://www.uspsystems.com.au/cart

MAPdev
Shopify Partner
16 1 1

Move the cart attribute element into the actual cart-form you are outside of the form so the info is not passed. put it just before the closing </form> 

aaaaaaScreenshot 2024-04-01 201008.jpg

dg_eye
Tourist
14 0 1

Is there a solution yet for using cart attributes with other payment methods, such as Google Pay, ....? Apparently data from custom fields isn't saved, when using other payments methods.