Come creare i pulsanti e i moduli Back in Stock per i temi gratuiti di Shopify

Imparerai

Scopra quali sono le modifiche principali da apportare a ciascun tema gratuito di Shopify per assicurarsi rapidamente che il pulsante e il modulo Torna in magazzino corrispondano allo stile del suo tema. Il pulsante e il modulo di Klaviyo "Notify Me When Available" sono altamente configurabili. Può modificare i colori, i caratteri, il testo e altri elementi in base alle sue preferenze di design. 

Prima di iniziare

Se non l'ha ancora fatto, legga la nostra guida su Come iniziare con Shopify per le istruzioni passo-passo sull'integrazione, prima di continuare con questo articolo.

Per saperne di più in generale sulla funzione Back in Stock e su come attivarla, legga la nostra guida Come installare Back in Stock per Shopify.

Come stilizzare il suo pulsante e il suo modulo

1. Quando installa il suo snippet, trovi lo snippet di stile per il suo tema gratuito in questo articolo.
2. Lo snippet predefinito è mostrato di seguito. Aggiorna (o aggiunge) le voci di riga all'interno delle sezioni trigger: {} e modale: {} dello snippet predefinito in base a quanto mostrato nello snippet di stile.
   1. Per esempio, se ha il tema Crave, deve solo aggiungere la seguente riga all'interno della sezione modale: font_family: '"Archivo", serif; '
3. Apporti qualsiasi altro aggiornamento stilistico desiderato alle voci di linea, come ritiene opportuno.

<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",{ 
    innescare: {
      product_page_text: "Notify Me When Available",
      product_page_class: "button",
      product_page_text_align: "center",
      product_page_margin: "0px",
      replace_anchor: false
    },
    modale: {
     titolo: "{product_name}",
     body_content: "Si registri per ricevere una notifica quando questo articolo tornerà in stock.",
     email_field_label: "Email",
     button_label: "Notificami quando disponibile",
     subscription_success_label: "Sei dentro! Le faremo sapere quando tornerà.",
     footer_content: '',
     stili_aggiuntivi: "@import url('https://fonts.googleapis.com/css2?family=Roboto+wght@400;700&display=swap');",
     drop_background_color: "#000",
     colore_di_sfondo: "#fff",
     colore_testo: "#222",
     colore_testo_bottone: "#fff",
     colore_di_sfondo_del_pulsante: "#439fdb",
     colore_pulsante_chiusura: "#ccc",
     colore_di_sfondo_errore: "#fcd6d7",
     colore_testo_errore: "#C72E2F",
     colore_di_sfondo_successo: "#d3efcd",
     colore_testo_successo: "#1B9500"
    }
  });
</script>

Voglia

trigger: {

 product_page_class: 'button'

},
modale: {

 font_family: '"Archivo", serif;'

}

Alba

trigger: {

 product_page_class: 'button'

},
modale: {

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

}

Studio

trigger: {

 product_page_class: 'button'

},
modale: {

 font_family: '"Electra", serif;' 

}

Colorblock

trigger: {

 product_page_class: 'button'

},
modale: {

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

}

Senso

trigger: {

 product_page_class: 'button'

},
modale: {

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

}

Il gusto

trigger: {

 product_page_class: 'button'

},
modale: {

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

}

Artigianato

trigger: {

 product_page_class: 'button'

},
modale: {

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

}

Cavalcare

trigger: {

 product_page_class: 'button'

},
modale: {

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

}

Rinfrescare

trigger: {

 product_page_class: 'button'

},
modale: {

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

}

Semplice

Bellezza

modale: {

 font_family: '"PT Serif",serif;'

}

Pop

Osso

trigger: {

 product_page_class: 'btn btn--full'

},
modale: {

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

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

}

Giocattolo

trigger: {

 product_page_class: 'btn btn--large btn--full'

},
modale: {

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

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

}

Nero & Bianco

trigger: {

 product_page_class: 'btn btn--large btn--full'

},
modale: {

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

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

}

Vibrante

trigger: {

 product_page_class: 'btn btn--large btn--full'

},
modale: {

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

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

}

Avventura

Tavole da snowboard

trigger: {

 product_page_class: 'btn btn--full'

},
modale: {

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

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

}

All'aperto

trigger: {

 product_page_class: 'btn btn--full'

},
modale: {

 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'

},
modale: {

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

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

}

Debutto

Predefinito

trigger: {

 product_page_class: 'btn btn--full'

},
modale: {

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

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

}

Luce

trigger: {

 product_page_class: 'btn btn--full'

},
modale: {

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

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

}

Fornitura

Luce

trigger: {

 product_page_class: 'btn btn--full'

},
modale: {

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

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

}

Blu

trigger: {

 product_page_class: 'btn btn--large btn--full'

},
modale: {

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

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

}

Narrativo

Caldo

trigger: {

 product_page_class: 'btn btn--full'

},
modale: {

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

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

}

Luce

trigger: {

 product_page_class: 'btn btn--full'

},
modale: {

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

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

}

Freddo

trigger: {

 product_page_class: 'btn btn--full'

},
modale: {

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

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

}

Brooklyn

Classico

modale: {

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

 font_family: '"Arapey",serif;'

}

Minimo

Moderno

modale: {

 font_family: '"PT Serif",serif;'

}

Vintage

modale: {

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

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

}

Moda

modale: {

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

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

}

Risultato

Ora ha aggiornato lo stile del pulsante e del modulo Torna in magazzino sul suo negozio Shopify. 

Risorse aggiuntive

• Come installare il back in stock per Shopify
• Come creare codici coupon univoci per Shopify