Hjälpcenter
/
Integrationer
/
Shopify
/
Bästa praxis för Shopify

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 som ska göras för varje gratis Shopify tema för att snabbt se till att din tillbaka i lager-knapp och ditt formulär matchar ditt temas styling. Klaviyo "Meddela mig när det är tillgängligt" knappen och formuläret är mycket konfigurerbara. Du kan ändra färger, teckensnitt, text och andra element i enlighet med dina designpreferenser.

Installation av tillbaka i lager stöds endast för vissa gratis Shopify teman, och inte för Shopify butik som använder anpassade teman. För närvarande kan Klaviyo support inte hjälpa till med att implementera tillbaka i lager för butik med hjälp av 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 Komma igång med Shopify för steg-för-steg-instruktioner om integrering innan du fortsätter med den här artikeln.

För att lära dig mer generellt om tillbaka i lager funktioner och hur du aktiverar det, läs vår guide om att installera tillbaka i lager för Shopify.

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

  1. När du installerar ditt snippet hittar du styling-snippet för ditt kostnadsfria tema i den här artikeln.
  2. Standardsnippet visas nedan. uppdatera (eller lägga till) radobjekt inom trigger: {} och modal: {} i standardsnutten enligt vad som visas i styling-snutten
    1. Om du till exempel har Crave-temat behöver du bara lägga till följande rad i modalavsnittet: font_family: '"Archivo", serif;'
  3. Gör eventuella andra önskade stylinguppdateringar av posterna som du anser vara lämpliga.
text 
<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
    var Klaviyo = Klaviyo || [];
    Klaviyo {
      account: "PUBLIC_API_KEY",
      platform: "shopify"
    }.init();
    Klaviyo.enable("backinstock",{ 
    avtryckare: {
      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: "Registrera dig för att få ett meddelande när den här artikeln kommer tillbaka i lager.",
     email_field_label: "e-post",
 button_label: "Meddela mig när det är tillgängligt",
 subscription_success_label: "Du är med! Vi meddelar dig när den är tillbaka.",
     footer_content: '',
 additional_styles: "@import url('https://fonts.googleapis.com/css2?family=Roboto+wght@400;700&display=swap');",
     drop_bakgrundsfärg: "#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>

Begär

text 
trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Archivo", serif;'
}

Gryning

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

Studio

text 
trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Electra", serif;' 
}

Färgblock

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

Känsla

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

Smak

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

Hantverk

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

Åka

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

Aktualisera

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

Enkel

Skönhet

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

Pop

Ben

text 
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

text 
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

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

Levande

text 
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

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

Friluftsliv

text 
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

text 
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

text 
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

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

Leverans

Ljus

text 
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å

text 
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ättelse

Varm

text 
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

text 
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

text 
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

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

Minimal

Modern

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

Vintage

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

Mode

text 
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 stylingen av din tillbaka i lager-knapp och formulär på 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