Cart - Use cart attributes to collect more information

TyW
Community Manager
556 38 1012

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 43 (43)
BV5
New Member
2 0 0
Hi! No I didnt

Regards!
tialamb
New Member
2 0 0

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
New Member
2 0 0

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
New Member
2 0 0

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

Luckypacket
Tourist
10 0 1

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

karacorvid
New Member
1 0 0

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
New Member
2 0 0

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
New Member
1 0 0

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
New Member
1 0 0

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
Excursionist
20 1 1

Hi,

How to remove 1 attribute cart?

Thanks