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.

Unsupported Customization

Unsupported customizations fall outside the scope of our support service. This means that we’re not able to help you if you run into problems. The good news is that we’ve classified each tutorial according to its level of difficulty, to help you decide whether or not to attempt it on your own.

There’s also a growing community on our forums - you’ll often find friendly and helpful advice there. You could also consider reaching out to a Shopify Expert to assist you with some of the more advanced customizations.

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.

#

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

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.

#

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.

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

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

3.3 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

Your theme will not be able to use Ajax if you also need a file upload. You can only have one or the other. If you use a theme like Launchpad or Radiance, that stays put on the product page when an item is added to the cart, you will need to disable the Ajax feature first, for your file upload to work.

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 to 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:". 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.

This customization is not supported by our Shopify Gurus. 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.