Comment styliser les boutons et les formulaires de retour en stock pour les thèmes Shopify gratuits

Vous apprendrez

Découvrez les principales modifications à apporter à chaque thème gratuit de Shopify afin de vous assurer que votre bouton et votre formulaire de retour en stock correspondent au style de votre thème. Le bouton et le formulaire Klaviyo "Notify Me When Available" sont hautement configurables. Vous pouvez modifier les couleurs, les polices, le texte et d'autres éléments en fonction de vos préférences en matière de conception. 

Avant de commencer

Si vous ne l'avez pas encore fait, lisez notre guide " Getting started with Shopify " pour obtenir des instructions étape par étape sur l'intégration, avant de poursuivre cet article.

Pour en savoir plus sur la fonctionnalité Back in Stock et comment l'activer, lisez notre guide Comment installer Back in Stock pour Shopify.

Comment styliser votre bouton et votre formulaire

1. Lorsque vous installez votre snippet, trouvez le snippet de style pour votre thème gratuit dans cet article.
2. L'extrait par défaut est présenté ci-dessous. Mettez à jour (ou ajoutez) des éléments de ligne dans les sections trigger : {} et modal : {} du snippet par défaut en fonction de ce qui est indiqué dans le snippet de style.
   1. Par exemple, si vous avez le thème Crave, il vous suffit d'ajouter la ligne suivante dans la section modale : font_family : '"Archivo", serif;'
3. Effectuez toutes les autres mises à jour stylistiques souhaitées pour les postes, si vous le souhaitez.

<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",{ 
    déclencher : {
      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 : "Inscrivez-vous pour recevoir une notification lorsque cet article sera à nouveau en stock.",
     email_field_label : "Email",
     button_label : "Notify me when available",
     subscription_success_label : "Vous êtes inscrit ! Nous vous tiendrons au courant de son retour.",
     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",
     couleur_du_bouton : "#fff",
     couleur_arrière-plan_du_bouton : "#439fdb",
     couleur_du_bouton_de_fermeture : "#ccc",
     error_background_color : "#fcd6d7",
     error_text_color : "#C72E2F",
     success_background_color : "#d3efcd",
     couleur_du_texte_du_succès : "#1B9500"
    }
  }) ;
</script>

Craquer

trigger : {

 product_page_class: 'button'

},
modal : {

 font_family: '"Archivo", serif;'

}

Aube

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

}

Sens

trigger : {

 product_page_class: 'button'

},
modal : {

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

}

Le goût

trigger : {

 product_page_class: 'button'

},
modal : {

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

}

Artisanat

trigger : {

 product_page_class: 'button'

},
modal : {

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

}

Rouler

trigger : {

 product_page_class: 'button'

},
modal : {

 font_family: '"Avenir Next", sans-serif;'

}

Rafraîchir

trigger : {

 product_page_class: 'button'

},
modal : {

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

}

Simple

Beauté

modal : {

 font_family: '"PT Serif",serif;'

}

Pop

Os

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

}

Jouet

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

}

Noir & Blanc

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

}

Plein air

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

}

Boxe

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

}

Débuts

Défaut

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

}

Lumière

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

}

Approvisionnement

Lumière

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

}

Bleu

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

}

Narratif

Chaud

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

}

Lumière

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

}

Froid

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

Classique

modal : {

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

 font_family: '"Arapey",serif;'

}

Minime

Moderne

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

}

La mode

modal : {

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

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

}

Résultats

Vous avez maintenant mis à jour le style de votre bouton et de votre formulaire de retour en stock sur votre boutique Shopify. 

Ressources complémentaires

• Comment installer la fonction "retour en stock" pour Shopify
• Comment créer des codes de réduction uniques pour Shopify