Wie man Buttons und Formulare für kostenlose Themes von Shopify wieder auf Lager bringt – Klaviyo - Help Center - DE

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

Wenn du dein Snippet installierst, findest du das Styling-Snippet für dein kostenloses Theme in diesem Artikel.
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;'
Nimm alle anderen gewünschten Aktualisierungen an den Positionen vor, die du für sinnvoll hältst.

<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

Auslöser: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Archivo", serif;'

}

Morgengrauen

Auslöser: {

 product_page_class: 'button'

},
modal: {

font_family: '"Assistant", sans-serif;' 

}

Studio

Auslöser: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Electra", serif;' 

}

Colorblock

Auslöser: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Futura", sans-serif;' 

}

Sense

Auslöser: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Harmonia Sans", sans-serif;'

}

Geschmack

Auslöser: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Anonymous Pro", sans-serif;'

}

Craft

Auslöser: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Quattrocento Sans", sans-serif;'

}

Reiten

Auslöser: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Avenir Next", sans-serif;'

}

aktualisieren

Auslöser: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Questrial", sans-serif;'

}

Einfach

Schönheit

modal: {

 font_family: '"PT Serif",serif;'

}

Pop

Knochen

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

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ß

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

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

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

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

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

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

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

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

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

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

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

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

modal: {

 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Arapey');",

 font_family: '"Arapey",serif;'

}

Minimal

Modern

modal: {

 font_family: '"PT Serif",serif;'

}

Vintage

modal: {

 additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",

 font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'

}

Mode

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