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

[ErSanjay]

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();
});

```