Custom Line Item Properties in Shopify

Shopify lets users add custom options to products with a feature called Line Item Properties, this is a separate feature from variants but can be useful when you are faced with multiple options for a product at single prince point.

For example, a box of 4 Christmas bauble at £15, with a choice of 4 different baubles.

To use this technique the input must be within the {% form %} element of the template

In the code below the product.tags used is to define how many Line Item Properties there will be, in this example there is 4 baubles so we'll use the tag 'x_4'. Using the 'remove' filter we strip away the prefix, however liquid will still read this as a string so the 'times' filter is used to convert the string into an integer, this will be used to define the limit for a loop that will output the drop-down select inputs.

{% assign lip = tag | remove: 'x_' | times: 1 %}

For the options that will appear in the drop-down, we will use the prefix 'o_' and then the name of the option as it will appear in the drop-down e.g 'o_dog' will appear in the drop-down as dog. The options will be in a select element with the name 'properties[]', it is important to note that this is an array that will hold all the custom information about our product so this must be incremented when used in a loop, or have individual keys when used for multiple static inputs, the key will also be displayed at checkout and in order details.

{% for tag in product.tags %}
    {% if tag contains 'x_'%}
        {% assign lip =  tag | remove: 'x_' | times: 1 %}
    {% endif %}
{% endfor %}

{% for i in (1..lip) %}
    <label>Option {{i}}
        <select id="lip{{i}}" name="properties[Option {{i}}]"  required >
            <option selected disabled hidden >Please select an option</option>
            {% for tag in product.tags%}
                {% if tag contains 'o_' %}
                    <option value="{{ tag | remove: 'o_' }}">{{ tag | remove: 'o_' }}</option>
                {% endif %}
            {% endfor %}
        </select>
    </label>
{% endfor %}