Textfeld in Theme Studio wird nicht angezeigt

[Luvera]

Hi zusammen,

ich versuche grade ein Textfeld im Theme Studio zu implementieren. Bisher werden die Möglichkeiten zur Personalisierung angezeigt (Name, Datum) aber leider kein Textfeld in dem diese Daten hinterlegt werden können.

Vielleicht hat hier ja jemand eine Idee. Ich habe folgenden Code eingetragen:

<div class="product-form__input">
<label class="form__label" for=Personalisierung>Name</label
<input class="field__input" type="text" id=Personalisierung form="{{ product_form_id }}" name="properties(Name)"/>
</div>

Wäre um Hilfe dankbar!

Merci vorab!

[Gabe · Accepted solution]

Hi @Luvera 

Danke  für den Code und an erster Stelle ist es nicht ganz klar was du erreichen möchtest denn im Studio Theme gibt es ja bereits ein Text-Notizfeld für den Kunden. Oder möchtest du es auf der PDP stattdessen einrichten? Hier das Feld das ich meine:

So ein Feld auf der PDP einzurichten wird nicht ganz so einwandfrei sein wie man sich das vorstellt denn die Kundenwünsche müssen dann ja an das Checkout und auch über die Order API an das Shopify Backend ge-passed werden.

Dein Code-Snippet sieht grundsätzlich korrekt aus, um ein personalisiertes Textfeld im Shopify-Thema hinzuzufügen. Allerdings fehlen in deinem HTML-Code einige Anführungszeichen bei den Attributen for und id, was zu Problemen führen kann. Hier ist eine korrigierte Version:

<div class="product-form__input">
  <label class="form__label" for="Personalisierung">Name</label>
  <input class="field__input" type="text" id="Personalisierung" form="{{ product_form_id }}" name="properties[Name]" />
</div>

Stelle sicher, dass du diesen korrigierten Code in deinem Shopify-Theme an der richtigen Stelle einfügst, normalerweise in der Datei product-template.liquid oder einer ähnlichen Datei, die für die Darstellung der Produktseite zuständig ist.

Um die im Feld eingetragenen Texte an das Backend weiterzureichen und sicherzustellen, dass sie mit der Bestellung verbunden sind, folgt Shopify einem einfachen Konzept: Alles, was im properties-Attribut eines Eingabefeldes steht, wird als benutzerdefinierte Eigenschaft (auch bekannt als "Line Item Property") für das jeweilige Produkt in der Bestellung gespeichert. Der von dir verwendete Code tut genau das – er weist dem Produkt eine benutzerdefinierte Eigenschaft mit dem Namen "Name" und dem Wert des Eingabefeldes zu.

Der form-Tag, der dein input-Element umgibt, muss korrekt konfiguriert sein, damit die Daten bei der Einreichung des Formulars richtig erfasst werden. Der form-Tag sollte die action zum Hinzufügen des Produkts zum Warenkorb enthalten und die method auf "post" setzen. Stelle sicher, dass {{ product_form_id }} korrekt in deiner Theme-Vorlage definiert ist und zu einem tatsächlichen form-Element gehört. Dies ist wichtig, damit das Eingabefeld richtig mit dem Produktformular verknüpft wird.

Wenn du eine Test-Bestellung aufgibst, sollten die benutzerdefinierten Eigenschaften (in deinem Fall der Name, der im Textfeld eingegeben wurde) in den Bestelldetails im Shopify-Adminbereich erscheinen. Du kannst sie in der Bestellübersicht unter dem jeweiligen Produkt finden.

Wenn du diese Schritte befolgt hast und die Daten immer noch nicht wie erwartet übertragen werden, überprüfe, ob du eventuelle JavaScript-Funktionalitäten auf deiner Produktseite hast, die das Formularverhalten beeinflussen könnten. Manchmal kann clientseitiges Scripting die Art und Weise, wie Formulardaten gesendet werden, verändern oder stören.

Das würde ich sehr empfehlen denn das ganze kannst du mit Testbestellungen testen, da diese ein wichtiges Tool sind, um die sog. "Checkout Reibung" zu testen und die User Experience (UX) aller Besucher selber zu erleben. Man kann 3 Arten von Testbestellungen verwenden, um solche Szenarien zu testen.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Soul_Crystals_]

Hallo Gabe,

ich habe so ein ähnliches Problem, vielleicht kannst du mir dabei helfen.:)

Vorab: Ich habe absolut keine Ahnung vom codieren etc. Ich habe mir alles aus diversen Videos etc. zusammen gebastelt.🙈

Ich möchte personalisierten Schmuck anbieten. Bei Shopify sind nicht genügend Varianten verfügbar. Ich benutze das Theme Impact.

Also habe ich ein Drop-Down integriert mit folgenden Code:

<div class="product-form__input product-form__input--dropdown">
<label class="form__label">Garnfarbe:</label>
<div class="select">
<select class="select__select" id="garnfarbe" name="properties[Garnfarbe]" form="{{ 'product-form-' | append: section.id }}" required>
<option value="" hidden selected>Bitte auswählen </option>
<option value="wie abgebildet">wie abgebildet</option>
<option value=" Farbe 01"> Farbe 01</option>
<option value=" Farbe 02"> Farbe 02</option>
<option value=" Farbe 03"> Farbe 03</option>
<option value=" Farbe 04"> Farbe 04</option>
<option value=" Farbe 05"> Farbe 05</option>
<option value=" Farbe 06"> Farbe 06</option>
<option value=" Farbe 07"> Farbe 07</option>
<option value=" Farbe 08"> Farbe 08</option>
<option value=" Farbe 09"> Farbe 09</option>
<option value=" Farbe 10"> Farbe 10</option>
<option value=" Farbe 11"> Farbe 11</option>
<option value=" Farbe 12"> Farbe 12</option>
<option value=" Farbe 13"> Farbe 13</option>
<option value=" Farbe 14"> Farbe 14</option>
<option value=" Farbe 15"> Farbe 15</option>
<option value=" Farbe 16"> Farbe 16</option>
<option value=" Farbe 17"> Farbe 17</option>
<option value=" Farbe 18"> Farbe 18</option>
<option value=" Farbe 19"> Farbe 19</option>
<option value=" Farbe 20"> Farbe 20</option>
</select>
<span class="svg-wrapper"><svg class="icon icon-caret" viewBox="0 0 10 6"><path fill="currentColor" fill-rule="evenodd" d="M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708" clip-rule="evenodd"></path></svg>
</span>
</div></div>
<script>
document.addEventListener("DOMContentLoaded", ()=>{document.querySelector("form[novalidate]").removeAttribute("novalidate")})
</script>

Diesen Code habe ich im Theme Editor bei Custom Liquid eingefügt. Hat auch gut funktioniert.

Jetzt sieht die Produktseite schonmal so aus:

Jetzt habe ich nur das Problem, dass die Auswahl nicht in den Warenkorb übernommen wird, und mich auch nicht erreicht. Jemand anderes hat was von properties und ACT-Button geschrieben. Ich weiß nur nicht was damit gemeint ist. Und da du eine verständliche und ausführliche Antwort oben geschrieben hast, hoffe ich, dass du mir vielleicht auch weiterhelfen kannst.

Ich würde mich sehr über eine Antwort freuen.

Liebe Grüße, Viola