"Anfrage stellen" Button auf Produktseite?

[WDQuestion]

Hallo zusammen!

Wir sind seit kurzem in der Shopify Welt unterwegs und sind mitten im Shop-Aufbau.

Allerdings ist es für unseren Shop essenziell notwendig, dass man einen "Anfrage stellen" - Button auf der Produktseite unterbringen kann. Dieser Button soll zusätzlich zum "In den Warenkorb" - Button eingesetzt werden und im besten Fall zu einem Kontaktformular führen, welches dann als Mail an den Shopbetreiber zugestellt wird. Wichtig wäre außerdem, dass in dieser Mail die genaue Produktbezeichnung- sowie Variante angezeigt wird, zu der die Anfrage gestellt wurde. 

Weiß hier jemand von einer guten App Erweiterung oder von einer generellen Einstellung in Shopify, die wir dazu bisher übersehen haben? 

Vielen Dank im Voraus!

[Gabe]

Hey @WDQuestion 

Gabe hier aus Shopify! Vielen Dank für die gute Frage.

Eine Anfrage senden auf der Produktseite mit einem Button der "im besten Fall zu einem Kontaktformular führt" ...hmmm... da kommen mir ein paar Fragezeichen auf zu dem genauen Zweck dieses Workflows.

Erstens, kann das den Kaufabschluss eines Kunden im Sales Funnel enorm unterbrechen oder Reibung verursachen, denn dieser leitet ja den Kunden von der Produktseite oder dem Warenkorb weg. Not good?

Wie wärs stattdessen mit einem schwebenden Chat Button oder ein Popup der den Kaufabschluss nicht irgendwie hindert? Ein Popup kann man gerne einbinden in das Code. Klickt der Kunde darauf dann erscheint ein Popup, wo der Kunde die Frage o. ä. stellen kann, ohne vom Funnel weggeleitet zu werden.

Checke doch die Apps von Lumin oder Buddy hier die das können. Einfach hinzufügen und alle testen, um zu sehen, ob die machen was du brauchst.

VG,

Gabe

[Kadz]

Hallo Gabe,

mich beschäftigt die gleiche Frage, jedoch ist Deine Antwort nicht hilfreich gewesen.

Auch ich suche nach einer Möglichkeit nicht direkt zu verkaufen, sondern eine Anfrage zum Angebot zu erhalten. Ich möchte also nichts in den Warenkorb legen lassen, sondern eine Anfrage des Kunden zum Angebot erhalten. Gibt es dazu eine Möglichkeit?

Beste Grüße

[tewe]

Hallo @Kadz ,

eine bestehende App ist meistens die schnellere und u.U. auch die kostengünstigere Lösung. Wir haben so einen Knopf aber ohne App gebaut und das ganze hier dokumentiert. Vielleicht hilft es ja weiter.

Gruß
Thomas

[Kadz]

Hi Thomas!

Vielen Dank für Deine schnelle Rückmeldung!

Das klingt interessant. Habe es gerade überflogen. Meinst Du, das ich auch in der vorhandenen Theme-Vorlage, die ich nutze, einfügen? Also den "Jetzt kaufen" und "In den Warenkorb" entfernen bzw. einen davon in "Anfrage stellen" umformatieren, sodass der Kunde zu einem Kontaktformular geführt wird oder sogar eine Lightbox/Pop-Up mit Kontaktformular erscheint?

Das wäre klasse!

Beste Grüße
Karsten

[tewe]

Hallo Karsten,

irgendwie geht es immer, aber die Themes sind unterschiedlich kompliziert. Pauschal ist das schwer zu beurteilen. Welches Theme hast du?

Gruß
Thomas

[Kadz]

Das Theme ist Debut.

[Gabe]

Hey Kadz! @Kadz 

Zusätzlich zu Thomas' Tipps haben wir auch ein paar DIY Docs die helfen können, da du ja auch ein Shopify Theme verwendest. Wenn die folgenden nicht genau das machen was du brauchst, sind sie vielleicht ein Ansatz um dein Code auf der Produktseite selber etwas anzupassen (probiere aber zuerst in einer Theme-Kopie da man ja das Live Theme nicht brechen möchte). Einfach den Code in der Anleitung etwas tweaken:

• Replace “Add to cart” with a contact link
• Enable order notes on your cart page
• Ask how customers heard about your store
• Add pickup availability to product pages
• Add a “Continue shopping” link to your cart
• Add a delivery date picker to your cart
• Add a gift-wrap option to your cart page
• Add more checkout buttons to the cart page
• Disable your cart in the online store
• Hide product prices

Product variants and options

• Find a variant ID
• Get customers to choose an option
• Hide sold-out variants
• Localize your product prices for search engines
• Select variants by clicking their images
• Use products with multiple options
• Add pickup availability to product pages
• Show the remaining inventory on product pages

[Buy2smoke]

Hey @Kadz @tewe, wir stehen jetzt auch vor diesem Problem. Uns würde es interessieren wie sie das Problem gelöst haben. 

Würde mich auf eine Antwort freuen. 

mfg 

[Ben310]

So jetzt habe ich etwas Zeit zum Samstag frühschoppen...Diese können dir helfen: Hier und hier. Vielleicht kann Thomas das folgende auch bestätigen aber das folgende ist etwas anders als die Narrative Anleitung vom Thomas oben:

Das Liquid-Produkt-Objekt verwenden, z. B. mit so was:

{% if product.price > 0 %}
  <!-- hier normale Ausgabe anzeigen -->
{% else %}
  <a href="/quote-page">Anfrage stellen</a>
{% end %}

Die einzige Methode, die mir einfällt, um den Anfragebutton zum Funktionieren zu bringen, ist ein Kontaktformular. Diesen kann man auch mit dieser App bauen und die erlaubt es sogar den Betreff zu ändern anstatt den Standard Betreff von Shopify verwenden zu müssen.

Im Templates folder gehe zu product.liquid oder product-template.liquid. Füge eine IF-ELSE Statement hinzu, damit die Schaltfläche nur angezeigt wird, wenn der Preis größer als 0 ist.

Beispiel: die ersten <p>- und <button>-Tags bleiben, nur mit dem ersten Teil der IF-Statement umschließen und füge dann das ELSE darunter ein. Die Schaltfläche "Produkt reservieren" wird nichts machen, man soll also ein Formular hinzufügen, indem man den obigen Link befolgt.

Traust du dir das Hinzufügen eines Kontakformulars (o. ä.) zu? Hier eine weiteres Code Besipiel:

{% if product.price > 0 %}

    <p class="product__price">       
        <span class="visually-hidden">Normaler Preis</span>
        <span class="product__price--reg js-price">PREIS HIER</span>            
    </p>
    <button type="submit" name="add" id="AddToCart" class="btn add-to-cart">
        <span class="add-to-cart__text">Add to cart</span>
    </button>

{% else %}

    <a href="#this" name="ProduktReservieren" id="ProduktReservieren" class="btn add-to-cart">
        <span class="add-to-cart__text">Produkt Reservieren</span>
    </a>

{% endif %}

Kannst auch für deine Collection Page die Datei product-grid-item im Snippet-Ordner suchen im Abschnitt:

<p class="product-item__price-wrapper">
            {% comment %}
             Kannst ein führendes 'von' oder 'bis' anzeigen, indem du 'product.price_varies' überprüfst wenn Varianten unterschiedliche Preise haben.
            {% endcomment %}
            {% if product.compare_at_price > product.price %}
              <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
              <s class="product-item__price--reg">{{ product.compare_at_price | money_without_trailing_zeros }}</s>
              <span class="product-item__price--sale">{{ 'products.general.now_price_html' | t: price: price }}</span>
            {% else %}
              {% if product.price_varies %}
                {{ 'products.general.from_text_html' | t: price: price }}
              {% else %}
                {% if product.compare_at_price > product.price %}
                  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
                {% else %}
                  <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
                {% endif %}
                {{ product.price | money_without_trailing_zeros }}
              {% endif %}
            {% endif %}
          </p>

Diesen ganzen Abschnitt in {% if product.price > 0 %} einschließen. Nicht vergessen, die {% endif %} am Ende des obigen Textes hinzuzufügen.

Um die Dateien zu finden, würde ich mit dem Template folder suchen und dann den Code lesen, um zu sehen, wie er zusammengesetzt ist und die Elemente zu finden, nach denen man sucht.

Oder:

1. Das Element im Chrome Dev Tool (Inspect) suchen.
2. Nach einer Html-ID oder Class, die es identifiziert suchen.
3. Durchsuche die Liquid Datei nach der Identifizierungs-String (Bold Chrome Extension verwenden). Oder exportiere die Theme Datei und durchsuche/ändere den Code dann lokal...geht schneller...

Anstatt den Code für die Schaltfläche in product-template.liquid direkt auszukommentieren, die Vorlage duplizieren, sie mit der Vorlage product.not-for-sale.liquid verknüpfen aus der oben-verlinkten Anleitung und den Code in der Kopie auskommentieren. Der Code sieht in etwa so aus:

Hoffe das hilft...Ansonsten nächste Woche wieder... Tchüssi!