Re: Cart - Use cart attributes to collect more information

Cart - Use cart attributes to collect more information

TyW
Shopify Staff (Retired)
463 71 1239

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)

TyW
Shopify Staff (Retired)
463 71 1239

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:

    cart-att-01.jpg

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

TyW
Shopify Staff (Retired)
463 71 1239

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:

    cart-att-01.jpg

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

 

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

gab33
Tourist
4 0 8

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
Excursionist
33 0 9

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

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

BV5
Visitor
2 0 0
Hi! No I didnt

Regards!
harsh28
New Member
7 0 0

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

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
Shopify Partner
18 0 5

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

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

THX

Custom sites and stores by Squareflair.com
mandm
New Member
7 0 0

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

 Screenshot - cart template liquid .pngScreenshot Shopping Cart page .png


ngoenka
Excursionist
33 0 9

this worked perfectly

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

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

ahoshino
Visitor
3 0 0

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
Tourist
10 0 1

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

karacorvid
Visitor
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!

EricPoncho
Visitor
1 0 1

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

Lauren_Guest
Tourist
4 0 2

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

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

CescaTether1
Visitor
1 0 0

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

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

Hi,

How to remove 1 attribute cart?

Thanks

chautran
Excursionist
21 1 1

I got it.

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

arjun0274
New Member
4 0 0

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

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

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

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

Siemon-Schilder
Excursionist
22 1 2

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

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

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

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

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 }}
 
 
  <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).

antonio111_0-1621843551989.png

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!

 

Jason
Shopify Partner
11206 226 2315

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.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
Folake1
Excursionist
76 0 8

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

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

kukkivaoksa
Visitor
2 0 2

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

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

Erno_Vegh
Shopify Partner
7 0 20

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

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

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

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

herastore
Excursionist
25 1 6

Hey @TyW ,  I'm using Dawn 11.0, and after following these steps, every time I tick the checkbox, an error appears saying something like "an error occured. try again later".

Analyzing the Network tab, here's the error, it's a 400 Bad Request to /cart/change, which returns this:

herastore_0-1699621582282.png

 

Anyone solved this problem or have any ideas?

j30
Shopify Partner
2 0 0

Hey @herastore Try putting in main-cart-footer instead of main-cart-items

herastore
Excursionist
25 1 6

Hey @j30 , that does not work. 

But I found a solution.

If anyone has this same error after clicking the checkbox in Dawn (my version is 11.0):

herastore_0-1700943539171.png

The problem is a function inside cart.js which runs anytime an "input" changes. It assumes that all inputs are of type number (assuming all inputs are quantity selectors for the products in the cart, which in our case is no longer true).

 

So, to solve this, in cart.js, locate the function "updateQuantity" and after the first line of the function "this.enableLoading(line);", insert the following:

if(isNaN(quantity)) {
  const body = JSON.stringify({ note: quantity });
  fetch(`${routes.cart_update_url}`, { ...fetchConfig(), ...{ body } }); 
  return;
}

This code detects when the input value is not a number (in our case is true or false, or any string that we define), adds that value of the checkbox (that @TyW taught us how to configure) into the Notes of the order, and stops the rest of the function from running against our custom checkboxes (running only for the quantity selector inputs)

BV5
Visitor
2 0 0

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

Thanks!

 

Sin título.png

kaconnelly
Visitor
3 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>

 

SallySmith
Visitor
1 0 0

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 pageTwo fields now showing on Cart page

Highlighted code was deleted and template savedHighlighted code was deleted and template saved