I want to add a box for customers to add personalisation text. I've had it working in a previous theme with this code <label for="name-on-pottery">Name on Pottery (Max 12 characters)</label> <input id="name-on-pottery" type="text" name="properties[Name on pottery]" maxlength="12" style="width:auto !important;"> Now I've switched to Dawn theme, I tried making a new product template and added this as custom liquid file. The box shows up on the product page but the personalisation isn't showing on the cart page, so I don't think it's getting added. Any ideas why it worked on my old Minimal theme but not Dawn?
Jese Leos
August 19, 2024
Verified user
I found a video that gives solution with this generated code https://www.youtube.com/watch?v=1LtxJI-kK30 <style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top:0}.custom .field__input{padding-top:0.8rem}</style> <label class="form__label custom" for="personalisation-text-(max-12-characters)">Personalisation Text (max 12 characters)</label> <div class="field custom"> <input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="personalisation-text-(max-12-characters)" name="properties[Personalisation Text (max 12 characters)]" maxlength="12"> <script> document.querySelector('#personalisation-text-(max-12-characters)').addEventListener('input',(e)=>{ if(!document.querySelector('label[for="personalisation-text-(max-12-characters)"] span')){ const span = document.createElement("span"); span.style.marginLeft = '10px' document.querySelector('label[for="personalisation-text-(max-12-characters)"]').appendChild(span) } document.querySelector('label[for="personalisation-text-(max-12-characters)"] span').style.display = 'inline' document.querySelector('label[for="personalisation-text-(max-12-characters)"] span').textContent = e.target.value.length + ' | ' + 12 if(e.target.value.length==0){ document.querySelector('label[for="personalisation-text-(max-12-characters)"] span').style.display = 'none' }}) </script> </div>