Du wirst lernen

Hier erfährst du, welche Änderungen du für jedes kostenlose Shopify Theme vornehmen musst, um sicherzustellen, dass dein "Wieder auf Lager"-Button und dein Formular zum Styling deines Themes passen. Der Klaviyo "Notify Me When Available" Button und das Formular sind in hohem Maße konfigurierbar. Du kannst die Farben, die Schriftarten, den Text und andere Elemente nach deinen Gestaltungswünschen ändern.

Die Installation von "Wieder auf Lager" wird nur für bestimmte kostenlose Shopify Themes unterstützt, nicht aber für Shopify Laden mit benutzerdefinierten Themes. Zurzeit kann der Klaviyo Support nicht bei der Implementierung von Wieder auf Lager für Laden mit benutzerdefinierten Themes helfen. Um zu überprüfen, welches Shopify-Theme dein Laden verwendet, kannst du einen Shopify-Theme-Detektor verwenden.

Bevor du beginnst

Falls du unseren Leitfaden Erste Schritte mit Shopify noch nicht gelesen hast, solltest du diese Anleitung durchgehen, bevor du mit diesem Artikel fortfährst.

Um allgemein mehr über die Wieder auf Lager Funktionen zu erfahren und wie du sie aktivierst, lies unseren Leitfaden zur Installation von Wieder auf Lager für Shopify.

So gestaltest du deine Schaltfläche und dein Formular

  1. Wenn du dein Snippet installierst, findest du das Styling-Snippet für dein kostenloses Theme in diesem Artikel.
  2. Das Standard-Snippet ist unten abgebildet. Update (oder hinzufügen) von Zeileneinträgen in den Abschnitten Trigger: {} und modal: {} Abschnitte des Standard-Snippets entsprechend den Angaben im Styling-Snippet
    1. Wenn du zum Beispiel das Crave-Theme verwendest, musst du nur die folgende Zeile im Modalabschnitt hinzufügen: font_family: '"Archivo", serif;'
  3. Nimm alle anderen gewünschten Aktualisierungen an den Positionen vor, die du für sinnvoll hältst.
text
<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
    var Klaviyo = Klaviyo || [];
    Klaviyo.init({
      account: "PUBLIC_API_KEY",
      platform: "shopify"
    });
    Klaviyo.enable("backinstock",{ 
    Auslöser: {
      product_page_text: "Notify Me When Available",
      product_page_class: "button",
      product_page_text_align: "center",
      product_page_margin: "0px",
      replace_anchor: false
    },
    modal: {
     Überschrift: "{product_name}",
     body_content: "Registrieren Sie sich, um eine Benachrichtigung zu erhalten, wenn dieser Artikel wieder auf Lager ist.",
     E-Mail: "E-Mail",
     button_label: "Benachrichtigen Sie mich, wenn verfügbar",
     subscription_success_label: "Sie sind dabei! Wir geben Ihnen Bescheid, wenn er wieder da ist.",
     footer_content: '',
     additional_styles: "@import url('https://fonts.googleapis.com/css2?family=Roboto+wght@400;700&display=swap');",
     drop_background_color: "#000",
     background_color: "#fff",
     text_color: "#222",
     button_text_color: "#fff",
     button_background_color: "#439fdb",
     close_button_color: "#ccc",
     error_background_color: "#fcd6d7",
     error_text_color: "#C72E2F",
     success_background_color: "#d3efcd",
     success_text_color: "#1B9500"
    }
  });
</script>

Crave

text
Auslöser: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Archivo", serif;'
}

Morgengrauen

text
Auslöser: {
 product_page_class: 'button'
},
modal: {
font_family: '"Assistant", sans-serif;' 
}

Studio

text
Auslöser: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Electra", serif;' 
}

Colorblock

text
Auslöser: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Futura", sans-serif;' }

Sense

text
Auslöser: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Harmonia Sans", sans-serif;'
}

Geschmack

text
Auslöser: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Anonymous Pro", sans-serif;'
}

Craft

text
Auslöser: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Quattrocento Sans", sans-serif;'
}

Reiten

text
Auslöser: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Avenir Next", sans-serif;'
}

aktualisieren

text
Auslöser: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Questrial", sans-serif;'
}

Einfach

Schönheit

text
modal: {
 font_family: '"PT Serif",serif;'
}

Pop

Knochen

text
Auslöser: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Raleway');",
 font_family: '"Raleway","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Spielzeug

text
Auslöser: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Schwarz & Weiß

text
Auslöser: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Lebendig

text
Auslöser: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Wagnis

Snowboards

text
Auslöser: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Karla');",
 font_family: '"Karla","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Draußen

text
Auslöser: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Roboto');",
 font_family: '"Roboto","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Boxen

text
Auslöser: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');",
 font_family: '"Source Sans Pro","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Debüt

Standard

text
Auslöser: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Work+Sans');",
 font_family: '"Work Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Licht

text
Auslöser: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Muli');",
 font_family: '"Muli","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Angebot

Licht

text
Auslöser: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Roboto');",
 font_family: '"Roboto","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Blau

text
Auslöser: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Montserrat');",
 font_family: '"Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Erzählung

Warm

text
Auslöser: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Avenir');",
 font_family: '"Avenir","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Licht

text
Auslöser: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Kalt

text
Auslöser: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Lato');",
 font_family: '"Lato","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Brooklyn

Klassisch

text
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Arapey');",
 font_family: '"Arapey",serif;'
}

Minimal

Modern

text
modal: {
 font_family: '"PT Serif",serif;'
}

Vintage

text
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",
 font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Mode

text
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",
 font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Ergebnis

Du hast jetzt das Styling deines Wieder-auf-Lager-Buttons und Formulars auf deinem Shopify Laden aktualisiert.

Zusätzliche Ressourcen

War dieser Artikel hilfreich?
Nutze dieses Formular nur für Feedback zu Artikeln. So kontaktierst du den Support.

Mehr von Klaviyo entdecken

Community
Vernetze dich mit Kolleg*innen, Partner*innen und Klaviyo-Expert*innen, um dich inspirieren zu lassen, Erkenntnisse auszutauschen und Antworten auf deine Fragen zu erhalten.
Partner
Beauftragen Sie einen Klaviyo-zertifizierten Experten, der Ihnen bei einer bestimmten Aufgabe hilft oder für das laufende Marketing-Management zuständig ist.
Support

Kontaktiere den Support über dein Konto.

Support per E-Mail (kostenlose Testversion und kostenpflichtige Konten) Verfügbar 24/7

Chat / virtuelle Unterstützung
Verfügbarkeit abhängig von Standort und Abonnementtyp