"In den Warenkorb" durch einen Kontaktlink ersetzen

Achtung

Vintage-Themes sind nicht im Theme Store verfügbar. Diese Themes verfügen nicht über die Funktionen, die in den Onlineshop 2.0-Themes von Shopify enthalten sind, und erhalten nur sicherheitsbezogene Aktualisierungen.

Hinweis

Wenn du ein kostenloses Theme von Shopify verwendest, kannst du dich an den Shopify Support wenden, um Hilfe zu diesem Tutorial zu erhalten. Die Designzeit beträgt 15 Minuten. Weitere Informationen dazu findest du unter Theme-Support.

Hinweis

Diese Anpassung ist für Vintage-Shopify-Themes und gilt nicht für Online Store 2.0-Themes.

• Finde die Architekturversion deines Themes heraus
• Entdecke die Anpassungsmöglichkeiten für Online Store 2.0-Themes

Du kannst die Schaltfläche In den Warenkorb durch einen E-Mail-Link oder ein Kontaktformular ersetzen. Du kannst beispielsweise die Schaltfläche In den Warenkorb bei Produkten ersetzen, die derzeit nicht zum Verkauf stehen, oder bei Produkten, deren Herstellung erst auf Bestellung erfolgt.

Themes mit und ohne Abschnitte

Hinweis

Die Schritte für dieses Tutorial unterscheiden sich je nach dem, ob du ein Theme mit Abschnitten oder eines ohne Abschnitte verwendest. Ein Theme mit Abschnitten ermöglicht es dir, das Layout deiner Startseite mittels Drag & Drop anzuordnen, während dies bei einem Theme ohne Abschnitte nicht der Fall ist.

Gehe auf die Seite Code bearbeiten deines Themes, um dort herauszufinden, ob dein Theme Abschnitte unterstützt oder nicht. Wenn sich Dateien im Verzeichnis Sections (Abschnitte) befinden, verwende ein unterteiltes Theme. Nicht unterteilte Themen wurden vor dem Oktober 2016 veröffentlicht und enthalten keine Dateien im Verzeichnis Sections (Abschnitte).

Wenn Sie ein unterteiltes Theme verwenden, klicken Sie auf die Schaltfläche Unterteilte Themes und folgen Sie den Anweisungen. Wenn Sie ein älteres, nicht unterteiltes Theme verwenden, klicken Sie auf die Schaltfläche Nicht unterteilte Themes und folgen Sie den Anweisungen.

Schritte für Themes mit Abschnitten

Wähle dein Theme

Die Schritte für diese Anpassung variieren je nachdem, ob du das Narrative-Theme oder ein anderes kostenloses Theme von Shopify verwendest. Klicke auf die Schaltfläche für dein Theme, bevor die nachstehenden Anweisungen befolgst:

Narrative

Neue Produktvorlage in Narrative erstellen

Um die Schaltfläche In den Warenkorb bei einem Produkt zu ersetzen, musst du eine benutzerdefinierte Produktvorlage für dieses Produkt erstellen.

Schritte:

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
3. Klicke im Verzeichnis Vorlagen auf Neue Vorlage hinzufügen.

4. Erstelle die Produktvorlage:

   • Wähle im Dropdown-Menü das Produkt aus.
   • Benenne deine Vorlage requires-contact.
   • Klicke auf Create template (Vorlage erstellen).

5. Suche den folgenden Code:

{% section 'product-template' %}

Ersetze ihn mit:

{% section 'product-template-requires-contact' %}

Dieser Code verknüpft deine neue Vorlage mit einem neuen Produktabschnitt, den du in den nächsten Schritten erstellst.

1. Klicke auf Speichern.

Neuen Produktabschnitt erstellen

1. Klicke im Verzeichnis Abschnitte auf Neuen Abschnitt hinzufügen.

2. Erstelle den Abschnitt:

   1. Benenne den neuen Abschnitt product-template-requires-contact.
   2. Klicke auf Abschnitt erstellen.

3. Lösche in der Abschnittsdatei den gesamten Standardcode, sodass die Datei leer ist.

4. Klicke im Verzeichnis Abschnitte auf product-template.liquid. Kopiere den gesamten Inhalt der Datei in die Zwischenablage.

5. Kehre zu deinem neuen Abschnitt product-template-requires-contact.liquid zurück und füge den Code in die Datei ein.

6. Klicke auf Speichern.

Schaltfläche "In den Warenkorb" ausblenden

1. Suche in deiner neuen Abschnittsdatei product-template-requires-contact.liquid den HTML-Code für das Produktformular auf der Produktseite. Du findest diesen Code, indem du in der Datei nach dem Wort form suchst.

2. Sobald du den Code gefunden hast, füge ihn zwischen den Liquid-Tags {% comment %} und {% endcomment %} hinzu. So wird der Code nicht im Shop angezeigt, kann aber leicht wieder eingefügt werden, wenn du die neue Vorlage später ändern möchtest.

Bei Narrative sieht der geänderte Code folgendermaßen aus:

{% comment %}
{% include 'product-form' %}
{% endcomment %}

1. Klicke auf Speichern.

E-Mail-Link oder Kontaktformular hinzufügen

Nachdem du die Schaltfläche In den Warenkorb ausgeblendet hast, kannst du stattdessen den Inhalt hinzufügen, den du anzeigen möchtest.

E-Mail-Link

Du kannst einen E-Mail-Link hinzufügen, der das Standard-E-Mail-Programm des Kunden öffnet und die kundenseitige E-Mail-Adresse deines Shops als Empfänger einträgt. So fügst du einen E-Mail-Link hinzu:

1. Füge in einer neuen Zeile unter dem Liquid-Tag {% endcomment %}, das du im letzten Schritt hinzugefügt hast, den HTML-Code für einen E-Mail-Link hinzu:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. Klicke auf Speichern.

Kontaktformular

Du kannst der neuen Produktvorlage ein Kontaktformular hinzufügen, indem du den Code aus der Kontaktseiten-Vorlage deines Themes kopierst. So fügst du ein Kontaktformular hinzu:

1. Klicke im Verzeichnis Vorlagen auf page.contact.liquid.
2. Suche in der Datei nach dem Liquid-Tag {% form 'contact' %}.
3. Kopiere den gesamten Code, angefangen beim Liquid-Tag {% form 'contact' %} bis zum Liquid-Tag {% endform %}. Schließe die Liquid-Formular-Tags in den Code ein, den du kopierst.
4. Gehe zurück zu deiner neuen Datei product.requires-contact.liquid im Verzeichnis Vorlagen.

Füge in einer neuen Zeile unter dem Liquid-Tag {% endcomment %}, das du hinzugefügt hast, den HTML-Code für das Kontaktformular ein.

1. Der nächste Schritt besteht darin, den Code, den du gerade eingefügt hast, mit HTML-div-Tags zu umschließen. Das im div-Tag-Code enthaltene Klassenattribut stellt sicher, dass das Kontaktformular auf der Seite ordnungsgemäß gerendert wird.

Füge in einer neuen Zeile über {% form 'contact' %} den folgenden Code ein:

<div class="form-vertical">

Füge in einer neuen Zeile unten {% endform %} den folgenden Code ein:

</div>

1. Klicke auf Speichern.

Neue Vorlage einem Produkt zuweisen

Nachdem die Vorlage fertiggestellt wurde, kannst du sie allen Produkten zuweisen, bei denen die Schaltfläche In den Warenkorb ausgeblendet werden soll.

1. Gehe im Shopify-Adminbereich zu Produkte.

2. Klicke auf den Namen eines Produkts, bei dem die Schaltfläche In den Warenkorb ausgeblendet werden soll.

3. Wähle auf der Produktseite deines Shopify-Adminbereichs unter Onlineshop deine neue requires-contact-Vorlage aus dem Dropdown-Menü Theme-Vorlage aus.

4. Klicke auf Speichern.

Wiederhole diese Schritte bei jedem Produkt, dem du die neue Vorlage hinzufügen möchtest.

Other

Neue Produktvorlage erstellen

Um die Schaltfläche In den Warenkorb bei einem Produkt zu ersetzen, musst du eine benutzerdefinierte Produktvorlage für dieses Produkt erstellen.

Schritte:

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
3. Klicke im Verzeichnis Vorlagen auf Neue Vorlage hinzufügen.

4. Erstelle die Produktvorlage:

   • Wähle im Dropdown-Menü das Produkt aus.
   • Benenne deine Vorlage requires-contact.
   • Klicke auf Create template (Vorlage erstellen).

5. Suche den folgenden Code:

{% section 'product-template' %}

Ersetze ihn mit:

{% section 'product-template-requires-contact' %}

Dieser Code verknüpft deine neue Vorlage mit einem neuen Produktabschnitt, den du in den nächsten Schritten erstellst.

1. Klicke auf Speichern.

Neuen Produktabschnitt erstellen

1. Klicke im Verzeichnis Abschnitte auf Neuen Abschnitt hinzufügen.

2. Erstelle den Abschnitt:

   1. Benenne den neuen Abschnitt product-template-requires-contact.
   2. Klicke auf Abschnitt erstellen.

3. Lösche in der Abschnittsdatei den gesamten Standardcode, sodass die Datei leer ist.

4. Klicke im Verzeichnis Abschnitte auf product-template.liquid. Kopiere den gesamten Inhalt der Datei in die Zwischenablage.

5. Kehre zu deinem neuen Abschnitt product-template-requires-contact.liquid zurück und füge den Code in die Datei ein.

6. Klicke auf Speichern.

Schaltfläche "In den Warenkorb" ausblenden

1. Suche in deiner neuen Abschnittsdatei product-template-requires-contact.liquid den HTML-Code für die Schaltfläche In den Warenkorb auf deiner Produktseite. Du findest diesen Code, indem du in der Datei nach dem Wort cart suchst.

Das Wort für die Schaltfläche In den Warenkorb variiert von Theme zu Theme. Suche nach dem Tag <input> oder <button> mit Text wie Add to cart, AddToCart oder add-to-cart.

In Debut sieht der Code für die Schaltfläche In den Warenkorb folgendermaßen aus:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>

1. Sobald du den Code gefunden hast, füge ihn zwischen den Liquid-Tags {% comment %} und {% endcomment %} hinzu. So wird der Code nicht im Shop angezeigt, kann aber leicht wieder eingefügt werden, wenn du die neue Vorlage später ändern möchtest.

Bei Debut sieht der geänderte Code folgendermaßen aus:

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}

Achtung

Du darfst die <form>-Tags für deine Produktseite nicht in Kommentare packen. Deine Kommentar-Tags dürfen keine <form>- oder </form>-Tags umschließen. Andernfalls könnte es passieren, dass Kunden deine Produktseite nicht korrekt angezeigt wird.

1. Klicke auf Speichern.

E-Mail-Link oder Kontaktformular hinzufügen

Nachdem du die Schaltfläche In den Warenkorb ausgeblendet hast, kannst du stattdessen den Inhalt hinzufügen, den du anzeigen möchtest.

E-Mail-Link

Du kannst einen E-Mail-Link hinzufügen, der das Standard-E-Mail-Programm des Kunden öffnet und die kundenseitige E-Mail-Adresse deines Shops als Empfänger einträgt. So fügst du einen E-Mail-Link hinzu:

1. Füge in einer neuen Zeile unter dem Liquid-Tag {% endcomment %}, das du im letzten Schritt hinzugefügt hast, den HTML-Code für einen E-Mail-Link hinzu:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. Klicke auf Speichern.

Kontaktformular

Du kannst der neuen Produktvorlage ein Kontaktformular hinzufügen, indem du den Code aus der Kontaktseiten-Vorlage deines Themes kopierst. So fügst du ein Kontaktformular hinzu:

1. Klicke im Verzeichnis Vorlagen auf page.contact.liquid.
2. Suche in der Datei nach dem Liquid-Tag {% form 'contact' %}.
3. Kopiere den gesamten Code, angefangen beim Liquid-Tag {% form 'contact' %} bis zum Liquid-Tag {% endform %}. Schließe die Liquid-Formular-Tags in den Code ein, den du kopierst.
4. Kehre zurück zu deiner neuen Datei product-template-requires-contact.liquid im Verzeichnis Abschnitte.
5. Suche in der Datei nach dem abschließenden Tag </form>. Füge in einer neuen Zeile unter dem abschließenden Tag </form> den Code für das Kontaktformular ein.
6. Der nächste Schritt besteht darin, den Code, den du gerade eingefügt hast, mit HTML-div-Tags zu umschließen. Das im div-Tag-Code enthaltene Klassenattribut stellt sicher, dass das Kontaktformular auf der Seite ordnungsgemäß gerendert wird.

Füge in einer neuen Zeile über {% form 'contact' %} den folgenden Code ein:

<div class="form-vertical"></div>

Füge in einer neuen Zeile unten {% endform %} den folgenden Code ein:

</div>

1. Klicke auf Speichern.

Neue Vorlage einem Produkt zuweisen

Nachdem die Vorlage fertiggestellt wurde, kannst du sie allen Produkten zuweisen, bei denen die Schaltfläche In den Warenkorb ausgeblendet werden soll.

1. Gehe im Shopify-Adminbereich zu Produkte.

2. Klicke auf den Namen eines Produkts, bei dem die Schaltfläche In den Warenkorb ausgeblendet werden soll.

3. Wähle auf der Produktseite deines Shopify-Adminbereichs unter Onlineshop deine neue requires-contact-Vorlage aus dem Dropdown-Menü Theme-Vorlage aus.

4. Klicke auf Speichern.

Wiederhole diese Schritte bei jedem Produkt, dem du die neue Vorlage hinzufügen möchtest.

Schritte für Themes ohne Abschnitte

Neue Produktvorlage erstellen

Um die Schaltfläche In den Warenkorb bei einem Produkt zu ersetzen, musst du eine benutzerdefinierte Produktvorlage für dieses Produkt erstellen.

Schritte:

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
3. Klicke im Verzeichnis Vorlagen auf Neue Vorlage hinzufügen.
4. Erstelle die Produktvorlage:
   • Wähle im Dropdown-Menü das Produkt aus.
   • Benenne deine Vorlage requires-contact.
   • Klicke auf Create template (Vorlage erstellen).

Schaltfläche "In den Warenkorb" ausblenden

1. Suche in der neuen Datei product.requires-contact.liquid nach dem HTML-Code für die Schaltfläche In den Warenkorb. Du kannst nach dem Wort cart suchen.

Das Wort für die Schaltfläche In den Warenkorb variiert von Theme zu Theme. Suche nach dem Tag <input> oder <button> mit Text wie Add to cart, AddToCart oder add-to-cart.

In Debut sieht der Code für die Schaltfläche In den Warenkorb folgendermaßen aus:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>

1. Sobald du den Code gefunden hast, füge ihn zwischen den Liquid-Tags {% comment %} und {% endcomment %} hinzu. So wird der Code nicht im Shop angezeigt, kann aber leicht wieder eingefügt werden, wenn du die neue Vorlage später ändern möchtest.

Bei Debut sieht der geänderte Code folgendermaßen aus:

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}

Achtung

Du darfst die <form>-Tags für deine Produktseite nicht in Kommentare packen. Deine Kommentar-Tags dürfen keine <form>- oder </form>-Tags umschließen. Andernfalls könnte es passieren, dass Kunden deine Produktseite nicht korrekt angezeigt wird.

1. Klicke auf Speichern.

E-Mail-Link oder Kontaktformular hinzufügen

Nachdem du die Schaltfläche In den Warenkorb ausgeblendet hast, kannst du stattdessen den Inhalt hinzufügen, den du anzeigen möchtest.

E-Mail-Link

1. Füge in einer neuen Zeile unter dem Liquid-Tag {% endcomment %}, das du im letzten Schritt hinzugefügt hast, den HTML-Code für einen E-Mail-Link hinzu:

Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.

1. Klicke auf Speichern.

Kontaktformular

Du kannst der neuen Produktvorlage ein Kontaktformular hinzufügen, indem du den Code aus der Kontaktseiten-Vorlage deines Themes kopierst. So fügst du ein Kontaktformular hinzu:

1. Klicke im Verzeichnis Vorlagen auf page.contact.liquid.
2. Suche in der Datei nach dem Liquid-Tag {% form 'contact' %}.
3. Kopiere den gesamten Code, angefangen beim Liquid-Tag {% form 'contact' %} bis zum Liquid-Tag {% endform %}. Schließe die Liquid-Formular-Tags in den Code ein, den du kopierst.
4. Gehe zurück zu deiner neuen Datei product.requires-contact.liquid im Verzeichnis Vorlagen.
5. Suche in der Datei nach dem abschließenden Tag </form>. Füge in einer neuen Zeile unter dem abschließenden Tag </form> den Code für das Kontaktformular ein.
6. Der nächste Schritt besteht darin, den Code, den du gerade eingefügt hast, mit HTML-div-Tags zu umschließen. Das im div-Tag-Code enthaltene Klassenattribut stellt sicher, dass das Kontaktformular auf der Seite ordnungsgemäß gerendert wird.

Füge in einer neuen Zeile über {% form 'contact' %} den folgenden Code ein:

<div class="form-vertical"></div>

Füge in einer neuen Zeile unten {% endform %} den folgenden Code ein:

</div>

1. Klicke auf Speichern.

Neue Vorlage einem Produkt zuweisen

Nachdem die Vorlage fertiggestellt wurde, kannst du sie allen Produkten zuweisen, bei denen die Schaltfläche In den Warenkorb ausgeblendet werden soll.

1. Gehe in deinem Shopify-Adminbereich zu Produkte.
2. Klicke auf den Namen eines Produkts, bei dem die Schaltfläche In den Warenkorb ausgeblendet werden soll.
3. Wähle auf der Produktseite deines Shopify-Adminbereichs unter Onlineshop deine neue requires-contact-Vorlage aus dem Dropdown-Menü Theme-Vorlage aus.
4. Klicke auf Speichern.

Wiederhole diese Schritte bei jedem Produkt, dem du die neue Vorlage hinzufügen möchtest.