Adding Properties to Line Items in Shopify

Learn how to add custom properties to your Shopify line items using form fields

Rob Johnson

by Rob Johnson

Oct 3rd 2024

# shopify

If you're looking for a way to add custom properties to a line item when an item is being added to the cart, then this tutorial is for you.

Line item properties are helpful if you want to attach additional or custom information to a line item that can then be referenced within the cart, checkout or order object in the future.

Line item properties also show in the cart and checkout areas where the line item is shown. This is helpful to show things such as pre-order information or custom engraving information.

What we'll cover.

  1. What html is needed
  2. Where it should be placed
  3. How to make properties visible or hidden for customers
  4. Making a case to integrate with variant metafields for admin management
  5. Where line item properties are stored on the cart, checkout and order objects

What HTML is needed

If you want to have a hidden input field. You can use the following. You can change the key of the value from Custom to be anything you'd like.

<input type="hidden" name="properties[Custom]" value="This is the value of the property 'Custom'">

Or if you'd want to have an editable field by the customer, you could do an input field or select field.

<input type="text" name="properties[Custom]" value="Enter your engraving text">

Where it should be placed

On your product page, look for the add to cart button. The HTML form that renders this button is what we're looking for. It should look something like this.

<form method="post" action="/cart/add" id="product-form-template--123456789__main">

Inside of this form you'll see hidden input types such as:

<input type="hidden" name="id" value="1223334444">

You'll want to add your custom input field here. Or if you want it visible, just ensure that it's located within the <form> and place it where you want to have the input field. You can also make it required if you want by adding required inside of the input html.

How to make properties visible or hidden for customers

You can make a property hidden to customers by adding an underscore prefix. For example you would change Custom to _Custom like so:

<input type="hidden" name="properties[_Custom]" value="This is the value of the property 'Custom'">

For more information on this, see the docs.

Making a case to integrate with variant metafields for admin management

Scenario 1: You sell personalized jewelry where customers can add an engraving. You want to capture this engraving information and ensure it's associated with the correct order item.

Once the customer has entered the information on the product page form, this information will be associated to the line item. If they go back and add an additional item with different custom attribute values, an additional line will be created on the order.

Scenario 2: You are running an A/B test and want to see how many people are adding a product to cart when they are being shown a specific offer.

As the custom properties are always connected to the order line items, you'll be able to view them in your data warehouse. You can create SQL queries to show the comparison of properties of "test1" with values "control" or "variant a".

Where line item properties are stored on the cart, checkout and order objects

You can find the properties attached to each line. Example below shows line item #44613447844030 with the properties attached. This is the case as the cart progresses to the order. The properties are saved to the end purchase. This can be helpful for things like custom engravings, attribution and a/b tests etc.

"id": 44613447844030,
"properties": {
  "Pre-order": "Ships Nov 12th"
}