I have a Shopify store using the new Dawn template, which includes JSON templates. I’d like to add a textarea where customers can write text they’d like to have engraved on their items, which seems to be a common usecase.
I added a "Custom liquid" element to my product page and inserted a form field generated by the Shopify UI Element generator. However, I noticed that this field isn’t inside the <form>
element, so it wasn’t getting included in the order.
I looked at the source of the product page, and noticed the form has an ID like product-form-template--14290791497780__main
. I copied that ID and set it as the form attribute on my textbox, and now everything’s working but it feels fragile.
In the JSON templates, what generates that ID for the form field? Is there a way to refer to it from the liquid template without having to hard code the ID?
EDIT:
Here’s my product.json template
The important part is this bit
"728d07ea-3e35-4ab1-bed3-ac9d9f35875c": {
"type": "custom_liquid",
"settings": {
"custom_liquid": "<p class="line-item-property__field">n <label for="engraving">Engraving</label>n <p>n<textarea id="engraving" name="properties[Engraving]"nform="product-form-template--14302685823028__main"></textarea>n</p></p>"
}
},
"buy_buttons": {
"type": "buy_buttons",
"settings": {
"show_dynamic_checkout": true
}
},
As far as I can tell, the "buy_buttons" block is what creates the submission form for the product. My custom liquid block includes form="product-form-template--14302685823028__main"
, which is the ID of the form I got by viewing source on the page. I’d like to replace that with some liquid expression, like {{ product_form.id }}
or whatever, but I don’t know how to refer to other blocks in the JSON template from a custom liquid block.
2
Answers
Ok, I figured out out. The actual template is in sections/main-product.liquid. I added a section there for my custom field, added my new block to the schema at the end of the template, and added it to the json for my customizable product page.
You need to go customize a theme and just click on the Products option go to any of your templates and click the add block of the product information and add the Custom Liquid.
enter image description here
and go to the Custom Liquid and add your HTML code and save it,after saving you can check your chenges
enter image description here