Level: Difficult

Line Item Properties

Line Item Properties are a feature added to Shopify to support the collection of additional information (and files) with each line item.

Have a look at the demo here!

Caution

This is an unsupported customization. Learn more here ›

    In this article:

  1. Technical Basis
  2. Product template variations
  3. Updating cart.liquid
  4. Updating email templates
  5. FAQ
  6. Compatible themes
  7. Incompatible themes
  8. Need help with this? Read on

Technical Basis

To add an item to a cart, your theme usually executes a POST request to /cart/add with a form field called id that symbolizes a variant of a product in your store.

Additionally, you can add a number of form fields for properties that you would like to attach to the item.

See implementation section below for details.

#

Shopify supports putting the same product with multiple properties in a single cart. Let's say you sell dress shirts and you would like to allow people to order those with a monogram. You get one for yourself ( SHN ) and one for your friend ( WvB ). You add the same shirt twice to the cart with different monograms. Shopify will correctly show those as independent products in the cart and not try to merge them into one line with a quantity of 2.

1.1 Implementation

At the moment of this writing you will need to know some basic HTML to implement this. At the very least, you have to do some inspired copy & pasting.

The basic principle works like this:

Open your product.liquid and look for the "form" tag with the target="/cart/add" . This form marks the section where you have to add your properties form. Let's add a new field for a monogram:

<div>            
  <p><label for="monogram">Monogram:</label></p>
  <p><input type="text" id="monogram" name="properties[Monogram]" /></p>
</div>

Add this code before your "Add to Cart" button, save, and you should now see the field on your shop.

So how do we add more?

Shopify looks for form fields that correspond to the name "properties[ANYTHING]". Replace ANYTHING with the name for the data you are collecting and it will be shown to the store owner after the order has been placed.

Information

Need help with writing the HTML code for your Line Item Properties fields? Use the Markup Generator Tool.

#

Product template variations

It's unlikely that every product of your shop needs to collect the same data when added to the cart. For this reason Shopify supports template variants. To access this feature, head over to the Template Editor. In the sidebar click "Add a new template". Select your product.liquid and choose a name such as "monogram". This adds a second copy of the product.liquid to your store called product.monogram.liquid. In this file you can add the form that you wanted. Once created you can go to your product page and you will see a new option in the sidebar where you can select which template to use for the product you are looking at. This allows you to design a series of forms for various kinds of products and associate them later to the products that need them.

Updating cart.liquid

You'll also need to make some changes to the cart.liquid template in order to display the information that you collected in the product template.

3.1 Displaying line item properties on the cart page

The first step is to make the cart page display the properties under each line item. You can do this by placing the following snippet in your cart.liquid template. Where you place this snippet depends on your theme, but it needs to go inside the loop for cart.items and you'll likely want to place it right under the cart item's name.

{% for p in item.properties %}
  {% unless p.last == blank %}
    {{ p.first }}:
    {% if p.last contains '/uploads/' %}
    <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
    {% else %}
    {{ p.last }}
    {% endif %}
    <br />
  {% endunless %}
{% endfor %}

3.2 Removing items from the cart

Next, you need to update the value for "href" in the anchor tags for removing items from a cart. Change the value for href to the following:

/cart/change?line={{ forloop.index }}&quantity=0

Your Remove link should now look like this:

<a href="/cart/change?line={{ forloop.index }}&quantity=0" title="remove">

3.3 Updating the quantity of items in the cart

Finally, you'll have to make a small change to the quantity field in the cart template. You must remove the Liquid code inside the square brackets in the "name" attribute of the input. For example, you may have something like this:

<input type="text" name="updates[{{ item.id }}]" id="updates_{{ item.id }}" value="{{ item.quantity }}" />

this should now be:

<input type="text" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" />

Updating email templates

In your email templates, replace the following:

{{ line.title }}

With:

{{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}

File attachments

If the type of a form field is "file" then the browser will show an upload form. Shopify stores these uploaded files for later viewing by the store owner. This allows all sorts of interesting possibilities. For example a canvas printing shop could use Shopify to sell prints for customer's own photos amonst many other possibilities.

Important: Normal rules of the internet and HTML apply. If you have a file upload form field in your form you must change the "form" tag and add enctype="multipart/form-data" attribute to it. Otherwise the file upload will fail in many browsers.

FAQ

Q: How do I do validation of the property forms? A: Use client side validation from javascript libraries. One such example library is https://github.com/jzaefferer/jquery-validation

Q: What happens when I add the same product to the cart with differently configured properties? A: The product will show up multiple times in the cart.

Q: How come I've never heard about this before? A: The feature was rolled out summer 2012

Q: What about cart note attributes? A: Line item properties should always be preferred to cart note attributes unless the data that is collected is global to the entire order. A global example would be, "Include a message to the recipient here:". Things like monograms, and other product customizations should use line item properties.

Q: Can the Design Guru team implement this for me? A: The Design Gurus cannot assist with implementing Line Item Properties to your shop. The time required for implementing Line Item Properties extends past the allocated customization time the Design Guru team can provide per shop.

Compatible themes

You won't need to modify the cart.liquid template in the following themes for Line Item properties to work:

If you use one of the themes listed above, you will still need to worry about adding form fields to your product.liquid template and modify your email templates to show the captured line item properties.

Incompatible themes

Note: While we make every effort to ensure this list is up to date - please reach out to the support contact or the designer of your theme if it is not in either the compatible or incompatible list

Need help with this? Read on

Shopify Support and design gurus cannot help you add line item properties to your theme and email templates. To get help, you should either post questions in this Community forums discussion, or hire a Shopify Expert.

Ready to put what you've learned into action?

Build an online store with Shopify Try it Free

Experience the future of retail now

Shopify Point of Sale Try it Free