Så utformar du tillbaka i lager-knappar och -formulär för gratis Shopify-teman

Förväntad lästid: 2 minut(er)

Uppdaterad 7 juli 2025 00:00 EST

Du kommer att lära dig

Lär dig vilka viktiga ändringar du ska göra för varje kostnadsfritt Shopify-tema för att snabbt säkerställa att din tillbaka i lager-knapp och ditt formulär matchar ditt temas stil. Klaviyos knapp "Meddela mig när den är tillgänglig" och formuläret är mycket konfigurerbara. Du kan ändra färger, typsnitt, text och andra element utifrån dina designpreferenser.

Installation av tillbaka i lager stöds endast för vissa gratis Shopify-teman och inte för Shopify-butiker som använder anpassade teman. För närvarande kan Klaviyos support inte hjälpa till med att implementera tillbaka i lager för butiker som använder anpassade teman. Om du vill kontrollera vilket Shopify-tema din butik använder kan du använda en Shopify-temadetektor.

Innan du börjar

Om du inte redan har gjort det, läs vår guide om att Komma igång med Shopify för steg-för-steg-instruktioner om integrering innan du fortsätter med den här artikeln.

Om du vill läsa mer allmänt om funktionen tillbaka i lager och hur du aktiverar den kan du läsa vår guide om att installera tillbaka i lager för Shopify.

Så här utformar du din knapp och ditt formulär

När du installerar ditt snippet, hittar du styling-snippetet för ditt kostnadsfria tema i den här artikeln.
Standardmallen visas nedan. Uppdatera (eller lägg till) radartiklar i avsnitten trigger: {} och modal: {} i standardkodsnutten enligt det som visas i formgivningskodsnutten
1. Om du till exempel har temat Crave behöver du bara lägga till följande rad i modalavsnittet: font_family: '"Archivo", serif;'
Gör andra önskade stiländringar av radartiklarna som du vill.

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

Färgblock

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

Sense

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

Taste

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

Hantverk

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

Färd

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

Aktualisera

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

Enkel

Skönhet

modal: {
 font_family: '"PT Serif",serif;'
}

Pop

Ben

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

Leksak

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

Svart och vit

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

Livfull

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

Utomhus

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

Boxning

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

Debut

Standard

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

Ljus

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

Supply

Ljus

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

Blå

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

Berättande

Varm

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

Ljus

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

Kall

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

Klassisk

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

Minimal

Modern

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

Utfall

Du har nu uppdaterat utformningen av din tillbaka i lager-knapp och ditt formulär i din Shopify-butik.

Ytterligare resurser

Så skapar du unika kupongkoder för Shopify
Lär dig hur du skapar kupongkoder för engångsbruk för din Shopify-butik så att varje kund får sin egen unika kupongkod för en viss kampanj på din webbplats. Denna funktion ger dig möjlighet att skapa en generisk (även kallad statisk) kupongkod, så att du inte behöver oroa dig för att koder delas.

Var den här artikeln till hjälp?

Använd endast detta formulär för feedback på artiklar. Lär dig hur du kontaktar support.

Utforska mer från Klaviyo

Community

Få kontakt med kollegor, partner och Klaviyo-experter för att hitta inspiration, dela insikter och få svar på alla dina frågor.

Besök communityn

Partners

Anlita en Klaviyo-certifierad expert för att hjälpa dig med en specifik uppgift eller för löpande marknadsföringshantering.

Anlita en partner

Support

Få tillgång till support via ditt konto.

E-postsupport (gratis provperiod och betalkonton) Tillgänglig dygnet runt, alla dagar i veckan

Chatt/virtuell hjälp
Tillgängligheten varierar beroende på plats och abonnemangstyp

Logga in