Come aggiungere Koalendar a Shopify
Consenti ai clienti di prenotare appuntamenti senza uscire dal tuo negozio Shopify. Bastano due semplici passaggi:
- Copia il codice di incorporamento (o il link) di Koalendar
- Incollalo nell'area Liquid/HTML personalizzato di Shopify e salva
📑 Menu
- Passaggio 1 – Copia il codice di incorporamento di Koalendar
- Passaggio 2 – Aggiungilo su Shopify
- Risoluzione dei problemi
- Quale stile dovrei usare?
👉 Passaggio 1 – Copia il codice di incorporamento di Koalendar
- Nella dashboard di Koalendar, clicca su "Condividi " accanto alla pagina di prenotazione che desideri utilizzare.
- Seleziona " Aggiungi al sito web".
- Scegli uno stile di incorporamento e clicca su " Copia codice".
| Stile incorporato | Ciò che vedono gli acquirenti |
|---|---|
| Incorporamento in linea 🖥️ | Il calendario completo è visibile direttamente sulla pagina del prodotto. |
| Widget a comparsa 📍 | Pulsante "Prenota ora" mobile che apre il calendario in una finestra a comparsa. |
| Testo/pulsante a comparsa 🔗 | Qualsiasi link o pulsante fa apparire un calendario a comparsa. |
🎨 Suggerimento: personalizza colori, testo e posizione in Koalendar prima di copiarli, in modo che si adattino al tema del tuo negozio.
➕ Ti serve solo un link normale? Copia l'URL di condivisione di Koalendar e associa il link a un pulsante o a una voce di menu per aprire il calendario in una nuova scheda.
📝 Passaggio 2 – Aggiungilo su Shopify
A. Inserimento in linea o finestra a comparsa con testo/pulsante (pagina o sezione)
- Nell'area di amministrazione di Shopify, vai su Negozio online → Temi e clicca su Personalizza per il tema pubblicato.
- Vai alla pagina o al modello in cui desideri inserire il calendario.
- Fai clic su "Aggiungi sezione " (o "Aggiungi blocco"), quindi seleziona " Liquid personalizzato " (o " HTML personalizzato " per i temi meno recenti).
- Incolla il codice di Koalendar nella casella di testo.
- Salva e poi visualizza l'anteprima: il calendario o il pop-up dovrebbero caricarsi immediatamente.
B. Widget a comparsa (pulsante mobile in tutto il sito)
- Negozio online → Temi → Azioni (pulsante ...) → Modifica codice.
- Apri il file layout/theme.liquid (o theme.liquid nei temi più recenti).
- Scorri fino in fondo alla pagina e incolla lo script del widget Koalendar proprio prima di ************
</body>. - Salva. Il pulsante mobile ora è visibile sulla tua vetrina.
📝 Alcuni temi dispongono di una casella " Impostazioni tema → Script personalizzati ". Puoi incollare lì lo script del widget invece di modificare il codice.
🛠️ Risoluzione dei problemi
| Problema | Correggi |
| Il calendario/widget non viene visualizzato | Assicurati di aver incollato l'intero codice e di aver salvato il tema. Svuota la cache del browser e ricarica la pagina. |
| Il link a comparsa viene visualizzato ma non si apre | Verifica che sia lo snippet di attivazione che lo script di Koalendar si trovino nella stessa pagina/modello. |
| Il widget è presente su tutte le pagine, ma tu lo vuoi solo su una | Incolla il codice di incorporamento in quella pagina specifica anziché in theme.liquid. |
| L'altezza del calendario sembra sbagliata | Regola l'altezza in Koalendar prima di copiare oppure racchiudi il codice di incorporamento in un elemento div con CSS personalizzati. |
🤔 Quale stile dovrei usare?
| Obiettivo | Il metodo migliore |
| Mostra il calendario all'interno della pagina di un prodotto o di una scheda informativa | Incorporamento in linea 🖥️ |
| Invito all'azione per tutto il negozio | Widget a comparsa 📍 |
| Aggiungi una pianificazione a un CTA esistente | Testo/pulsante a comparsa 🔗 |
| Semplice link esterno | Inserisci il link al tuo URL di Koalendar |