Shopify themes, liquid, logos, and UX
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.
Tip: Line item properties are different from order notes and cart attributes. Order notes, which are available in every free Shopify theme, let you capture special instructions on how to prepare and deliver an order. Cart attributes are specified by customers on the cart page, and are used to record additional information about an entire order.
TyW | Online Community Manager @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Sectioned themes
You can install a free or paid product customization app from the Shopify App Store to easily add custom fields to your product page.
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.
To create a new product page template:
customizable
:product.liquid
template called product.customizable.liquid
. The new file will open in the code editor.{% section 'product-template' %}
Replace it with:
{% section 'product-customizable-template' %}
product-customizable-template
. Click Create section. Your new file will open in the code editor.product-template.liquid
file (in the Sections directory), and paste it into your new product-customizable-template file.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.
To add custom form fields to your template:
product-customizable-template.liquid
.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: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.
To apply a template to a product:
product.customizable
from the Product template menu.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.
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"
.
Note: File uploads will work only on a page style cart, and are not compatible with cart drawers or cart popups. To change your cart style, go to the theme editor.
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.
To show product customization information in the cart:
cart-template.liquid
. If your theme doesn't have a cart-template.liquid
, then open the Templates directory and click cart.liquid
.{{ 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 %}
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:
cart-template.liquid
. If your theme doesn't have a cart-template.liquid
, then open the Templates directory and click cart.liquid
.a
tag that has an href
value starting with /cart/change.
href
value to href="/cart/change?line={{ forloop.index }}&quantity=0"
.a
tag in cart-template.liquid
that has an href
value starting with /cart/change
.Any fields that display item quantities in your cart will also need to be updated to work with custom line item properties:
cart-template.liquid
. If your theme doesn't have a cart-template.liquid
, then open the Templates directory and click cart.liquid
.input
tag that has a name
value of updates[{{ item.id }}]
.name
value to name="updates[]"
.input
tag in cart-template.liquid
that has a name value of updates[]
.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.
{{ line.title }}Replace it with:
{{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}
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 %}
Line item properties will only be visible to customers during checkout if they are stored as a string. Numbers will be hidden, though they will still be tied to the order and show up in the Admin > Orders screen. For example:
line_item_prop: "1234"
(will be visible on the Order and during checkout)line_item_prop: 1234
(will be visible on the Order and hidden during checkout)For context, this was introduced as a feature because line item properties were often used to store IDs which were not intended to be customer-facing. So theme developers can hide line item properties during checkout by storing them as an integer or a string with an underscore at the beginning.
TyW | Online Community Manager @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
You can install a product customization app from the Shopify App Store to easily add custom fields to your product page.
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.
To create a new product page template:
customizable
:product.liquid
template called product.customizable.liquid
.
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.
To add custom form fields to your template:
product.customizable.liquid
.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: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.
To apply a template to a product:
product.customizable
from the Product template menu.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.
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"
.
Note: File uploads will work only on a page style cart, and are not compatible with cart drawers or cart popups. To change your cart style, go to the theme editor.
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.
To show product customization information in the cart:
cart.liquid
.{{ 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 %}
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:
cart.liquid
.a
tag that has an href
value starting with /cart/change
.href
value to href="/cart/change?line={{ forloop.index }}&quantity=0"
.a
tag in cart.liquid
that has an href
value starting with /cart/change
.
Any fields that display item quantities in your cart will also need to be updated to work with custom line item properties:
cart.liquid
.updates[{{ item.id }}]
.name="updates[]"
.input
tag in cart.liquid
that has an name value of updates[]
.
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.
{{ line.title }}
{{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}
Repeat these steps for any other email notifications that you want to include 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 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 %}
Line item properties will only be visible to customers during checkout if they are stored as a string. Numbers will be hidden, though they will still be tied to the order and show up in the Admin > Orders screen. For example:
line_item_prop: "1234"
(will be visible on the Order and during checkout)line_item_prop: 1234
(will be visible on the Order and hidden during checkout)For context, this was introduced as a feature because line item properties were often used to store IDs which were not intended to be customer-facing. So theme developers can hide line item properties during checkout by storing them as an integer or a string with an underscore at the beginning.
TyW | Online Community Manager @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
I think this is a very nice tutorial for what I would like to do.
However there is no
type="submit"
in my files:
product-customizable-template.liquid product.customizable.liquid
Maybe Shopify has changed since this tutorial and I will have to find this somewhere else?
Edit: I found it in the "Snippets" directory, in the "product-info.liquid" file
Thank you for this tutorial--it was very helpful and solved a problem. However when I apply these changes, while functionally it works, the newly added fields to not align properly. Do you have an easy to follow recommendation on how to ensure these line up properly?
As another commenter mentioned, there was no [type="submit"] in my particular theme code. I did find the button code and added it above that block of code. It did add the needed fields in the general area, but the already existing Size drop down is throwing the alignment off.
hi everyone !
How can i do for get multiples files in my orders ?
thank's
BTW, a very critical missing piece of this is if you want the fields to be required (i.e. have to have data) you have to do one more step not mentioned:
See here for details:
I could not find the "submit" or "button" words in my code. I tried pasting the generated code in a few places but would not work. Any ideas?
That appears to be old code, try searching for this instead:
<button type="submit" name="add" id="AddToCart"
type="submit"
may not live in the product template directly. It often lives within one of the snippet files that the product template is using.
{% render ‘snippet name’ %}
Can someone update the code as this is not updated to work and the comments are still not working for me. Thank you!
Hello, I am using the Debut theme and not finding the "submit" in my code to be able to add customization. I also want to be clear on what info I am removing when added the new code under Sections. Thank you!
Hi @minniebox it's tough to add a tutorial that works for every theme because every theme is different. I downloaded the most recent version of Debut, and I found the type="submit"
in the "sections/product-template.liquid" theme file (within the Sections folder here):
For context, I can see that the product template is rendering two section files with the following code (within"layouts/product.liquid"):{% section 'product-template' %}
{% section 'product-recommendations' %}
That's why I searched for type="submit"
in the "sections/product-template.liquid" theme file 🙂
Hello,
I made it work on my product page and I can see the "Engraving" Section on my product page however, after receiving the order, I cant see it in my order details so I dont know where does this section locate to when customers fill it in.
Can anyone help me with that as well ?
P.s. I have done everything with the Carts and updated the necessary codes.
Best,
Abdulkadir
I am having this same issue. How can I make the field the same size as the "Size" field in the example picture provided?
@coollyguy assuming the engraving option has been added to the product form correctly, and engraving information is provided before adding the item to the cart, the line item properties will show up in the Order screen (in the Admin > Orders section) under each item that has been "engraved" 🙂
@anywilldo the form inputs that you add to the product template are styled with CSS classes. You'll need to add the right class
from your existing theme to the new inputs if you want them styled the same. Every theme is different, so I can't provide a blanket answer here, but you can see what classes and styles are being used within your existing product template, or within your browser's developer tools. Here's a beginner's guide for web developers on changing the webpage with CSS where you can inspect the class
of the existing form elements.
If that's a little too advanced, I'd suggest reaching out to a Shopify Expert who can ensure the line item properties are properly coded, stored on each order and styled with the rest of your theme 🙂
THANK YOU @stratify ! I was able to accomplish what I need with the following butttt I don't understand why I have to have the product-form__item class at the div level and the product-form__input at the object level (select and input). Is there a cleaner way to do this? I'm using the Debut 16.4.0 theme
<div class="product-form__controls-group">
<div class="selector-wrapper product-form__item">
<label for="options"</label>
<select id="options" name="properties[Options]" required class="required product-form__input">
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
</select>
</div>
<div class="selector-wrapper product-form__item">
<label for="line1"></label>
<input id="line1" type="text" name="properties[Line 1]" maxlength="11" class="product-form__input required" required placeholder="Line 1">
</div>
<div class="selector-wrapper product-form__item">
<label for="line2"></label>
<input id="line2" type="text" name="properties[Line 2]" maxlength="11" class="product-form__input" placeholder="Line 2 (optional)">
</div>
</div>
I'm happy to help! Every theme is different and therefore has a specific structure that should be followed. The reason you're seeing specific elements within elements is because most Shopify themes follow the BEM (Block, Element, Modifier) naming convention, which is very helpful for scaffolding reusable theme files and elements. You can always add your own CSS styles to whatever elements you'd like! But it's best to follow the existing CSS/HTML structure, to avoid styles overlapping and causing some unexpected, hair-pulling frustration...
Not really a CSS question, however having successfully added the file upload functionality to a specific product template, it now then blocks out the variant options once a file is selected to upload. Not sure what/why this is triggered. I have moved the upload file option lower down the page to hopefully get user to make selections, however it is frustrating that once a file is uploaded, the variant options are then not available to be altered. https://www.catfishdesigns.com.au/products/greatnessheatherteels
User | RANK |
---|---|
178 | |
155 | |
76 | |
31 | |
31 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023