How to Create Custom Product Fields for Product Properties

As a merchant, you may want to create custom fields for your products to collect additional information from customers. E.g. you may want to collect a text for a product customisations (engraving, prints, embroidery etc.)

You have 2 options:

1. Utilize an app

2. Modify your theme's Liquid code

We'll go through both options in the following.

Option 1: Use an App

Use an app like Product Options Pro or Yml Options, which we support out of the box. You can refer to their documentation for the setup.

Option 2: Modify Liquid Code

This guide will show you how to create a custom field using Liquid and ensure the field is correctly formatted to be picked up by EliteCart and forwarded to your Shopify checkout and your store's backend.

Step 1: Understanding the data-name Attribute

When creating custom fields, you need to use the name or data-name attribute with the format properties[XXX], where XXX is the name of the property you want to create. This format is generally used by Shopify theme developers and required by EliteCart.

Step 2: Adding Custom Fields in Liquid

To add a custom field, you will modify your product template using Liquid. Here is an example of how to create a custom text input field for collecting additional information from the customer:

<!-- Custom Text Input Field --> 
<div class="custom-field"> 
<label for="custom-text-input">Enter additional information:</label> <input type="text" id="custom-text-input" name="custom-text-input" data-name="properties[custom-text-input]"> 
</div>

In this example:

• id="custom-text-input": The ID for the input element.

• name="custom-text-input": The name for the input element.

• data-name="properties[custom-text-input]": The custom property format required by the backend.

Step 3: Implementing the Custom Field in Your Product Form

Make sure the custom field is included within the product form. This ensures the data is captured and sent when the product is added to the cart.

Here's an example of a product form with a custom field:

<form action="/cart/add" method="post" enctype="multipart/form-data"> 
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}"> 
<!-- Other product form fields like quantity, options, etc. --> 

<!-- Custom Text Input Field --> 
<div class="custom-field"> 
<label for="custom-text-input">Enter additional information:</label> 
<input type="text" id="custom-text-input" name="custom-text-input" data-name="properties[custom-text-input]"> 
</div> 
<button type="submit">Add to Cart</button> 
</form>

Step 4: Testing Your Custom Field

After adding the custom field to your product template, test it to ensure it works correctly:

1. Go to a product page and fill in the custom field.

2. Add the product to the cart.

3. Check the cart to ensure the custom field data is included.

Additional Custom Fields

You can create various types of custom fields using the same approach. Here are a few examples:

Custom Select Dropdown:

<div class="custom-field"> 
<label for="custom-select">Choose an option:</label> 
<select id="custom-select" name="custom-select" data-name="properties[custom-select]"> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> 
</select> 
</div>

Custom Checkbox:

<div class="custom-field"> 
<label for="custom-checkbox"> 
<input type="checkbox" id="custom-checkbox" name="custom-checkbox" data-name="properties[custom-checkbox]"> Check this box 
</label> 
</div>

By following these steps, you can easily add custom fields to your product forms using Liquid, helping you gather additional information from your customers and tailor their shopping experience.