Product pages - Get customization information for products

Store Design

Topic summary

Core Topic:
Implementing line item properties on Shopify product pages to collect customer customization information (e.g., engraving text, personalization details, file uploads).

Key Implementation Steps:

  • Create alternate product templates (product.customizable.liquid) with custom form fields
  • Add HTML input elements with name="properties[Field Name]" syntax
  • Use Shopify UI Elements Generator tool for generating form field code
  • Ensure inputs are placed inside product <form> tags or use HTML5 form attribute

Common Technical Challenges:

  • Theme compatibility: Tutorial designed for older sectioned/non-sectioned themes; newer themes (Dawn, OS 2.0) use .json templates requiring different approaches
  • Missing quantity selectors: Custom fields sometimes hide quantity pickers; fix by enabling “Show quantity selector” in theme settings
  • “Submit” button location: Varies by theme; often found in snippets (product-info.liquid, product-form.liquid) rather than main template
  • Quick view/Buy Now buttons: May bypass required customization fields; requires separate implementation

Data Visibility & Export:

  • Line item properties stored as strings appear at checkout; integers/underscore-prefixed values hidden from customers but visible in admin
  • Properties visible in Admin > Orders but not automatically included in standard CSV exports
  • Third-party apps (EZ Exporter, Mechanic) recommended for bulk data extraction

Current Status:
Thread remains active with ongoing troubleshooting for OS 2.0 themes. Many users successfully implement basic text fields but struggle with advanced features (conditional logic, file uploads, styling consistency). Official Shopify support explicitly not provided for this customization.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
109

Hi Paul, could you assist on how to have my 3 options to be on the same line? Also, I would like the dropdown box background colour to be #000000 with the words in #FAEBD7. Thank you in advance!

Screenshots:

Untitled.png
Untitled.png973×747 22.2 KB

Code:

			<p class="line-item-property__field">
  			<label>Canned Cocktail #1</label><br>
 			<select required class="required" id="canned-cocktail-1" name="properties[Canned Cocktail #1]">
    		<option value="Orh Huey">Orh Huey</option>
    		<option value="Ju Hua">Ju Hua</option>
    		<option value="Espresso Martini">Espresso Martini</option>
    		<option value="Skittles">Skittles</option>
    		<option value="White Sangria">White Sangria</option>
    		<option value="Red Sangria">Red Sangria</option>
  			</select>
			</p>
          <p class="line-item-property__field">
  <label>Canned Cocktail #2</label><br>
  <select required class="required" id="canned-cocktail-2" name="properties[Canned Cocktail #2]">
    <option value="Orh Huey">Orh Huey</option>
    <option value="Ju Hua">Ju Hua</option>
    <option value="Espresso Martini">Espresso Martini</option>
    <option value="Skittles">Skittles</option>
    <option value="White Sangria">White Sangria</option>
    <option value="Red Sangria">Red Sangria</option>
  </select>
</p>
          <p class="line-item-property__field">
  <label>Canned Cocktail #3</label><br>
  <select required class="required" id="canned-cocktail-3" name="properties[Canned Cocktail #3]">
    <option value="Orh Huey">Orh Huey</option>
    <option value="Ju Hua">Ju Hua</option>
    <option value="Espresso Martini">Espresso Martini</option>
    <option value="Skittles">Skittles</option>
    <option value="White Sangria">White Sangria</option>
    <option value="Red Sangria">Red Sangria</option>
  </select>
</p>