Get customization information for products with line item properties

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

You can collect customization information for products using line item properties. Line item properties are custom form fields that you can add to the product page, allowing customers to make choices or add information about a product. For example, if you offer product engraving, then you can use line item properties to let customers enter the text that they want engraved on the product.

Line item property

Use an app to collect customization information for products

You can install a free or paid product customization app from the Shopify App Store to easily add custom fields to your product page.

Edit your theme code to collect customization information for products

You can edit your theme's code by creating an alternate product page template that includes custom form fields, or line item properties. You can then apply your new template to any product for which you want to collect customization information from customers.

Create a template that includes line item properties

To create a new product page template:

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Templates directory, click Add a new template.

  3. Choose product from the drop-down menu, and name the template customizable:

    Create a new template
  4. Click Create template. This creates a copy of your product.liquid template called product.customizable.liquid. The new file will open in the code editor.

  5. Find the following line of code:

    {% section 'product-template' %}
    

    Replace it with:

    {% section 'product-customizable-template' %}
    
  6. Click Save.

  7. In the Sections directory, click Add a new section.

  8. Name your new section file product-customizable-template. Click Create section. Your new file will open in the code editor.

  9. Delete all of the default code so that the file is empty. Copy all of the content from your product-template.liquid file (in the Sections directory), and paste it into your new product-customizable-template file.

  10. Click Save.

Create custom form fields

You can add as many custom form fields to your product page as you need. You can use the Shopify UI Elements Generator tool to easily generate the HTML and Liquid code for each form field that you want to add to your cart page. This tool was created by Shopify to help simplify the process of adding custom user interface elements, such as form fields and icons, to Shopify themes.

  1. Go to the Shopify UI Elements Generator.

  2. In the Set your form field section, select the type of form element that you want to use from the Type of form field drop-down menu:

    Types of form fields
  3. If you want your theme to prevent customers from adding a product to the cart before they have filled in your form field, check Required.

  4. You can see a preview of your form field in the Preview section:

    Line item property preview
  5. Copy the generated code from the box in the Grab your code section:

    Grab your code

Add custom form fields

To add custom form fields to your template:

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Sections directory, click product-customizable-template.liquid.

  3. Find the code type="submit" in the file. This is part of the code for the Add to cart button. On a new line above the block of code that contains the Add to cart button, paste the form fields for your product customization:

    Line item property placement

    In the above example, the form field code adds an Engraving field where customers can enter text for a custom engraving. The line where you place the code determines where the form field will appear on your product page. You can experiment with putting the code in different places in the file.

  4. Click Save.

To make the new form fields appear on product pages, you need to set your customizable products to use the new product-customizable-template.liquid template that you created.

Apply your new template to a product

To apply a template to a product:

  1. From your Shopify admin, click Products.

  2. Click the name of the product that will use your new template.

  3. In the Theme templates section, choose product.customizable from the Product template menu.

  4. Click Save.

The custom form fields that you created will now appear on that product's page. Repeat the steps to enable the template on multiple products. You can use the bulk editor to enable your template on many products at once.

Allow file uploads

If you create a form field input with type="file", then the customer's browser will show a file upload button for that form field. As a store owner, you can view any files that your customers upload. Letting customers upload files allows for some creative store ideas — like printing customer artwork onto canvas or accepting custom graphics to print on clothing.

If the form in your product-template.liquid contains a file upload field, the form tag in your customizable product template must have the attribute enctype="multipart/form-data".

Show customizations in the cart

If your theme doesn't display customizations in the cart, then you can add some code to either your cart-template.liquid, or your cart.liquid file to check for line item properties and display them if they exist.

Show line item properties in the cart

To show product customization information in the cart:

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Sections directory, click cart-template.liquid. If your theme doesn't have a cart-template.liquid, then open the Templates directory and click cart.liquid.

  3. Find the line containing the code {{ item.product.title }}. On a new line below, paste the following code:

    {% assign property_size = item.properties | size %}
    {% if property_size > 0 %}
      {% for p in item.properties %}
        {% assign first_character_in_key = p.first | truncate: 1, '' %}
        {% unless p.last == blank or first_character_in_key == '_' %}
          {{ 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 %}
    {% endif %}
    
  4. Click Save.

This code checks each line item to see if it has any line item properties, and displays them if they exist.

Any links that remove items from your cart will need to be updated to work with custom line item properties:

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Sections directory, click cart-template.liquid. If your theme doesn't have a cart-template.liquid, then open the Templates directory and click cart.liquid.

  3. Find any a tag that has an href value starting with /cart/change.

  4. Change the full href value to href="/cart/change?line={{ forloop.index }}&quantity=0".

  5. Repeat these steps for every a tag in cart-template.liquid that has an href value starting with /cart/change.

  6. Click Save.

Update item quantity fields in the cart

Any fields that display item quantities in your cart will also need to be updated to work with custom line item properties:

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Sections directory, click cart-template.liquid. If your theme doesn't have a cart-template.liquid, then open the Templates directory and click cart.liquid.

  3. Find any input tag that has an name value of updates[{{ item.id }}].

  4. Change the full name value to name="updates[]".

  5. Repeat these steps for any input tag in cart-template.liquid that has an name value of updates[].

  6. Click Save.

Show customizations in email templates

You can optionally also display line item properties in email notifications. This will let customers see their product customizations when they receive an email about their order.

  1. Click the name of the notification template that you want to add line item properties to.

  2. Find the following code:

    {{ line.title }}
    

    Replace it with:

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

Repeat these steps for any other email notifications that you want to include line item properties.

Hide line item properties (optional)

Line item properties that you have built into your customizable product templates are visible on your product pages and, if you have customized your cart code, on your cart page as well. Line item properties are also visible on the checkout page. There might be times when you do not want a line item property to be visible to the customer, for example, if you want to attach some internal information (such as a bundle ID or tracking number) to a product.

If you want a line item property to be hidden on the cart or checkout pages, then you can place an underscore _ at the beginning of its name value. For example, the name value for an internal Bundle ID might look like this:

name="properties[_bundle_id]"

If you did not use the code in this tutorial to show line item properties (or customizations) in the cart, then your theme code might not include the code that keeps line item properties with name values beginning with an underscore hidden. To modify your theme code to hide line item properties in the cart, you can add the following lines of code to your cart-template.liquid or cart.liquid file:

{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}

The results should look similar to this:

{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
  {% for p in item.properties %}
    {% assign first_character_in_key = p.first | truncate: 1, '' %}
    {% unless p.last == blank or first_character_in_key == '_' %}
      {{ p.first }}:
      {% if p.last contains '/uploads/' %}
        <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
      {% else %}
        {{ p.last }}
      {% endif %}
    {% endunless %}
  {% endfor %}
{% endif %}

Use an app to collect customization information for products

You can install a product customization app from the Shopify App Store to easily add custom fields to your product page.

Edit your theme code to collect customization information for products

You can edit your theme's code by creating an alternate product page template that includes custom form fields, or line item properties. You can then apply your new template to any product for which you want to collect customization information from customers.

Create a template that includes line item properties

To create a new product page template:

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Templates directory, click Add a new template.

  3. Choose product from the drop-down menu, and name the template customizable:

    Create a new template
  4. Click Create template. This creates a copy of your product.liquid template called product.customizable.liquid.

Create custom form fields

You can add as many custom form fields to your product page as you need. You can use the Shopify UI Elements Generator tool to easily generate the HTML and Liquid code for each form field that you want to add to your cart page. This tool was created by Shopify to help simplify the process of adding custom user interface elements, such as form fields and icons, to Shopify themes.

  1. Go to the Shopify UI Elements Generator.

  2. In the Set your form field section, select the type of form element that you want to use from the Type of form field drop-down menu:

    Types of form fields
  3. Check Required if you want your theme to prevent customers from adding a product to the cart before they have filled in your form field.

  4. You can see a preview of your form field in the Preview section:

    Line item property preview
  5. Copy the generated code from the box in the Grab your code section:

    Grab your code

Add custom form fields

To add custom form fields to your template:

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Templates directory, click product.customizable.liquid.

  3. Find the code type="submit" in the file. This is part of the code for the Add to cart button. On a new line above the block of code that contains the Add to cart button, paste the form fields for your product customization:

    Line item property placement

    In the above example, the form field code adds an Engraving field where customers can enter text for a custom engraving. The line where you place the code determines where the form field will appear on your product page. You can experiment with putting the code in different places in the file.

  4. Click Save.

To make the new form fields appear on product pages, you need to set your customizable products to use the new product.customizable.liquid template that you created.

Apply your new template to a product

To apply a template to a product:

  1. From your Shopify admin, click Products.

  2. Click the name of the product that will use your new template.

  3. In the Theme templates section, choose product.customizable from the Product template menu.

  4. Click Save.

The custom form fields that you created will now appear on that product's page. Repeat the steps to enable the template on multiple products. You can use the bulk editor to enable your template on many products at once.

Allow file uploads

If you create a form field input with the attribute type="file", then the customer's browser will show a file upload button for that form field. As a store owner, you can view any files that your customers upload. Letting customers upload files allows for some creative store ideas — like printing customer artwork onto canvas or accepting custom graphics to print on clothing.

If the form in your product-template.liquid contains a file upload field, the form tag in your customizable product template must have the attribute enctype="multipart/form-data".

Show customizations in the cart

If your theme doesn't display customizations in the cart, then you can add some code to your cart.liquid file to check for line item properties and display them if they exist.

Show line item properties in the cart

To show product customization information in the cart:

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Templates directory, click cart.liquid.

  3. Find the line containing the code {{ item.product.title }}. On a new line below, paste the following code:

    {% assign property_size = item.properties | size %}
    {% if property_size > 0 %}
      {% for p in item.properties %}
        {% assign first_character_in_key = p.first | truncate: 1, '' %}
        {% unless p.last == blank or first_character_in_key == '_' %}
          {{ 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 %}
    {% endif %}
    
  4. Click Save.

This code checks each line item to see if it has any line item properties, and displays them if they exist.

Any links that remove items from your cart will need to be updated to work with custom line item properties:

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Templates directory, click cart.liquid.

  3. Find any a tag that has an href value starting with /cart/change.

  4. Change the full href value to href="/cart/change?line={{ forloop.index }}&quantity=0".

  5. Repeat these steps for every a tag in cart.liquid that has an href value starting with /cart/change.

  6. Click Save.

Update item quantity fields in the cart

Any fields that display item quantities in your cart will also need to be updated to work with custom line item properties:

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Templates directory, click cart.liquid.

  3. Find any input tag that has an name value of updates[{{ item.id }}].

  4. Change the full name value to name="updates[]".

  5. Repeat these steps for any input tag in cart.liquid that has an name value of updates[].

  6. Click Save.

Show customizations in email templates

You can optionally also display line item properties in email notifications. This will let customers see their product customizations when they receive an email about their order.

  1. Click the name of the notification template that you want to add line item properties to.

  2. Find the following code:

    {{ line.title }}
    

    Replace it with:

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

Repeat these steps for any other email notifications that you want to include line item properties.

Hide line item properties (optional)

Line item properties that you have built into your customizable product templates are visible on your product pages and, if you have customized your cart code, on your cart page as well. Line item properties are also visible on the checkout page. There might be times when you do not want a line item property to be visible to the customer, for example, if you want to attach some internal information (such as a bundle ID or tracking number) to a product.

If you want a line item property to be hidden on the cart or checkout pages, then you can place an underscore _ at the beginning of its name value. For example, the name value for an internal Bundle ID might look like this:

name="properties[_bundle_id]"

If you did not use the code in this tutorial to show line item properties (or customizations) in the cart, then your theme code might not include the code that keeps line item properties with name values beginning with an underscore hidden. To modify your theme code to hide line item properties in the cart, you can add the following lines of code to your cart.liquid file:

{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}

The results should look similar to this:

{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
  {% for p in item.properties %}
    {% assign first_character_in_key = p.first | truncate: 1, '' %}
    {% unless p.last == blank or first_character_in_key == '_' %}
      {{ p.first }}:
      {% if p.last contains '/uploads/' %}
        <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
      {% else %}
        {{ p.last }}
      {% endif %}
    {% endunless %}
  {% endfor %}
{% endif %}

Want to discuss this page?

Visit the Shopify Community