Come aggiungo CSS personalizzato a tutto il negozio o a una sola sezione?

Il CSS cambia l'aspetto del negozio: colori, spaziature, dimensioni e altro. Puoi aggiungere il tuo CSS in due punti del builder: per tutto il negozio o per una sola sezione.

CSS personalizzato per tutto il negozio

Fai clic sull'icona dell'ingranaggio e apri la scheda CSS personalizzato. La casella si chiama Codice CSS: Si applica all'intero negozio. Il tuo CSS viene caricato in ogni pagina del mercato che stai modificando, e l'anteprima mostra il risultato.

Usala per regole che devono valere ovunque, per esempio nascondere un elemento in tutte le pagine o cambiare lo stile di tutti i pulsanti. Per esempio, h1 { text-transform: uppercase; } scrive in maiuscolo il titolo principale di ogni pagina.

CSS personalizzato per una sezione

Seleziona una sezione nella scheda Sezioni. In fondo alle sue impostazioni, apri la scheda CSS personalizzato. La sua casella Codice CSS dice Si applica solo a questa sezione. Ce l'hanno quasi tutte le sezioni, compresi header, footer, hero, informazioni prodotto e checkout.

È la scelta più sicura. Storeep aggiunge la sezione davanti a ciascuno dei tuoi selettori, quindi le tue regole non possono cambiare nulla al di fuori di essa.

• h2 { letter-spacing: 2px; } cambia solo i titoli dentro questa sezione.
• Usa & per dare stile alla sezione stessa: & { border-top: 1px solid #000; }.
• Le regole @media funzionano. Anche le regole al loro interno sono limitate alla sezione.
• Le animazioni @keyframes restano come le hai scritte.

Il CSS di sezione appartiene a quella sezione in quella pagina. Usa Applica a tutte le pagine sulla sezione per copiarla, con il suo CSS, nelle altre pagine che la contengono. Vedi Applica a tutte le pagine.

Quale usare

• Una sola sezione ha un aspetto sbagliato: usa il CSS personalizzato della sezione.
• La stessa modifica serve ovunque: usa la scheda CSS personalizzato nelle impostazioni.
• Prima di scrivere CSS, controlla se un'impostazione lo fa già: i colori sono in Schemi di colori, i font in Impostazioni dei font, e angoli e ombre dipendono dal tema.

Quando il CSS non funziona

• Controlla se manca una } o un ;. Un solo errore può bloccare le regole che seguono.
• La tua regola può essere più debole di quella del tema. Rendi il selettore più specifico.
• Nel CSS di sezione, non iniziare il selettore con body o html. Sono fuori dalla sezione, quindi la regola non funzionerà.
• Se la pagina sembra rotta, togli l'ultima modifica, pubblica e aggiungi di nuovo le regole una alla volta.

Da sapere

• Il CSS personalizzato appartiene al mercato che stai modificando. Ripetilo in ogni mercato che ne ha bisogno.
• Cambiare tema può cambiare i nomi delle classi e il layout, quindi controlla il CSS personalizzato dopo un cambio di tema.
• Le modifiche vanno online quando fai clic su Pubblica.
• Per HTML e codice dentro una pagina, vedi Codice personalizzato.