Textfeld Personalisierung

[Soul_Crystals_]

Hallo zusammen,

ich bräuchte eine genaue Schritt-für-Schritt Anleitung, wie man auf der Produktseite ein Textfeld einblenden kann. Ich möchte dieses gerne mit einem Tag jederzeit wieder einfügen können. Der Überschrift soll lauten ,,Garnfarbe" und in dem Textfeld soll ein Beispieltext stehen ,,z.B. wie abgebildet, Farbe 07..." .

Ich benutze das Impact Theme.

Ich würde mich mega über eine einfache und ausführliche Anleitung freuen.

Vielen lieben Dank.

LG, Viola

[Nordalux]

Damit es auch in der Bestellung steht, musst du mit properties und im richten Productblock arbeiten. Zudem dem ATC-Button dieses mit hinzufügen.

Eine generelle Step-by-Step-Anleitung gibt es dafür nicht. Dieses muss am Ende je nach Code und Stand des Themes immer neu geschaut werden.

[Soul_Crystals_]

Hast Du dafür dann Tipps und einen Code? Oder kannst Du mir dabei nicht helfen?

LG Viola

[Nordalux]

Wie ich geschrieben habe: Du musst mit den properties arbeiten & in den ATC-Button diesen einbinden. Wie genau das in diesem Theme gemacht wird, kann ich erst sagen, wenn ich es genauer anschaue. Einen Code, der einfach Plug&PLay ist, wird es kaum geben.

[Soul_Crystals_]

Hallo nochmal, vielleicht hast Du ja hierbei noch einen Tipp für mich.😊

Ich habe das jetzt so gelöst, dass ein Drop-Down Menü erscheint. Mit folgendem CSS:

<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 beim Shop-Editor bei Custom Liquid eingefügt. Hat auch gut funktioniert.

Nun sieht die Produktseite schonmal so aus:

Jetzt habe ich nur das Problem, dass die Auswahl der Varianten nicht in den Warenkorb übernommen wird und ich somit auch als Verkäufer nicht weiß, was gewünscht ist.

Ich habe auch bereits folgenden Artikel gelesen. Bin trotzdem nicht weitergekommen.🙈

Gelöst: Betreff: Produkt Wunschinfo von Kunden mit im Warenkorb an mich übertragen - Shopify Communi...

Hoffentlich kannst Du mir dabei helfen.🌺

Liebe Grüße, Viola

[Ben310]

Eine ähnliche Implementierung hier diskutiert: Textfeld für Personalisierung auf Produktseite

Video hier: Shopify Impact Theme Customization Tutorial