How to Add Custom Line Item Properties in Shopify

Do you need to collect specific information from customers for a product, such as a name for jewelry engraving or a custom message? Creating a unique product variant for every possible customization is impossible.

Instead, you can utilize Shopify Line Item Properties. This front-end customization allows you to attach additional pieces of data to specific items in an order.

In this tutorial, we will walk through how to edit your theme code to add custom form fields directly to your product pages.

Why Use Line Item Properties?

Line item properties are useful when:

• Customization is required: You offer personalized items like engraved jewelry or monogrammed shirts.
• Variants are insufficient: The data doesn't fit well into standard product variants (Size, Color, Material).
• You want a native solution: This method uses standard HTML and Liquid, avoiding the need for paid apps for simple text inputs.

Step 1: Prepare Your Theme

Before editing any code, it is best practice to work on a backup of your live site.

1. Go to Online Store > Themes.
2. Click the three dots next to your live theme and select Duplicate.
3. Click Edit code on the duplicated theme to begin.

Step 2: Locate the Product Form

We need to find the HTML form that submits product data to the cart. In most modern Shopify 2.0 themes (like Dawn), this is located in the main-product.liquid file.

1. In the file directory, scroll down to the Sections folder.
2. Open main-product.liquid.
3. Search for the <form> tag or the Liquid statement {% form 'product' ... %}.

• Note: In the Dawn theme, this is typically found around line 425, though line numbers may vary based on your version.

To verify you are in the correct location, you can add a temporary test element (like <p>Test</p>) under the form tag and preview the theme to see if it appears on the product page.

Step 3: Add the Input Field

The magic of this customization lies in the name attribute of your HTML input. Shopify looks for inputs where the name attribute follows the syntax name="properties[Your Property Name]".

Here is an example code snippet to add a text field for a custom name (e.g., for jewelry engraving):

<div class="product-form__input">
  <label for="custom-name">Your Name Here</label>
  <input 
    id="custom-name" 
    type="text" 
    name="properties[Custom Name]" 
    form="product-form-{{ section.id }}"
  >
</div>

Key Components:

• Label: Tells the customer what to enter.
• Input Type: We use type="text" for standard text, but you can use other HTML5 input types as needed.
• Name Attribute: This must follow the format properties[Key]. The text inside the brackets is what you (and the customer) will see in the cart and order details.

Once added, click Save.

Step 4: Verify Functionality

Go to your product page and test the new field:

1. Enter a value (e.g., "Carol Smith") into your new custom field.
2. Click Add to Cart.

Most Shopify themes (including the free ones) are pre-programmed to look for these properties. If successful, you will see the custom property displayed under the product title in the cart drawer or cart page.

• Inventory Logic: If you add the same product without a custom name, Shopify treats it as a separate line item. If you add a second product with a different name (e.g., "Bob Smith"), it will also be a distinct line item.

Viewing the Data on Orders

When a customer completes a purchase, this data is passed through to the Shopify Admin.

1. Open the Order in your Shopify Admin.
2. Look at the line item details.
3. You will see the custom field (e.g., Custom Name: Carol Smith) listed directly under the product name.

For Developers: API Access

If you are integrating with third-party systems or ERPs, this data is fully accessible via the Shopify API. When fetching the order JSON, the data appears in the properties array within the line_items object:

"properties": [
  {
    "name": "Custom Name",
    "value": "Bob Smith"
  }
]

Summary

By leveraging the properties name attribute in your HTML forms, you can easily capture customer customization data. This feature works natively with the Shopify cart and checkout, ensuring that fulfillment teams have the exact details they need to personalize orders.