Skip to content

Instantly share code, notes, and snippets.

@drabbytux

drabbytux/get-customization-information-for-products.md

Last active July 26, 2023 06:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save drabbytux/024717b8c8a5968365d001a28e5b837b to your computer and use it in GitHub Desktop.
Save drabbytux/024717b8c8a5968365d001a28e5b837b to your computer and use it in GitHub Desktop.
Download ZIP
Get customization information for products
Raw
get-customization-information-for-products.md
layout title description supported nav
default
Get customization information for products
Using line item properties to get custom information for products like monograms, engravings, or other customizations.
false
group
products

{% block "note-caution" %} This document has not been verified to work with sectioned themes. We are currently reviewing our documentation and will update them soon. You can try to implement this on your theme, but keep in mind that it may not function. {% endblock %}

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.

{% include admin_sidebar/online-themes-edit-html-css.html %}

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

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

    {{ '/manual/customization/create-a-customizable-product-template.png' | image}}

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

  4. Replace the code {% section 'product-template' %} with {% section 'product-customizable-template' %}.

  5. In the Sections folder, click on Add a new section.

  6. Call it product-customizable-template and press save.

  7. Copy everything from product-template.liquid file within Sections and replace the contents of your new ``product-customizable-template`.

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

{% include admin_sidebar/online-themes-edit-html-css.html %}

  1. In the Sections section, click product-customizable-template.liquid to open the customizable product template in the code editor.

  2. In your product-customizable-template.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 (but inside the form tag), add the form fields for your product customization. {% block "note"%} If you are using the Solo theme, the form tag is contained in the single-product.liquid snippet that is linked to the product.liquid template. {% endblock %}

    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.

    {% block "note-information" %} The Shopify UI Elements Generator can help you quickly generate the form field code for a line item property. {% endblock %}

    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.

  3. 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

{% include admin_sidebar/products.html %}

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

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

  3. 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.

{% block "note-information" %} Required form fields work best if your Cart type is set to Page in the Cart page section of your theme settings. {% endblock %}

{% include admin_sidebar/online-themes-edit-html-css.html %}

  1. In the Sections section, click product-customizable-template.liquid to open the customizable product template in the code editor.

  2. 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>

  3. 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>

  4. 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.">

  5. Add a little styling code at the bottom of your product-customizable-template.liquid file:

<style>
input.error, select.error, textarea.error {
  border-color: red;
}
</style>

  1. Click Save to confirm the changes to your customizable product template.

  2. Within the Assets section, add this form validation code to the bottom of the theme.js file.

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

{% block "note-information" %} File uploads only work if your Cart type is set to Page in the Cart page section of your theme settings. {% endblock %}

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

{% include admin_sidebar/online-themes-edit-html-css.html %}

  1. In the Sections folder, click cart-template.liquid to open the cart template in the code editor.

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

    {% raw %}
{% 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 %}
{% endraw %}

  3. 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.

Update links that remove items from the cart

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

{% include admin_sidebar/online-themes-edit-html-css.html %}

  1. In the Sections folder, click cart-template.liquid to open the cart template in the code editor.

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

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

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

  5. 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:

{% include admin_sidebar/online-themes-edit-html-css.html %}

  1. In the Sections folder, click cart-template.liquid to open the cart template in the code editor.

  2. Find any input tag that has an name value of {% raw %}updates[{{ item.id }}]{% endraw %}.

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

  4. Repeat these steps for any input tag in cart.liquid that has an name value of updates[{{ item.id }}].

  5. 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.

{% include admin_sidebar/settings-notifications.html %}

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

  2. Click the Plain text email tab.

  3. In the notification template, find the code:

    {{ line.title }}
{% endraw %}```

  4. Replace that code with the following:

    {{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}
{% endraw %}```

  5. Repeat these steps for the HTML email template.

  6. 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]"
@sakur33
Copy link

sakur33 commented Jul 26, 2023

Hi. Thanks for the post!
I am unable to get the properties to show on the cart with the code u shared.
The properties are showing in the drawer cart, but not in the page cart.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment