Wie man Buttons und Formulare für kostenlose Themes von Shopify wieder auf Lager bringt

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. 

Bevor du beginnst

Falls du es noch nicht getan hast, lies unseren Leitfaden " Erste Schritte mit Shopify ", um eine schrittweise Anleitung zur Integration zu erhalten, bevor du mit diesem Artikel fortfährst.

Um mehr über die Funktion Wieder auf Lager zu erfahren und wie du sie aktivierst, lies unseren Leitfaden Wie installiere ich 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.

<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

• So installierst du Wieder auf Lager für Shopify
• Wie man eindeutige Gutscheincodes erstellt für Shopify