How to add a custom text field to a Blum theme product page?

[HEMA980]

Hello i want to add a custom input field to my Blume theme.

 I also added a field where my customer can put there personalized names in it. The Problem is as soon as the put the products to the cart there input dissapears.

I use the code below in the liquid.

<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-text custom" for="dein-wunschname">Dein Wunschname</label>
<div class="field custom">
<input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="dein-wunschname" name="properties[Dein Wunschname]" required>
<script>
document.addEventListener("DOMContentLoaded", ()=>{document.querySelector("form[novalidate]").removeAttribute("novalidate")})
</script>
</div>

[theycallmemakka]

Hi @HEMA980 ,

This will require adding custom code on the theme. As you are using a premium theme, I do not have access to the theme. Can you provide me a copy of main-product.luiquid?

I will review it and let you know where you can add the code.

Thank you

[devcoders]

Hi @HEMA980 

Place the custom input field inside the product form.
Ensure the input field name is unique and correctly formatted to pass the custom properties.

Here’s how you can do it:

<style>
.custom.form__label {
    margin-bottom: 0.6rem;
}
.field.custom {
    margin-top: 0;
}
.custom .field__input {
    padding-top: 0.8rem;
}
</style>

<!-- Assuming this is within the product form template -->
<form id="product-form-{{ section.id }}" class="product-form" action="/cart/add" method="post" enctype="multipart/form-data">
    <!-- Existing product form fields go here -->

    <label class="form__label-text custom" for="dein-wunschname">Dein Wunschname</label>
    <div class="field custom">
        <input class="field__input" type="text" id="dein-wunschname" name="properties[Dein Wunschname]" required>
    </div>
</form>

<script>
document.addEventListener("DOMContentLoaded", () => {
    document.querySelector("form[novalidate]").removeAttribute("novalidate");
});
</script>