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

Environ 2 min de lecture

Mise à jour le 7 juil. 2025, 00:00 EST

Vous apprendrez

Découvrez les principales modifications à apporter à chaque thème gratuit de Shopify afin de vous assurer que votre bouton et votre formulaire de retour en stock correspondent au style de votre thè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 éléments en fonction de vos préférences en matière de conception.

L'installation de la fonction "retour en stock" n'est possible que pour certains thèmes gratuits de Shopify, et non pour les boutiques Shopify utilisant des thèmes personnalisés. Pour l'instant, le support Klaviyo ne peut pas vous aider à mettre en place un retour en stock pour les magasins utilisant des thèmes personnalisés. Pour vérifier quel thème Shopify est utilisé par votre boutique, vous pouvez utiliser un détecteur de thème Shopify.

Avant de commencer

Si vous ne l’avez pas encore fait, lisez notre guide sur les débuts avec Shopify pour obtenir des instructions étape par étape sur l’intégration, avant de poursuivre cet article.

Pour en savoir plus généralement sur les fonctionnalités du retour en stock et comment l'activer, lisez notre guide sur l'installation du retour en stock pour Shopify.

Comment styliser votre bouton et votre formulaire

Lorsque vous installez votre snippet, trouvez le snippet de style pour votre thème gratuit dans cet article.
L'extrait par défaut est présenté ci-dessous. Mettez à jour (ou ajoutez) des éléments de ligne dans les sections trigger : {} et modal : {} du snippet par défaut en fonction de ce qui est indiqué dans le snippet de style.
1. Par exemple, si vous avez le thème Crave, il vous suffit d'ajouter la ligne suivante dans la section modale : font_family : '"Archivo", serif;'
Effectuez toutes les autres mises à jour stylistiques souhaité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",{ 
    dé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 à nouveau en stock.",
     email_field_label : "Email",
     button_label : "Notify me when available",
     subscription_success_label : "Vous ê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_arriè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_succè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 goû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;'
}

Rafraîchir

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

Simple

Beauté

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

Débuts

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

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

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

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

Résultats

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

Ressources complémentaires

Cet article vous a-t-il été utile ?

Utilisez ce formulaire uniquement pour nous faire part de vos commentaires sur cet article. Comment contacter l’assistance.

Explorer d’autres contenus Klaviyo

Communauté

Contactez des membres de votre secteur, des partenaires et des experts Klaviyo pour trouver de l’inspiration, partager des informations et obtenir des réponses à toutes vos questions.

Découvrez la Communauté

Partenaires

Engagez un expert certifié Klaviyo pour vous aider avec une tâche spécifique ou pour la gestion continue du marketing.

Engager un partenaire

Assistance

Accédez à l’assistance par l’intermédiaire de votre compte.

Assistance par e-mail (essai gratuit et comptes payants) Disponible 24 h/24, 7 j/7

Assistance par chat/virtuelle
La disponibilité varie selon la localisation et le type d’abonnement.

Se connecter