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

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. 

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.

<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

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

}

Colorblock

trigger: {

 product_page_class: 'button'

},
modal: {

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

}

Zintuig

trigger: {

 product_page_class: 'button'

},
modal: {

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

}

Proef

trigger: {

 product_page_class: 'button'

},
modal: {

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

}

Ambacht

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

modaal: {

 font_family: '"PT Serif",serif;'

}

Pop

Bot

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

}

Risico

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

}

Levering

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

}

Verhalend

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

modaal: {

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

 font_family: '"Arapey",serif;'

}

Minimaal

Modern

modaal: {

 font_family: '"PT Serif",serif;'

}

Vintage

modaal: {

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

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

}

Mode

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

• Hoe installeer je weer op voorraad voor Shopify
• Hoe maak je unieke couponcode voor Shopify