Come creare i pulsanti e i moduli Back in Stock per i temi gratuiti di Shopify – Klaviyo - Help Center - IT

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.

L'installazione di back in stock è supportata solo per alcuni temi gratuiti di Shopify e non per i negozi Shopify che utilizzano temi personalizzati. In questo momento, il supporto di Klaviyo non può assistere nell'implementazione del back in stock per i negozi che utilizzano temi personalizzati. Per verificare quale tema Shopify sta utilizzando il suo negozio, può utilizzare un rilevatore di temi Shopify.

Prima di iniziare

Se non l'hai ancora fatto, leggi la nostra guida su come iniziare con Shopify per le istruzioni sull'integrazione passo passo, prima di continuare con questo articolo.

Per saperne di più in generale sulla funzionalità nuovamente disponibile e su come abilitarla, leggi la nostra guida sull'installazione nuovamente disponibile per Shopify.

Come stilizzare il suo pulsante e il suo modulo

Quando installa il suo snippet, trovi lo snippet di stile per il suo tema gratuito in questo articolo.
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; '
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