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>
  </select>
</p>

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>
    </select>
  </div>
</div>

 

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