CSS personalizzato

Link in evidenza

1. Shopify CDN
2. Documentazione Shopify sull’aggiunta di CSS personalizzato al tema
3. Temi nell’admin Shopify
4. Documentazione Shopify sul supporto per i temi
5. Documentazione per sviluppatori Shopify sui tag dello schema delle sezioni
6. Documentazione Shopify sulle prestazioni web
7. Documentazione per sviluppatori Shopify sui caratteri personalizzati
8. Documentazione Shopify sulle risorse di supporto aggiuntive
9. Documentazione Shopify sul CSS personalizzato
10. Documentazione Shopify sui template

Video utili

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Aggiungere CSS personalizzato

Il CSS personalizzato consente di apportare modifiche allo stile del tema Align quando le impostazioni integrate non offrono il risultato desiderato. Usalo con attenzione e testa le modifiche prima di pubblicarle sul tuo negozio attivo.

Applicare il CSS in tutto il tema Align

Usa il CSS a livello di tema per le modifiche che devono essere visibili in tutto il negozio, ad esempio per lo stile dei pulsanti.

1. Nell’admin Shopify, vai su Online Store > Themes
2. Individua Align, quindi fai clic su Customize.
3. Fai clic su Theme settings.
4. Fai clic su Custom CSS.
5. Aggiungi il codice.
6. Fai clic su Save.

Il CSS a livello di tema si applica a tutte le pagine del negozio, ad eccezione di Checkout, ed è limitato a 1.500 caratteri.

Applicare il CSS a una sezione

Usa il CSS a livello di sezione quando una modifica deve interessare una sola sezione, ad esempio la dimensione del carattere o il colore di sfondo.

1. Nell’admin Shopify, vai su Online Store > Themes
2. Individua Align, quindi fai clic su Customize.
3. Seleziona la sezione a cui vuoi applicare lo stile.
4. Nella parte inferiore del pannello delle proprietà della sezione, fai clic su Custom CSS.
5. Aggiungi il codice.
6. Fai clic su Save.

Il CSS a livello di sezione è limitato alla sezione selezionata ed è limitato a 500 caratteri.

Rispettare i limiti del CSS personalizzato

Il CSS personalizzato richiede familiarità con CSS e HTML. Per indicazioni specifiche su Align, inizia dal supporto di Company XYZ. Per informazioni sulle limitazioni della piattaforma Shopify e sul supporto generale per i temi, consulta il supporto disponibile per i temi

1. Usa regole supportate. @import, @charset e @namespace non sono supportati. Nel CSS a livello di sezione sono consentite solo le at-rule @media, @container, @layer e @supports.
2. Indirizza con attenzione i contenuti della sezione. Il CSS a livello di sezione non può indirizzare l’ID o le classi del wrapper esterno della sezione. Una regola che inizia con il tag del wrapper principale viene trattata come una regola discendente all’interno della sezione. Il wrapper è solitamente un <div>, ma i temi possono usare altri valori consentiti
3. Usa URL di risorse approvati. Gli URL nel CSS personalizzato possono usare solo il dominio https://cdn.shopify.com.
4. Considera le prestazioni dei caratteri. I caratteri personalizzati sono consentiti, ma i browser li scaricano prima di eseguire il rendering del testo. Testa il loro effetto sulle prestazioni del negozio e scopri come usare caratteri personalizzati nel tema
5. Esegui nuovamente i test dopo gli aggiornamenti del tema. Le modifiche al markup, ai selettori o alle classi del tema possono impedire il corretto funzionamento del CSS personalizzato esistente.

Se ricevi un errore che non riesci a risolvere, contatta il supporto di Company XYZ per ricevere indicazioni su Align e consulta le risorse di supporto aggiuntive di Shopify per ricevere assistenza sulla piattaforma.

Note sull’uso

1. Inizia dalle impostazioni integrate. Usa il CSS personalizzato solo quando i controlli disponibili del tema Align non offrono il risultato desiderato.
2. Mantieni le regole mirate. Usa il CSS a livello di tema per gli stili condivisi e il CSS a livello di sezione per gli adattamenti locali.
3. Controlla ogni dimensione dello schermo. Testa le modifiche su desktop e dispositivi mobili prima di pubblicarle.
4. Salva una copia delle regole. Conserva il CSS in un luogo accessibile, così potrai ripristinarlo o aggiornarlo dopo un aggiornamento del tema.