Comment personnaliser le style des boutons et des 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

Objectif de cet article

Découvrez les principales modifications à apporter à chaque thème Shopify gratuit pour vous assurer rapidement que votre bouton et votre formulaire de retour en stock correspondent au style de votre thème. Le bouton et le formulaire Klaviyo « M’avertir lorsque disponible » sont hautement configurables. Vous pouvez modifier les couleurs, les polices, le texte et d’autres éléments en fonction de vos préférences de conception.

L’installation du retour en stock n’est prise en charge que pour certains thèmes Shopify gratuits, et non pour les boutiques Shopify qui utilisent des thèmes personnalisés. À l’heure actuelle, Klaviyo n’est pas en mesure de vous aider à mettre en place le retour en stock pour les boutiques qui utilisent des thèmes personnalisés. Pour vérifier quel thème Shopify votre boutique utilise, vous pouvez utiliser un détecteur de thème Shopify.

Avant de commencer

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

Pour en savoir plus, de manière générale, sur les fonctionnalités de retour en stock et sur la façon de l’activer, consultez notre guide sur l’installation du retour en stock pour Shopify.

Comment mettre en forme votre bouton et votre formulaire

Lorsque vous installez votre snippet, trouvez le snippet de style pour votre thème gratuit dans cet article.
L’extrait de code par défaut est affiché ci-dessous. Mettez à jour (ou ajoutez) des éléments de ligne dans les sections trigger: {} et modal: {} de l’extrait de code par défaut, conformément à ce qui est affiché dans l’extrait de code de style.
1. Par exemple, si vous avez le thème Crave, vous n’avez qu’à ajouter la ligne suivante dans la section modale : font_family: '"Archivo", serif;'
Apportez toute autre mise à jour de style souhaitée aux éléments de ligne, comme 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",{ 
    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;' 
}

Colorblock

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

Sense

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

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

Ride

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

Actualiser

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

Boxing

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

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

Clair

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

Clair

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

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

Clair

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

Mode

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

Résultat

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

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