Adding line item properties for personalization to your Shopify site

For some products in your store, you may want to capture other form-like information from the customer such as custom monogram/engraving text or a choice of colour in which inventory doesn't need to be kept. These fields are called line item properties and can be used to allow customers to make choices or add information about a product.

This post will take you through how to add line item properties to a new product page template, as well as how to make the names of these new properties customizable by adding them as Theme Settings. By the end of this post, you will have a product page with custom required inputs for colour and an optional monogram that will look something like this:

Creating an alternate product page template

First, let's create a new product page template that includes our new line item properties. Once created, you'll be able to apply the new template to any products you'd like these custom options to appear on.

From your desktop device:

From your Shopify admin, go to Online Store > Themes. Find the theme you want to edit, and then click Actions > Edit code.
In the Templates directory, click Add a new template.
Choose product from the drop-down menu, and name the template personalize:
Click Create template. This creates a copy of your product.liquid template called product.personalize.liquid. The new file will open in the code editor.
Find the following line of code:

{% section 'product-template' %}

Replace it with:

{% section 'product-personalize-template' %}

Click Save.
In the Sections directory, click Add a new section.
Name your new section file product-pesonalize-template. Click Create section. Your new file will open in the code editor.
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.
Click Save.

Adding custom form fields to your template

We'll be adding two fields in this example: the first is a dropdown menu for the user to pick from different required colour options and the second is an optional field which we will use to capture a custom 3 letter monogram if the user wants. The reason we're not just using a variant to display the colour selection here, is that we don't need to track inventory on each individual colour in this scenario. In the end, both required and optional fields will be customizable to be whatever values you would like but for this example we'll stick to colour values and monograms.

Note that you can create whatever custom fields you'd like using Shopify UI Elements Generator, however this example will walk through creating the specific fields outlined above.

From your Shopify admin, go to Online Store > Themes. Find the theme you want to edit, and then click Actions > Edit code.
In the Sections directory, click product-personalize-template.liquid.
Go here and copy the code to your clipboard.
This next part can be a little tricky as everyone's product templates are structured a little differently. In our case, we want to put both of these custom fields directly above the main quantity input box. Find the code id="Quantity" in the template file and place the form code you copied in step 3 on a new line above the block of code that contains the quantity box. Note in the diagram below, the code beside the pink vertical line is our new form fields, and the code beside the green line is the quantity box code block:

If you don't have the same quantity input as the example above, a good bet is to place it above the add to cart button which can be found by searching for the code type="submit".

Click Save

Apply your new template to a product

We now want to apply our new template to one of our products.

From your Shopify admin, go to Products.
Click the name of the product that will use your new template.
In the Theme templates section, choose product.personalize from the Product template menu.
Click Save.
You'll note that it doesn't quite look right on the front end and fields are blank. We still need to set up the Theme Settings so that we can allow the user to populate these values easily without having to dig into the code themselves evertime they want to make changes.

Adding theme settings for the names of the custom inputs

Let's add some settings specifically for the product-personalize-template.liquid that will appear in Theme Settings so our user can modify the title of the dropdown, the name of each dropdown option, and the title for our monogram option. Our goal is to get some settings that look like this:

Still viewing product-personalize-template.liquid in the code editor, scroll down until you hit a tag called {% schema %}.
Go here and copy the code to your clipboard.
Under the {% schema %} tag, find the settings array. It should look something like this:

"settings": [
{
  ...
}
]

Within that array, find the first { and paste the code copied in Step 2 above it.

"settings": [
{
"type": "header",
"content": {
"en": "Personalization Options"
}
},
{
"type": "text",
"id": "dropdown_name",
"label": "Dropdown Label"
},
...
{
...
}
]

Click Save
Navigate back to Online Store > Themes, and click Customize on the theme you want to edit.
Within the website preview on the right hand side of the window, navigate to the product you applied the personalization template to. Remember our new theme settings will only show up when the personalization template is being used due to the fact that we applied the schema settings directly to that template instead of globally.
Once on the product page, under Sections click on the Product Pages label

You should now see your settings near the top of the list in the sidebar. You can give the dropdown a label, type in dropdown options separated by commas, and label the monogram option.
Click Save

Enjoy! 🎉

We only breifly touched on Theme Settings in this post. If you want to learn more about Theme Settings and how they are configured, the Shopify Documentation is a great resource for that

CarsonBain/shopify-line-item-props.md