advanced Advanced tutorials require advanced knowledge of web design concepts and languages such as HTML, CSS, JavaScript and Liquid.

We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Line Item Properties

Line Item Properties are used to collect customization information about an item when it is added to the cart.

See our demo store.

Technical Basis

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

You can add any number of form fields to collect customization information about that variant when it is added to the cart.

See the implementation section below for details.

Monogram 1

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.

Implementation

You will need to know some basic HTML to implement this. At the very least, you'll have to do some inspired copy & pasting.

The basic principle works like this:

Open your product.liquid and look for the "form" tag with an action attribute set to "/cart/add". This form marks the section where you have to add your line item properties fields. Let's add a new LIP 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 have a name attribute set to properties[ANYTHING]. Replace ANYTHING with the name for the data you are collecting and that data will be shown to the store owner after the order has been placed. The ANYTHING bit will become a label for that data.

Information

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

Monogram 2

Product templates

It is unlikely that you need to collect the same data for every product that is added to the cart. For this reason, Shopify supports alternate product templates. To access this feature, head over to the Edit HTML/CSS page. In the sidebar, click "Add a new template". Create a new product template. Choose a name such as "monogram". This will create a copy of your product.liquid template called product.monogram.liquid. In this file, you can add any type of form fields that you need, and any number of them. Once the template is created, you can go to your product page and will see a new option at the bottom where you can select which template to use for the product you are looking at.

Updating cart.liquid

You'll also need to make some changes to your cart.liquid template in order to display on the cart page the information that you collect on your product pages.

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

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

Removing items from the cart

Next, you need to update the value of the "href" attribute of all anchor tags used to remove items from the cart. Change the value of that attribute 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">

Updating the quantity of items in the cart

Finally, you'll have to make a small change to the quantity field. You must remove the Liquid code inside the square brackets of the "name" attribute of your 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.

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.

Caution

If you use a theme that stays on the product page when an item is added to the cart, your theme uses Ajax to update your cart contents. You must disable the Ajax cart feature to allow your customers to upload files.

FAQ

Q: How do I validate the line item properties? A: Use the HTML5 required attribute, or use the class 'required', on your form fields. It makes no difference which of the two you use. Go with what you prefer. Example:

<input type="text" name="properties[Monogram]" placeholder="Your monogram..." class="required" data-error="Please fill in the Monogram text." />

Use a data-error attribute to specify which message should be shown to the shopper if he does not fill out the field and tries to add the item to the cart.

Then, add the content of this file to your theme.liquid file. Paste the content before the closing </body> tag, that's near the bottom of your theme.liquid file.

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: What about cart attributes? A: Line item properties should always be preferred over cart attributes unless the data that is collected is global to the order. A global example would be "Include a message to the recipient here:". Product customizations, such as monograms, should use line item properties.

This customization is not supported by Shopify. Learn more ›

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.