Tema Mythic per Shopify
Benvenuto in Mythic!
Header
La sezione Header controlla la navigazione di primo livello, il branding e i controlli di utilità ad accesso rapido nel tuo negozio. Le impostazioni principali ti permettono di regolare il colore di sfondo, l'altezza dell'header, la visualizzazione sticky, il layout del logo e controlli specifici per funzionalità chiave:
Barra di Ricerca:
Attiva o disattiva la visibilità della barra di ricerca centrale e personalizza il testo segnaposto.
Cassetto Menu:
Seleziona i menu di navigazione, personalizza il testo dei link e scegli di visualizzare la navigazione in un cassetto laterale (anche su desktop) posizionato a destra.
Cassetto Account e Carrello:
Imposta etichette personalizzate per i trigger dell'account cliente e del carrello, e definisci l'intestazione dello stato vuoto per il cassetto del carrello.
Accordion
La sezione Accordion ti permette di creare elenchi di testo a scomparsa, perfetti per Domande Frequenti o politiche del negozio. I visitatori possono cliccare su qualsiasi domanda per aprirla e leggere la risposta, mantenendo la pagina pulita e organizzata. Puoi facilmente impostare il titolo principale della sezione, cambiare il colore del testo e regolare lo spazio sopra e sotto il blocco usando semplici cursori nell'Editor del Tema.
Divisione Azione
La sezione Divisione Azione abbina un messaggio testuale dettagliato a sinistra con una casella funzionale dedicata o un menu di contatto diretto a destra. È ideale per mostrare servizi come valutazioni all'ingrosso, conto vendita o canali speciali di supporto clienti. Puoi personalizzare il titolo principale, il sottotitolo, la descrizione, i pulsanti tag e il titolo della barra laterale, oltre a regolare le dimensioni dei font, la larghezza della barra laterale e i colori di sfondo e accento individuali direttamente nelle impostazioni.
Slider Blog
La sezione Slider Blog presenta gli ultimi post e storie del tuo negozio in un carosello pulito e scorrevole. Nelle impostazioni principali della sezione, puoi impostare un colore di sfondo o un gradiente, personalizzare il padding superiore e inferiore, regolare il peso dei font e impostare etichette standard come il titolo della sezione, il testo del link e i pulsanti "leggi di più". Aggiungendo blocchi Articolo individuali, puoi mostrare post standard del blog o storie personalizzate con opzioni per layout a immagine intera o a scheda divisa, immagini personalizzate, sfondi video (YouTube, Vimeo o MP4) e link di reindirizzamento personalizzati.
Banner Call to Action
Il Banner Call to Action crea una sezione promozionale ampia e accattivante progettata per stimolare l'engagement dei clienti. Puoi personalizzare il sottotitolo, il titolo principale, la descrizione e il pulsante call-to-action con un link diretto. Puoi anche aggiungere blocchi Info individuali, che vengono visualizzati automaticamente sotto il testo con icone di spunta pulite per evidenziare punti chiave di fiducia o garanzie. Le impostazioni della sezione ti permettono anche di regolare il padding superiore e inferiore e scegliere un colore di sfondo o un gradiente personalizzato.
Centro Campagne
La sezione Centro Campagne mostra una griglia strutturata di schede promozionali per evidenziare offerte chiave del negozio, campagne e contenuti esclusivi. Le impostazioni della sezione controllano i titoli principali, le colonne per riga, lo stile di sfondo e gli effetti hover globali delle schede, mentre i blocchi Scheda individuali ti permettono di personalizzare titoli, descrizioni, link dei pulsanti e icone.
Come Ottenere Codici Icona SVG
Per aggiungere icone vettoriali personalizzate alle tue schede:
- Trova un'Icona: Visita una libreria di icone open-source gratuita (come Lucide Icons o Tabler Icons).
- Copia il Codice SVG: Cerca l'icona desiderata (ad esempio, un cuore, una stella o un diamante), cliccaci sopra e seleziona Copia SVG o Copia Codice.
- Incolla nelle Impostazioni: Incolla il blocco di codice raw direttamente nel campo Icona del tuo blocco Scheda.
Cassetto Carrello
Il Cassetto Carrello permette ai clienti di visualizzare in anteprima e gestire gli articoli tramite un menu a discesa hover nell'header o un cassetto a scorrimento verso l'alto con controlli di quantità, input promozionali e link al checkout (richiede l'aggiunta del blocco Cassetto Carrello sotto l'Header). In Impostazioni Tema > Premi Carrello, puoi configurare fino a tre soglie di spesa a livelli (ad esempio, livelli di spesa per sconti del 30%, 50% o 70%) per mostrare una barra di progresso dinamica delle ricompense direttamente all'interno del cassetto.
Griglia Galleria Contenuti
La Griglia della Galleria Contenuti abbina elementi multimediali in evidenza (video e immagini statiche) accanto a un pulito carosello di recensioni dei clienti.
• Impostazioni Generali della Sezione: Personalizza il padding superiore e inferiore, il sottotitolo della sezione (es. "RECENSIONI DEI CLIENTI"), l'immagine principale, il media video e i colori del bordo del contenitore. Per i contenuti video, puoi caricare un file MP4 diretto tramite Shopify Video o inserire un URL YouTube (usato automaticamente se non è selezionato un video Shopify), con un'opzione per attivare/disattivare la Riproduzione Automatica del Video.
• Blocchi Recensione: Aggiungi più blocchi Recensione per creare uno slider di testimonianze accanto alla tua griglia multimediale. Per ogni singolo blocco recensione, puoi regolare: valutazione a stelle, testo della recensione, autore ed etichetta.
Carosello Collezione
La sezione Carosello Collezione mostra prodotti da una collezione selezionata in uno slider pulito e scorrevole orizzontalmente con frecce di navigazione.
- Collezione e Intestazione: Scegli quale collezione del negozio mostrare e imposta un titolo personalizzato per la sezione (es. "Carte Fantasy Mythos").
- Impostazioni Badge: Aggiungi un badge promozionale (es. "NUOVO") accanto all'intestazione, seleziona il colore di accento e attiva/disattiva la posizione del badge in alto per allinearlo.
- Pulsanti e Navigazione: Personalizza le etichette predefinite per i pulsanti delle singole schede prodotto (es. "Aggiungi al carrello") e configura un pulsante indipendente per la sezione con etichetta personalizzata (es. "Acquista Collezione") e link diretto.
- Stile e Layout: Imposta colori personalizzati per lo sfondo della sezione, lo sfondo del pulsante e il testo del pulsante, insieme ai controlli di padding superiore e inferiore della sezione.
Elenco Collezioni
La sezione Elenco Collezioni crea una griglia di schede interattive con gradienti personalizzati, icone vettoriali e link diretti alle collezioni. Puoi personalizzare il colore di sfondo della sezione, l'intestazione, il numero di colonne per riga e i colori di accento al passaggio del mouse, quindi aggiungere singoli blocchi Scheda Collezione per rappresentare ogni collezione.
Impostazioni Blocco Scheda Collezione
Per ogni blocco scheda, puoi configurare:
- Collezione: Seleziona la collezione di destinazione per il link di reindirizzamento.
- Titolo Collezione: Inserisci l'etichetta personalizzata della scheda (es. "Nuovi Arrivi").
- Icona: Incolla il codice raw
- Gradiente Sfondo Scheda: Aggiungi un codice CSS linear-gradient per dare a ogni scheda una transizione di colore di sfondo distinta. Formato: linear-gradient(direzione, colore1, colore2)
Griglia Collezioni
La sezione Griglia Collezioni mostra un layout reattivo di schede collezione in evidenza con immagini in evidenza e titoli diretti delle collezioni. I controlli della sezione consentono di attivare la dimensione degli elementi della griglia (Piccolo/Grande) e regolare la spaziatura della griglia, mentre i singoli blocchi collezione permettono di selezionare e mostrare specifiche collezioni del negozio.
Modulo di Contatto
La sezione Modulo di Contatto mostra un modulo di richiesta cliente semplificato all'interno di un contenitore a scheda scura. Le impostazioni consentono la completa personalizzazione di titoli, sottotitoli, descrizioni, etichette del pulsante di invio e etichette personalizzate o testo segnaposto per i campi Oggetto, Email e Messaggio.
Hero
La sezione Hero presenta un banner a tutta larghezza con sfondo, sovrapposizioni di testo centrate e un pulsante call-to-action. I controlli della sezione consentono di selezionare l'immagine di sfondo e regolare l'altezza complessiva del banner, mentre i blocchi di contenuto permettono di aggiungere elementi personalizzabili come Titolo, Paragrafo e Pulsante.
Punti Caldi Hero
La sezione Punti Caldi Hero combina un banner hero interattivo con icone hotspot puntuali (+ indicatori) che rivelano caroselli di collezioni collegate al passaggio del mouse. Le impostazioni della sezione controllano la tipografia hero, lo stile del pulsante, le immagini di sfondo desktop/mobile e l'opacità della sovrapposizione, mentre i singoli blocchi Hotspot consentono di assegnare titoli, descrizioni, collezioni target e coordinate precise X/Y in percentuale per posizionare ogni puntina sull'immagine.
Vetrina con Suggerimenti
La sezione Vetrina con Suggerimenti abbina un banner di sfondo in evidenza con titoli allineati a sinistra, descrizioni e blocchi personalizzabili di elementi a elenco puntato. Le impostazioni della sezione consentono di regolare i media di sfondo, l'opacità della sovrapposizione e lo stile della scheda (colori e raggio del bordo), mentre i blocchi Hotspot permettono di posizionare puntine interattive sull'immagine con coordinate X/Y indipendenti per desktop e mobile per mostrare dettagli e link a comparsa.
Marquee di Testo
La sezione Marquee di Testo crea un banner di testo animato e scorrevole continuamente per annunci e avvisi del sito. Le impostazioni della sezione consentono di personalizzare il colore di sfondo, il colore del testo, la dimensione del carattere e la spaziatura tra gli elementi, mentre i singoli blocchi di Testo permettono di aggiungere messaggi promozionali unici, emoji o note di aggiornamento al ciclo del marquee.
Testo con Icone
La sezione Testo con Icone mostra schede caratteristiche con icone personalizzate, titoli e descrizioni disposte in una griglia multicolonna. Le impostazioni generali della sezione consentono di personalizzare titoli, colonne per riga, spaziatura della griglia, dimensioni delle icone e un badge opzionale di conteggio passaggi, mentre i singoli blocchi Box permettono di caricare immagini o inserire icone vettoriali SVG raw, impostare sfondi a gradiente personalizzati e configurare colori specifici della scheda e pulsanti call-to-action.
Per ottenere il codice SVG, visita una libreria di icone open-source come Lucide Icons o Tabler Icons, cerca l'icona desiderata e clicca su Copy SVG o Copy Code. Poi incolla direttamente il blocco di codice raw nel campo SVG del tuo blocco Box.
Breadcrumbs
La sezione Breadcrumbs fornisce una navigazione semplice della pagina con un pulsante indietro a sinistra e un indicatore della pagina corrente a destra. Le impostazioni della sezione consentono di personalizzare il colore di sfondo, l'etichetta del pulsante indietro (es. "Torna indietro") e il testo prefisso dell'indicatore di visualizzazione (es. "Stai visualizzando:").
Multicolonna
La sezione Multicolonna ti permette di mostrare contenuti affiancati per evidenziare vantaggi chiave, passaggi o caratteristiche del negozio in un layout pulito. Puoi impostare un titolo principale e un sottotitolo per l'intera sezione, oltre ad aggiungere o rimuovere singoli blocchi colonna per mostrare immagini, titoli e brevi descrizioni.
Lista dei Desideri
La sezione Lista dei Desideri crea uno spazio dedicato per mostrare tutti gli articoli che un cliente ha salvato durante la navigazione.
Quando un acquirente clicca sul pulsante utility Lista dei Desideri in qualsiasi pagina prodotto, quell'articolo viene salvato e automaticamente popolato come griglia di schede all'interno di questa sezione—offrendo ai clienti un luogo facile e centralizzato per rivedere e acquistare in seguito i loro articoli preferiti.
Sezione Prodotto
La sezione Prodotto presenta un layout a due colonne che mostra i media del prodotto insieme ai dettagli chiave e alle opzioni di acquisto. Le impostazioni principali consentono di regolare il colore di sfondo, la larghezza della sezione, le immagini sticky, il raggio del bordo e lo zoom dell'immagine, mentre blocchi come Titolo, Prezzo, Inventario, Selettore Variante e Pulsanti Acquista completano il layout core del prodotto.
Blocco: Scheda Dettagli
Il blocco Dettagli scheda organizza le informazioni sul prodotto in un'interfaccia a schede pulita per mantenere la pagina ordinata e facile da navigare. Puoi impostare titoli personalizzati per le schede (ad esempio, "Descrizione della carta" e "Panoramica della carta") e inserire testo arricchito per ogni area di contenuto corrispondente.
Consiglio: Per importare automaticamente la descrizione reale del tuo prodotto da Shopify, clicca sull'icona Connetti fonte dinamica (il simbolo del database accanto all'etichetta del campo) sopra la casella di contenuto e seleziona Descrizione.
Blocco: Caratteristiche del prodotto
Il blocco Caratteristiche del prodotto mostra attributi chiave—come Rarità della carta o Condizione—in un elenco pulito di etichette e valori (supporta fino a 6 coppie di caratteristiche personalizzate).
Come collegare dettagli personalizzati del prodotto
- Crea il campo dettaglio (configurazione una tantum)
•Vai su Impostazioni > Dati personalizzati > Prodotti in Shopify.
• Clicca su Aggiungi definizione, nomina il tuo dettaglio (come "Rarità della carta") e clicca Salva. - Aggiungi dettagli a un prodotto
• Apri la pagina del tuo prodotto in Shopify.
• Scorri fino alla sezione Metafields in fondo, inserisci il valore (come "Raro") e salva. - Mostralo nel tuo negozio
• Nell'editor del tema, apri il blocco Caratteristiche del prodotto.
• Digita l'etichetta (es. "Rarità della carta") nella casella Titolo.
• Nella casella Testo, clicca sull'icona del database impilata nell'angolo e seleziona il nome del dettaglio per collegarlo automaticamente!
Blocco: Testo con icona
Il blocco Testo con icona mostra fino a 3 pillole compatte di caratteristiche affiancate all'interno della sezione prodotto per evidenziare i punti di forza principali (come spedizione veloce, garanzie sul prodotto o autenticità). Ogni blocco di testo consente di inserire testo personalizzato insieme al codice SVG grezzo per visualizzare l'icona vettoriale scelta.
Blocco: Pulsante Utility
Il blocco Pulsante Utility aggiunge azioni secondarie alla pagina del prodotto, permettendo ai clienti di salvare articoli o condividere prodotti con altri. Le impostazioni consentono di attivare o disattivare indipendentemente i pulsanti Lista dei desideri e Condividi e di personalizzare il testo dell'etichetta del pulsante per ciascuno.
Impostazioni Tema
Tipografia
Le impostazioni di Tipografia controllano gli stili globali dei font in tutto il tuo negozio. Selezionare un font Primario (come Work Sans) stabilisce un'identità visiva coerente, applicando automaticamente il carattere scelto a intestazioni, testo del corpo, pulsanti ed elementi di navigazione in tutto il sito.
Layout
Le impostazioni di Layout definiscono le dimensioni strutturali e gli spazi del tuo negozio controllando la Larghezza della pagina (larghezza massima del contenitore per il contenuto principale) e il Margine della pagina (spaziatura laterale esterna per evitare che il contenuto tocchi i bordi dello schermo su display più piccoli).
Colori
Le impostazioni di Colori stabiliscono la palette di colori globale del tuo negozio per una completa coerenza del marchio in ogni pagina:
- Sfondo e Primo piano: Imposta il colore di sfondo principale della pagina e lo stile accentuato predefinito.
- Primario e Secondario: Definisce i colori del font per le intestazioni principali (Primario) e per il testo del corpo (Secondario).
- Bordo e Accento: Controlla i divisori di linea, i bordi dei contenitori e gli accenti strutturali.
- Controlli Pulsanti: Personalizza i colori di sfondo, testo e bordo per i pulsanti.
- Link e Hover: Imposta i colori predefiniti dei collegamenti ipertestuali e i loro stati interattivi al passaggio del mouse.
Social
Le impostazioni di Social ti permettono di aggiungere link ai profili social del tuo marchio. Basta incollare gli URL dei tuoi profili nei campi corrispondenti alle piattaforme, e le icone social corrispondenti appariranno automaticamente nel footer.
Logo
Le impostazioni del Logo ti permettono di caricare il logo principale del negozio, controllare la dimensione di visualizzazione in pixel e impostare un'icona favicon per rappresentare il sito nelle schede del browser.
Premi Carrello
Le impostazioni Premi Carrello ti permettono di incentivare ordini più grandi impostando fino a tre obiettivi di spesa a livelli. Definisci importi specifici del carrello e etichette personalizzate per ogni livello per mostrare una barra di progresso dinamica direttamente nel cassetto del carrello, incoraggiando i clienti ad aggiungere più articoli per sbloccare sconti o vantaggi.