Weer-op-voorraad-knoppen en -formulieren voor gratis Shopify-thema's bewerken

Ongeveer 2 minuten lezen

Bijgewerkt 7 jul 2025, 00:00 EST

Wat je leert

Lees welke belangrijke wijzigingen je voor elk gratis Shopify-thema moet aanbrengen om snel te zorgen dat je knop en formulier voor weer op voorraad passen bij de styling van je thema. De Klaviyo "Laat het me weten wanneer beschikbaar"-knop en het formulier zijn zeer configureerbaar. Je kunt de kleuren, lettertypen, tekst en andere elementen aanpassen aan je ontwerpvoorkeuren.

Installatie van weer op voorraad wordt alleen ondersteund voor bepaalde gratis Shopify-thema's, en niet voor Shopify-webshops met aangepaste thema's. Op dit moment kan Klaviyo-support niet helpen bij het implementeren van Weer op voorraad voor webshops die aangepaste thema's gebruiken. Om te kijken welk Shopify-thema jouw webshop gebruikt, kun je een Shopify-themadetector gebruiken.

Voordat je van start gaat

Als je dit nog niet hebt gedaan, lees dan onze gids Aan de slag met Shopify voor stapsgewijze instructies over het integreren, voordat je verdergaat met dit artikel.

Als je meer wilt weten over de functie weer op voorraad en hoe je die inschakelt, lees je onze handleiding voor weer op voorraad installeren voor Shopify.

Je knop en formulier vormgeven

Wanneer je je snippet installeert, vind je in dit artikel de styling snippet voor je gratis thema.
Het standaardsnippet wordt hieronder weergegeven. Werk regelitems bij (of voeg ze toe) binnen de secties trigger: {} en modal: {} van het standaardsnippet op basis van wat er in het styling-snippet wordt weergegeven.
1. Als je bijvoorbeeld het Crave-thema hebt, hoef je alleen de volgende regel toe te voegen in de modalsectie: font_family: '"Archivo", serif;'
Voer naar wens andere stijlupdates door op de regelitems.

<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>

Crave

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;' 
}

Kleurvlok

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

Zin

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

Smaak

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

Maken

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

Rijden

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

Vernieuwen

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

Eenvoudig

Schoonheid

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

Pop

Bone

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;'
}

Speelgoed

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;'
}

Zwart-wit

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;'
}

Levendig

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;'
}

Buiten

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;'
}

Boksen

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;'
}

Debuut

Standaard

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;'
}

Licht

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;'
}

Aanbod

Licht

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;'
}

Blauw

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;'
}

Verhaal

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;'
}

Licht

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;'
}

Koud

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

Klassiek

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

Minimaal

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;'
}

Resultaat

Je hebt nu de styling van je weer op voorraad-knop en -formulier in je Shopify-webshop bijgewerkt.

Was dit artikel nuttig?

Gebruik dit formulier alleen voor feedback op artikelen. Meer informatie over hoe je contact opneemt met support.

Ontdek meer van Klaviyo

Community

Maak contact met collega's, partners en Klaviyo-experts om inspiratie op te doen, inzichten te delen en antwoorden te krijgen op al je vragen.

Naar de community

Partners

Huur een Klaviyo-gecertificeerde expert in om je te helpen met een specifieke taak of voor doorlopend marketingbeheer.

Partner inhuren

Support

Krijg ondersteuning via je account.

E-mailsupport (gratis proefperiodes en betaalde accounts) 24/7 beschikbaar

Chat-/virtuele assistentie
Beschikbaarheid varieert per locatie en type abonnement

Inloggen