Beliebte Suchen

Freitext Produktoption ohne App in Shopify

Einige Produkte in einem Onlineshop benötigen ein Freitextfeld als Produktoption. Ein Freitextfeld gibt dem Kunden die Möglichkeit, individuelle Anpassungen an einem Produkt vorzunehmen. Das kann beispielsweise die Personalisierung von Produkten wie Gravuren auf Schmuck (Gravuren auf Schmuck per Shopify App), Stickereien auf Kleidungsstücken sein oder nur ein Gruß-Text für die Karte.

Textfeld in Produkt bei Shopify einsetzen

Per Shopify App kann man das ganze zum Beispiel per „Live Product Option“ realisieren, will man jedoch keine App verwenden um ein Freitextfeld als „Produktoption“ anzuzeigen, folgen Sie folgende Schritte (am Beispiel des Shopify Themes „Dawn“):

  1. Navigieren Sie im Shopify Adminbereich zu „Onlineshop > Theme“ und gehen Sie in den Code-Editor des gewünschten Themes
  2. Rufen Sie die Datei „buy-buttons.liquid“ auf und suchen Sie nach:
    {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
  3. Fügen Sie folgenden Code nach dem zuvor gesuchten Begriff und vor dem {%- endform -%} ein:
{% for tag in product.tags %}
    {% if tag == 'Freitext' %}
       <p>
           <label for="grusskartentext">Grußkartentext</label>
           <textarea id="grusskartentext" name="properties[Grusskartentext]"></textarea>
       </p>
     {% endif %}
{% endfor %}

Der Code setzt ein Freitextfeld innerhalb des <form> Tags des Produkts, wenn das Produkt mit „Freitext“ getaggt ist.

Die Abfrage des Tags kann theoretisch entfernt werden – dadurch würde es jedoch bei jedem Produkt angezeigt werden. Man könnte hier natürlich auch ein Shopify Metafeld verwenden um zu steuern ob bzw. welche Optionen in einem Produkt angezeigt werden.

Wichtig ist vor allem das Attribute „name“ beim Textfeld. Der Name muss mit properties beginnen und innerhalb der eckigen Klammern kommt die Bezeichnung.

Durch die Übergabe als Property („Eigenschaft“) wird der gewählte Text nach dem Hineinlegen des Produkts in den Warenkorb auch auf der Warenkorbseite, sowie im Checkout und in den Bestelldaten angezeigt. Mithilfe von CSS/HTML kann dieses Textfeld individuell für Ihren Shop angepasst werden. Die gleiche Technik wird zum Beispiel auch bei unserem Artikel zu den wesentlichen Artikelmerkmale in Shopify verwendet.

Die Text-Option im Produkt:

Individuelles Freitextfeld auf der Produktseite (Shopify "Dawn" Theme)
Individuelles Freitextfeld auf der Produktseite (Shopify „Dawn“ Theme)

Selbstverständlich kann man auch mehr als ein Feld in das Produkttemplate einbinden oder auch das Textfeld zu z.B. einer Checkbox oder anderen Formularfeldern ändern. Was man nicht beeinflussen kann sind die Eigenschaften des Produkts, d.h. man könnte zum Beispiel keinen Aufpreis nehmen, wenn eine Checkbox angehakt wurde.

Plant man mit mehr als einer Option wäre es vermutlich generell sinnvoll eine „echte“ Optionen oder Konfigurator App wie z.B. Live Product Options für Shopify zu verwenden.

8 Gedanken zu “Freitext Produktoption ohne App in Shopify

  1. Hallo,
    gibt es hier mittlerweile eine Änderung? Ich kann den oben genannten Code welchen man zuerst suchen muss, leider nicht finden. Wurde dieser geändert?
    Danke und viele Grüße
    Jasmin

    1. Hallo Jasmin,

      die Anleitung ist für das Dawn-Theme von Shopify. Wenn ein anderes Theme verwendet wird, oder die Version abweicht, kann die Zeile durchaus geringfügig bis stark anders lauten.

      Mit „{%- form ‚product'“ sollte die Zeile jedoch schon in fast jedem Fall anfangen.

  2. Hallo.
    Danke für die tolle Anleitung.
    Wie bekomme ich das Textfeld unterhalb von der Beschriftung „Grusskartentext“ und wie kann ich die Größe verändern.
    Dann wäre es super für mich.
    Vielen Dank
    Grüße Klaus

    1. Hallo Klaus,

      das wären sehr spezifische Fragen, die von deinem Design abhängen. Kurzgesagt müsste es per css angepasst werden, leider nichts was wir in Form eines Kommentar beantworten können.

      Beste Grüße

      das shop-devs Team

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert