Craft theme - custom line item property field only when the "Custom " variant is selected.

Store Design
, , ,

Topic summary

Implementation Guide for Conditional Custom Fields:

A user explains how to add a custom text field that appears only when a “Custom” size variant is selected in Shopify’s Craft theme.

Setup Steps:

  • Create product variants with “Size” options: “Regular” and “Custom”
  • Add line item properties through the theme’s product template
  • Navigate to Online Store > Themes > Customize to access the theme editor

Technical Implementation:

  • Locate the product template liquid file in the theme code editor
  • Add conditional logic using JavaScript to toggle the custom field visibility
  • The provided code snippet uses event listeners to detect variant selection changes
  • When “Custom” variant is selected, the custom input field displays (style.display = ‘block’); otherwise it remains hidden (style.display = ‘none’)

Note: The code example includes JavaScript that checks for a specific variant ID and shows/hides the custom field accordingly. The implementation requires direct theme code editing and should be adapted to match your specific theme structure.

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

Shopify store using the free “Craft” theme, you can utilize Shopify’s built-in features such as variants, line item properties, and conditional logic in Liquid templates. Here’s a general guide on how to set it up:

  1. Create Product Variants
    First, you’ll need to create product variants for the size options: “Regular” and “Custom.”

Go to your Shopify admin panel.
Navigate to Products and select the product you want to edit.
Scroll down to the Variants section and click on “Add variant.”
Create a variant option named “Size” with the values “Regular” and “Custom.”
Save your changes.
2. Add Custom Line Item Property
To allow users to input custom information when they select the “Custom” option, you’ll use line item properties. These properties are custom form fields that customers can fill out on the product page, and they will be included with the order.

Edit your product template in the theme editor:

Go to Online Store > Themes.
Click Customize next to your theme.
In the theme editor, go to the Product pages section.
Add the custom line item property (like a text box or textarea) using Liquid code. You will need to edit the theme’s code directly:

Navigate to Actions > Edit Code in the theme’s section.
Locate the product-template.liquid or similar file.
Add a conditional statement to display the custom input field only when the “Custom” size variant is selected.
Here is an example code snippet that you can modify according to your theme structure:


document.addEventListener('DOMContentLoaded', function() {
const sizeSelector = document.querySelector('[name="id"]');
const customField = document.getElementById('custom-size-field');

function toggleCustomField() {
if (sizeSelector.value == 'ID_OF_CUSTOM_VARIANT') {
customField.style.display = 'block';
} else {
customField.style.display = 'none';
}
}

sizeSelector.addEventListener('change', toggleCustomField);

// Initial check
toggleCustomField();
});