Helpcentrum
/
Integraties
/
Shopify
/
Best practices voor Shopify

Hoe stijl je weer op voorraad knoppen en formulieren voor gratis Shopify thema's

Ongeveer 2 minuten lezen
|
Bijgewerkt 7 jul 2025, 00:00 EST

Wat je leert

Leer welke belangrijke wijzigingen je moet maken voor elk gratis Shopify thema om er snel voor te zorgen dat je weer op voorraad knop en formulier overeenkomen met de styling van je thema. De Klaviyo "Notify Me When Available" knop en 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 zaak met aangepaste thema's. Op dit moment kan Klaviyo support niet helpen bij het implementeren van weer op voorraad voor zaken met behulp van aangepaste thema's. Om te controleren welk Shopify thema je zaak gebruikt, kun je een Shopify themadetector gebruiken.

Voordat je van start gaat

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

Als je meer wilt weten over de weer op voorraad functies en hoe je deze kunt inschakelen, lees dan onze gids over weer op voorraad installeren voor Shopify.

Hoe je je knop en formulier kunt stylen

  1. Wanneer je je snippet installeert, vind je de styling snippet voor je gratis thema in dit artikel.
  2. De standaard snippet wordt hieronder getoond. regelitems bijwerken (of toevoegen) binnen de trigger: {} en modal: {} secties van de standaard snippet volgens wat wordt getoond in de styling snippet
    1. Als je bijvoorbeeld het Crave-thema hebt, hoef je alleen de volgende regel toe te voegen in het modale gedeelte: font_family: '"Archivo", serif;'
  3. Pas de styling van de regelitems naar wens aan.
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.inschakelen("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: "Registreer om een melding te ontvangen wanneer dit artikel weer op voorraad komt.",
     email_veld_label: "Email",
 button_label: "Notify me when available",
 subscription_success_label: "Je doet mee! We laten het je weten als het terug is.",
     voettekst: '',
 aanvullende_stijlen: "@import url('https://fonts.googleapis.com/css2?family=Roboto+wght@400;700&display=swap');",
     druppel_achtergrond_kleur: "#000",
 achtergrond_kleur: "#fff",
 tekst_kleur: "#222",
 button_text_color: "#fff",
 button_background_color: "#439fdb",
 close_button_color: "#ccc",
 error_background_color: "#fcd6d7",
 error_text_color: "#C72E2F",
 succes_achtergrond_kleur: "#d3efcd",
 succes_tekst_kleur: "#1B9500"
 }
 });
</script>

Crave

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

Dawn

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

Studio

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

Colorblock

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

Zintuig

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

Proef

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

Ambacht

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

Rijden

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

Vernieuwen

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

Eenvoudig

Schoonheid

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

Pop

Bot

text 
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

text 
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

text 
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

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

Risico

Snowboards

text 
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

text 
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

text 
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

text 
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

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

Levering

Licht

text 
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

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

Verhalend

Warm

text 
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

text 
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

text 
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

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

Minimaal

Modern

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

Vintage

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

Mode

text 
modaal: {
 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 op je Shopify zaak bijgewerkt.

Extra hulpbronnen

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