Add a customization form to products

You can collect customization information for products using line item properties. Line item properties are custom form fields that you can add to the product page, allowing customers to make choices or add information about a product. For example, if you offer product engraving, then you can use line item properties to let customers enter the text that they want engraved on the product.

Use an app to collect customization information for products

You can install a free or paid product customization app from the Shopify App Store to easily Custom form option fields to your product page.

Edit your theme code to collect customization information for products

You can edit your theme’s code by creating an alternate product page template that Add a customization form to products, or line item properties. You can then apply your new template to any product for which you want to collect customization information for products.

Editing your theme code to add this feature

• In the Template directory, Create a new template named product.custom-field.liquid and copy all the code from product.liquid from the same directory:
• In the Section directory, find the product-template.liquidfile and locate the Add to cart button. The code for Shopify Custom form option will contain this code <button type="submit" name="add". Add the custom inputs right above the add to cart button :

      {% if template contains 'custom-field' %}

            <div class="custom-fields"  >
              <p class="line-item-property__field">
                <label for="monogram">Monogram (Short text)</label>
                <input required class="required" id="monogram"  type="text" name="properties[Monogram]" placeholder="ABC">
              </p>
              <p class="line-item-property__field">
              <label for="custom-message">Custom message</label>
              <textarea required id="custom-message" name="properties[Custom message]"></textarea>
              </p>
              <div class="line-item-property__field">
                <label>Optional features</label>
                <p class="option-container">
                <input type="checkbox" id="Feature-A" name="properties[Optional-features-Feature-A]"><label class="ep_inline_block" for="Feature-A">Feature A</label></p>
                <p class="option-container">
                <input type="checkbox" id="Feature-B" name="properties[Optional-features-Feature-B]"><label class="ep_inline_block" for="Feature-B">Feature B</label></p>
                <p class="option-container">
                <input type="checkbox" id="Feature-C" name="properties[Optional-features-Feature-C]"><label class="ep_inline_block" for="Feature-C">Feature C</label></p>
              </div>

              <div class="line-item-property__field">
                <label class="ep_block">Choose an option</label>
                <p class="option-container">
                <input required type="radio" name="properties[Choose an option]" value="Option 1">
                <span>Option 1</span>
                </p>
                <p class="option-container">
                <input required type="radio" name="properties[Choose an option]" value="Option 2">
                <span>Option 2</span>
                </p>
                <p class="option-container">
                <input required type="radio" name="properties[Choose an option]" value="Option 3">
                <span>Option 3</span>
                </p>

              </div>
              <p class="line-item-property__field">
                <label class="ep_block">Choose an option</label>
                <select required id="choose-an-option" name="properties[Choose an option]">
                <option value="Option 1">Option 1</option>
                <option value="Option 2">Option 2</option>
                <option value="Option 3">Option 3</option>
                </select>
              </p>
              {% comment %} <p class="line-item-property__field">
              <label for="custom_photo">Photo (JPG or PNG)</label>
              <input required id="custom_photo" type="file" name="properties[Photo]">
              </p> {% endcomment %}
            </div>
            <style>
             .custom-fields{
                 display:block;
              }
              .option-container{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-bottom: 0;
              }
              .option-container input{
                margin-right:10px
              }
            </style>

            {% endif %}

• In the above code, we’ve commented out the file upload code because it doesn’t work with popup cart or cart drawer. If you want to use this feature then make sure you’re not using the popup or drawer functionality for the cart.
• Tips: You can find or generate Shopify compatible input code from shopify ui element generator. This tool was created by Shopify to help simplify the process of Add a customization form to products user interface elements, such as form fields and icons, to Shopify themes.
• In the Section directory, find the cart-template.liquidfile and locate the {{ item.product.title }} then add the following code after that. Don’t add the code first, please check your cart after adding the specific Shopify Custom form option to the cart, if you don’t see the properties you’ve added then add the following code to the specific place :

                 {%- assign property_size = item.properties | size -%}
                      {%- assign properties = 'template ' | split: ' ' -%}
                      {%- if property_size > 0 -%}
                        {%- assign properties = item.properties -%}

                      {%- for p in properties -%}
                        {%- unless p.last == blank -%}
                          <li class="product-details__item product-details__item--property" data-cart-item-property>
                            <span class="product-details__item-label" data-cart-item-property-name>{{ p.first }}: </span>

                            <span data-cart-item-property-value>
                              {%- if p.last contains '/uploads/' -%}
                                <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                              {%- else -%}
                                {{ p.last }}
                              {%- endif -%}
                            </span>
                          </li>
                        {%- endunless -%}
                      {%- endfor -%}
                        {%- endif -%}

• Congrats, You’ve completed the coding parts. Now go to a random product and set the template to product.custom-field then view the product, you could see the customization form.

Enjoy this feature. 🙂