Come codificare la tua barra degli annunci per il tuo negozio online
Pubblicato: 2021-08-15Sono sicuro che hai già visto banner come questi. Di solito si trovano nella parte superiore dei siti Web:
Scommetto che li vedi sempre, e per una buona ragione. Una barra degli annunci è un modo semplice ma molto efficace per comunicare informazioni critiche, tempestive e/o importanti ai tuoi clienti.
È un ottimo posto per annunciare cose come vendite, collegamenti ai tuoi account di social media, promozioni di spedizione (come la spedizione gratuita), ritardi di produzione, annunci di nuovi post sul blog e altro ancora. A volte i commercianti li usano persino per l'acquisizione di e-mail.
Una volta che hai imparato a costruirne uno tuo, puoi personalizzarlo per fare qualsiasi cosa. La parte migliore è che non è necessario installare un'app per averne una nel tuo negozio.
In questo tutorial, costruiremo questa barra degli annunci utilizzando una sezione personalizzata del tema Shopify.
Prima di poter iniziare, però, dobbiamo mappare tutte le cose di cui avremo bisogno.
Facciamo la mappatura!
Quali caratteristiche vogliamo?
È importante dedicare un minuto a pensare a tutte le funzionalità di cui hai bisogno o desideri. Ai fini di questo tutorial, creeremo le seguenti funzionalità modificabili per la nostra sezione della barra degli annunci:
- Testo (la possibilità di aggiungere testo e collegamenti con uno stile di base come grassetto e corsivo)
- Dimensione del testo
- Colore del testo
- Colore di sfondo
- Colore del bordo
- Dimensione del bordo
- Imbottitura
Crea il tuo file di sezione
Accedi alla dashboard di Shopify e vai su Negozio online > Temi .
Annuncio pubblicitario
Fare clic sul menu a discesa denominato Azioni e fare clic su Modifica codice .
Nel riquadro del browser dei file, cerca la cartella denominata Sezioni ed espandila. Fare clic sul collegamento Aggiungi una nuova sezione .
Diamo un nome alla nostra nuova sezione tematica annuncio-bar .
Una volta creato il file, vedrai il seguente codice di sezione standard precompilato.
{% schema %}
{
“nome”: “Nome sezione”,
"impostazioni": []
}
{% schema finale %}
{% foglio di stile %}
{% foglio di stile finale %}
{% javascript %}
{% endjavascript %}
Questo potrebbe sembrare confuso, ma alla fine di questo tutorial avrà più senso. Il tag schema è dove conserverai tutte le informazioni sulla tua nuova sezione.
Se desideri saperne di più sullo schema dei contenuti, dai un'occhiata alla documentazione completa di Shopify.
Successivamente, dobbiamo inserire un riferimento a questo file/codice in cui vogliamo che la nostra barra degli annunci venga visualizzata sul nostro sito web. Mettiamo il nostro in cima al sito.
Apri il file theme.liquid che si trova nel browser dei file nella cartella Layout .
Annuncio pubblicitario
Cerca il tag <body> di apertura e posizionalo proprio sotto, in questo modo:
<body class= “template-{{ template | diviso: '.' | prima }}” >
{% sezione 'announcement_bar' %}
Iniziare
Successivamente, nel file di sezione, aggiungiamo un div con una classe di annuncio . Il testo che desideri venga visualizzato nella barra degli annunci verrà racchiuso all'interno di questo div.
<div class= “annuncio” > {{ section.settings.announcement_text }} </div>
Il codice forse dall'aspetto strano che vedi all'interno del div è chiamato "tag liquido". I tag liquidi sono circondati da parentesi "ricci". Fa riferimento a un ID chiamato annuncio_testo di cui impareremo tra un minuto.
Ma prima, impostazioni di input
Le impostazioni di input vengono utilizzate dal commerciante per configurare le impostazioni del tema per il proprio negozio. Il commerciante accede alle impostazioni dalla barra laterale dell'editor del tema." –Shopify
Le impostazioni di input sono fantastiche e potenti una volta che sai come utilizzarle tutte. Fortunatamente, Shopify fornisce esempi di ciascuno nella loro documentazione che può essere trovata qui.
Elimina tutto all'interno del tag {% schema %} e sostituiscilo con il seguente. Il tuo codice completo finora dovrebbe essere simile a questo:
<div class= “annuncio” > {{ section.settings.announcement_text }} </div>
{% schema %}
{
“nome”: “Barra degli annunci”,
"impostazioni": [
{
“tipo”: “casella di controllo”,
“id”: “announcement_visibility”,
“etichetta”: “Visibilità (On/Off)”,
“predefinito”: vero
}
]
}
{% schema finale %}
(Abbiamo anche rimosso il foglio di stile e i tag javascript, FYI)
Annuncio pubblicitario
Abbiamo scelto il tipo di input della casella di controllo perché vogliamo visualizzarne uno nella parte superiore della nostra sezione in modo da poter attivare e disattivare la barra.
Ora che abbiamo configurato la nostra casella di controllo, dobbiamo avvolgere il nostro contenitore div (quello che abbiamo creato pochi istanti fa) all'interno di un tag liquido alimentato dalla nostra impostazione di visibilità.
Avvolgi il div di un annuncio in un'istruzione "if":
{% if section.settings.announcement_visibility %}
<div class= “annuncio” > {{ section.settings.announcement_text }} </div>
{% finisci se %}
{% schema %}
{
“nome”: “Barra degli annunci”,
"impostazioni": [
{
“tipo”: “casella di controllo”,
“id”: “announcement_visibility”,
“etichetta”: “Visibilità (On/Off)”,
“predefinito”: vero
}
]
}
{% schema finale %}
La nuova istruzione "if" che abbiamo aggiunto esamina le impostazioni per un ID corrispondente di annuncio_visibilità . Impostiamo il valore predefinito su true , quindi verrà visualizzata la barra.
Aggiungiamo il resto delle impostazioni
Sostituisci il codice tra il tag dello schema con il seguente:
{% schema %}
{
“nome”: “Barra degli annunci”,
"impostazioni": [
{
“tipo”: “casella di controllo”,
“id”: “announcement_visibility”,
“etichetta”: “Visibilità (On/Off)”,
“predefinito”: vero
},
{
“tipo”: “richtext”,
"id": "testo_annuncio",
“etichetta”: “Testo”,
“predefinito”: “ <p> Predefinito <em> richtext </em> <a href= \ “https://example.com/\”> contenuto </a></p> “
},
{
“tipo”: “intervallo”,
“id”: “announcement_text_size”,
“minimo”: 12,
“massimo”: 24,
"passo 1,
“unità”: “px”,
“etichetta”: “Dimensione carattere”,
“predefinito”: 16
},
{
“tipo”: “colore”,
“id”: “announcement_text_color”,
“etichetta”: “Colore testo”,
“predefinito”: “#000000”
},
{
“tipo”: “colore”,
“id”: “announcement_bg_color”,
“etichetta”: “Colore di sfondo”,
“predefinito”: “#aaa”
},
{
“tipo”: “intervallo”,
“id”: “announcement_border_size”,
“minimo”: 0,
“massimo”: 10,
"passo 1,
“unità”: “px”,
“etichetta”: “Dimensione bordo”,
“predefinito”: 4
},
{
“tipo”: “colore”,
“id”: “announcement_border_color”,
“etichetta”: “Colore bordo”,
“predefinito”: “#333333”
},
{
“tipo”: “intervallo”,
“id”: “padding_announcement”,
“minimo”: 0,
“massimo”: 20,
"passo 1,
“unità”: “px”,
“etichetta”: “imbottitura”,
“predefinito”: 5
},
{
“tipo”: “seleziona”,
"id": "annuncio_text_align",
“etichetta”: “Allineamento testo”,
"opzioni": [
{ “valore”: “sinistra”, “etichetta”: “sinistra”},
{ “valore”: “centro”, “etichetta”: “centro”},
{ “valore”: “giusto”, “etichetta”: “giusto”}
],
“predefinito”: “centro”
}
]
}
{% schema finale %}
Abbiamo molto da disfare qui, ma una volta che ci hai preso la mano, è facile da capire. Andiamo impostazione per impostazione.
Annuncio pubblicitario
Richtext
Richtext fornisce una formattazione sufficiente per essere davvero utile proprio come afferma Shopify: "Puoi utilizzare le impostazioni richtext per consentire il contenuto di testo con la formattazione di base. Le opzioni di formattazione supportate sono grassetto, corsivo, sottolineato, collegamenti e paragrafi." (Fonte)
Cursori di intervallo per la dimensione del carattere, il riempimento e la dimensione del bordo
Ho usato un dispositivo di scorrimento dell'intervallo per controllare la dimensione del testo. Ti consente di scegliere una dimensione minima e massima, oltre a un valore predefinito. Ho scelto di utilizzare px, ma è possibile utilizzare em o quello che volete. Questo stesso insieme di impostazioni viene quindi riutilizzato per controllare la dimensione del bordo inferiore della barra degli annunci, nonché il riempimento.
Colori del testo e dello sfondo
Ho usato il tipo di impostazione del colore per configurare il colore di sfondo della barra degli annunci stessa e il colore del testo.
Selezione a discesa
Per completare le nostre impostazioni, abbiamo utilizzato un tipo a discesa per l'allineamento del testo.
Preimpostazioni (opzionale)
Se hai dei preset, la sezione apparirà automaticamente nell'editor del tema e diventerà una sezione dinamica. Ciò significa che sarai in grado di spostare la sua posizione (su o giù) sulla home page se il tuo tema è abilitato per le sezioni dinamiche.
CSS
L'ultima cosa che dobbiamo fare è prendere tutte le configurazioni di stile che abbiamo scelto e tradurle in CSS. Subito dopo l'istruzione "if" sulla visibilità di apertura, aggiungi il seguente tag di stile :
<stile>
.annuncio {
font-size:{{ section.settings.announcement_text_size }} px;
background-color: {{ section.settings.announcement_bg_color }};
border-bottom: {{ section.settings.announcement_border_size}}px solido {{ section.settings.announcement_border_color }};
padding: {{ section.settings.announcement_padding}} px;
text-align: {{ section.settings.announcement_text_align }};
}
.announcement p {color: {{ section.settings.announcement_text_color }};}
.announcement a {decorazione del testo: sottolineato;}
.announcement a:hover {text-decoration: none;}
</style>
E 'qui che lo stile l'elemento Annuncio involucro che abbiamo fatto all'inizio di questo viaggio. Utilizziamo gli stessi tag liquidi per fare riferimento all'ID di ogni tipo di impostazione. È importante ricordare che quando facciamo riferimento a un ID nel nostro schema, dobbiamo premetterlo a section.settings .
Risultati finali
E proprio così, hai codificato la tua prima sezione del tema. Ora puoi avvisare facilmente i tuoi clienti della tua prossima vendita!
Ci sono molte altre cose che potresti considerare di aggiungere a questo; dichiarazioni condizionali su quali tipi di pagina è visibile (come solo la home page, forse?).
Annuncio pubblicitario
Con ciò che hai imparato in questo tutorial, combinato con l'ampia documentazione di Shopify, puoi creare una sezione tematica per fare qualsiasi cosa: elenco dei prodotti in primo piano, raccolta di prodotti in primo piano e così via.
Torna indietro e leggilo di nuovo, controlla i documenti e mettiti al lavoro! Puoi rendere il tuo tema molto migliore da solo, senza la necessità di uno sviluppatore.
Vedi il codice completo qui
