So gestaltest du Wieder-auf-Lager-Schaltflächen und -Formulare bei kostenlosen Shopify-Themes

Geschätzt 2 Minuten Lesedauer

Aktualisiert 7. Juli 2025, 00:00 EST

Übersicht

Erfahre, welche wichtigen Änderungen du für jedes kostenlose Shopify-Theme vornehmen musst, um schnell sicherzustellen, dass dein Button und Formular „wieder auf Lager“ zum Styling deines Themes passen. Die Klaviyo-Schaltfläche „Benachrichtige mich, wenn verfügbar“ und das Formular sind hochgradig konfigurierbar. Du kannst die Farben, Schriftarten, den Text und andere Elemente entsprechend deinen Designvorlieben ändern.

Die Installation von wieder auf Lager wird nur für bestimmte kostenlose Shopify-Themes unterstützt und nicht für Shopify-Shops, die benutzerdefinierte Themes verwenden. Der Klaviyo Support kann derzeit nicht bei der Implementierung der Funktion „Wieder auf Lager“ für Shops mit benutzerdefinierten Themes behilflich sein. Um zu prüfen, welches Shopify-Theme dein Shop verwendet, kannst du einen Shopify-Theme-Detektor verwenden.

Bevor du anfängst

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 mehr über die wieder auf Lager-Funktion im Allgemeinen und darüber, wie du sie aktivierst, zu erfahren, lies unseren Leitfaden zu „Wieder auf Lager“ für Shopify installieren.

So gestaltest du deine Schaltfläche und dein Formular

Wenn du dein Snippet installierst, findest du in diesem Artikel das Styling-Snippet für dein kostenloses Theme.
Der Standard-Snippet ist unten zu sehen. Zeilenelemente in den Abschnitten trigger: {} und modal: {} des Standard-Snippets gemäß dem im Styling-Snippet gezeigten Beispiel aktualisieren (oder hinzufügen)
1. Wenn du z. B. das Crave-Theme hast, musst du nur die folgende Zeile im Modal-Abschnitt hinzufügen: font_family: '"Archivo", serif;'
Nimm alle weiteren gewünschten Stil-Updates an den Einzelposten vor, wie es dir passend erscheint.

<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",{ 
    trigger: {
      product_page_text: "Notify Me When Available",
      product_page_class: "button",
      product_page_text_align: "center",
      product_page_margin: "0px",
      replace_anchor: false
    },
    modal: {
     headline: "{product_name}",
     body_content: "Register to receive a notification when this item comes back in stock.",
     email_field_label: "Email",
     button_label: "Notify me when available",
     subscription_success_label: "You're in! We'll let you know when it's back.",
     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>

Verlangen

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Archivo", serif;'
}

Dawn

trigger: {
 product_page_class: 'button'
},
modal: {
font_family: '"Assistant", sans-serif;' 
}

Studio

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Electra", serif;' 
}

Farbblock

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Futura", sans-serif;' }

Sinn

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Harmonia Sans", sans-serif;'
}

Geschmack

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Anonymous Pro", sans-serif;'
}

Erstellen

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Quattrocento Sans", sans-serif;'
}

Fahrt

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Avenir Next", sans-serif;'
}

Aktualisieren

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Questrial", sans-serif;'
}

Ganz einfach.

Beauty

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

Pop

Knochen

trigger: {
 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

trigger: {
 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ß

trigger: {
 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;'
}

Vibrant

trigger: {
 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;'
}

Venture

Snowboards

trigger: {
 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;'
}

Outdoor

trigger: {
 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

trigger: {
 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

trigger: {
 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;'
}

Hell

trigger: {
 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;'
}

Vorrat

Hell

trigger: {
 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

trigger: {
 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;'
}

Narrativ

Warm

trigger: {
 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;'
}

Hell

trigger: {
 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

trigger: {
 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 deiner wieder auf Lager-Schaltfläche und deines Formulars in deinem Shopify-Shop aktualisiert.

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.

Community besuchen

Partner

Beauftragen Sie einen Klaviyo-zertifizierten Experten, der Ihnen bei einer bestimmten Aufgabe hilft oder für das laufende Marketing-Management zuständig ist.

Partner beauftragen

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

Anmelden