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.

Getting customization information for products

You can collect customization information for products using line item properties. Line item properties let customers add information to a product when they add it to their cart. For example, you can let a customer specify text for a monogram or engraving on the product.

You can add form fields to a product page to collect this customization information from customers. Your store will show customized products as independent items in the cart. For example, if a customer orders two shirts, one with the monogram AMH and the other with the monogram CAR, the two shirts will appear as different line items in the customer's cart.

If you want to ask customers for additional information about their entire order (not specific customizable products), you can ask them for more information on the cart page.

Get customization information for products

To let customers add customization information to products, you must make some changes to your store's products and the product template:

Create a template for customizable products

Unless your store allows customers to customize every product, you will only need to add customization fields to certain products. You can create an alternate product template to display customization fields only for certain products.

  1. From your Shopify admin, click Online Store, then click Themes (or press G W T):

    Click Online Store then Themes

  2. Find the theme you want to edit, click the button, then click Edit HTML/CSS.

    Click Edit HTML CSS button

  3. In the Templates section, click Add a new template.

  4. In the Add a New Template dialog, choose product from the drop-down menu and name the template customizable:

    Create a customizable product template

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

Next, you must add form fields to the customizable product template that will let customers add their custom information to the product.

Add customization form fields

  1. From your Shopify admin, visit the Edit HTML/CSS page.

  2. In the Templates section, click product.customizable.liquid to open the customizable product template in the code editor.

  3. In your product.customizable.liquid template, find the form tag containing the code action="/cart/add". This is the code for the Add to cart button. On a new line above the code for the Add to cart button, add the form fields for your product customization.

    For example, the following form fields add a Monogram field where customers can enter text for a monogram:

    <div>
      <label for="monogram">Monogram</label>
      <input type="text" id="monogram" name="properties[Monogram]">
    </div>
    

    You can alter the above code to fit the type of product customization you want. For example, replace all instances of monogram with engraving to let customers add an engraving note to the product. Similarly, you can add the code multiple times with different customization types to let the customer add multiple customizations.

    Information

    The Shopify UI Elements Generator can help you quickly generate the form field code for a line item property.

    The line where you place the above code determines where the form field will appear on your product page. Since each theme displays the product page differently, you may need to experiment with putting the code in different places to find what works for you.

  4. Click Save to confirm the changes to your product template.

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.

Set customizable products to use the new template

  1. From your Shopify admin, click Products (or press G P P):

    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 to confirm the changes to the product.

The customization 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.

Your customers can now add customization information to any products that use your customizable template.

Make customization form fields required

If you want customization form fields to be required, you can prevent customers from completing an order unless the form fields are completed.

Information

Required form fields work best if your Cart type is set to Page in the Cart page section of your theme settings.

  1. From your Shopify admin, click Online Store, then click Themes (or press G W T):

    Click Online Store then Themes

  2. Find the theme you want to edit, click the button, then click Edit HTML/CSS.

    Click Edit HTML CSS button

  3. In the Templates section, click product.customizable.liquid to open the customizable product template in the code editor.

  4. Find any customization form fields that you added in the add customization form fields section. For example, the form field code for a monogram looks like this:

    <div>
      <label for="monogram">Monogram</label>
      <input type="text" id="monogram" name="properties[Monogram]">
    </div>
    
  5. Add a required attribute to the input tag in your form field code. For example, the form field code for a monogram that is required looks like this:

    <div>
      <label for="monogram">Monogram</label>
      <input required type="text" id="monogram" name="properties[Monogram]">
    </div>
    
  6. You can add a data-error attribute to the input element to specify a custom error message that will be shown to users in certain browsers, for example:

    <input required type="text" id="monogram" name="properties[Monogram]" data-error="Please enter a monogram.">
    
  7. Click Save to confirm the changes to your customizable product template.

  8. In the Layout section, click theme.liquid to open your theme template in the code editor.

  9. Find the </body> tag near the end of the theme.liquid file.

  10. On a blank line above the </body> tag, copy and paste this form validation code.

  11. Click Save to confirm the changes to your theme template.

Your customers will now be notified if they try to add products to the cart without completing required form fields.

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.liquid contains a file upload field, the form tag in your customizable product template must have the attribute enctype="multipart/form-data".

Information

File uploads only work if your Cart type is set to Page in the Cart page section of your theme settings.

Show customizations in the cart

Some themes already show customizations on the cart page.

Show customizations in the cart Do not show customizations in the cart
  • Brooklyn
  • Classic
  • New Standard
  • React
  • Solo
  • Supply
  • Kickstand
  • Lookbook
  • Minimal
  • Pop
  • Simple

If your theme doesn't display customizations in the cart, 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

  1. From your Shopify admin, click Online Store, then click Themes (or press G W T):

    Click Online Store then Themes

  2. Find the theme you want to edit, click the button, then click Edit HTML/CSS.

    Click Edit HTML CSS button

  3. In the Templates section, click cart.liquid to open the cart template in the code editor.

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

    {% assign property_size = item.properties | size %}
    {% if property_size > 0 %}
      {% 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 %}
    {% endif %}
    
  5. Click Save to confirm your changes to the cart template.

This code checks each line item to see if it has any customization 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. From your Shopify admin, click Online Store, then click Themes (or press G W T):

    Click Online Store then Themes

  2. Find the theme you want to edit, click the button, then click Edit HTML/CSS.

    Click Edit HTML CSS button

  3. In the Templates section, click cart.liquid to open the cart template in the code editor.

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

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

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

  7. Click Save to confirm your changes to the cart template.

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. From your Shopify admin, click Online Store, then click Themes (or press G W T):

    Click Online Store then Themes

  2. Find the theme you want to edit, click the button, then click Edit HTML/CSS.

    Click Edit HTML CSS button

  3. In the Templates section, click cart.liquid to open the cart template in the code editor.

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

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

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

  7. Click Save to confirm your changes to the cart template.

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. From your Shopify admin, click Settings, then click Notifications (or press G S N):

    Click Settings then Notifications

  2. Click the name of the notification template that you would like to add line item properties to.

  3. Click the Plain text email tab.

  4. In the notification template, find the code:

    {{ line.title }}
    
  5. Replace that code with the following:

    {{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}
    
  6. Repeat these steps for the HTML email template.

  7. Click Save to confirm your changes to the email template.

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

Hide line item properties

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 may 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 (or a customization) to be hidden on the cart or checkout pages, 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]"
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.