Home / Shopify DIY / Adding Line Item Properties in Dawn without editing the theme code

Adding Line Item Properties in Dawn without editing the theme code

Since Shopify released 2.0 themes, we try (wherever possible) not to edit theme code unless it's absolutely necessary. This makes it easier for our clients to manage theme upgrades themselves and reduces their reliance on a developer for basic maintenance.

Shopify's Line item Properties generator is great for generating the input fields you need.  We then need to do a little bit of editing to get it to match Dawn's styling. Finally we include it as a custom liquid block on the product page, passing in the form id so that it gets correctly submitted to cart.

In this example we are creating a Select Field.  Using the generator, our generated code looks like this:
<p class="line-item-property__field">
<label>Your name</label><br>
<select name="properties[Color]" id="color" class="required" required="">
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>

First we're going to remove the p tag, add a couple of divs and adjust the classes classes to make it match the select field classes in Dawn:

{%- assign product_form_id = 'product-form-' | append: section.id -%}
<div class="product-form__input product-form__input--dropdown">
<label class="form__label" for="color">Color</label>
<div class="select">
<select required class="required select__select" id="color" name="properties[color]" form="{{ product_form_id }}">
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>


Now we just copy/paste that into a liquid block on the product information section on a product template:

Shopify Liquid section for Line Item Select Property 1/2



Shopify Liquid section for Line Item Select Property 2/2
The line item property now shows up on the product page and is submitted to the cart, even if you're using the ajax cart.

Now the client can upgrade their theme without fear of losing the changes we made   We keep all our changes in Git (version control) so we always have a record of the changes in case of any issues (e.g. someone accidentally deletes or changes the section).

If you need help adding line item properties to your Shopify store, get in touch.
Back to blog

Leave a comment

Please note, comments need to be approved before they are published.