Aggiunta di codice CSS personalizzato ai temi

I fogli di stile CSS permettono di modificare il modo in cui gli elementi vengono mostrati in un tema e consentono di controllare l'aspetto di più pagine simultaneamente. Puoi personalizzare ulteriormente le impostazioni integrate del tema utilizzando la funzionalità di personalizzazione CSS. Puoi aggiungere codice CSS personalizzato a tutto il tema oppure a una sezione specifica di un modello del tema. Il codice CSS personalizzato non è supportato nella pagina Check-out.

Per personalizzare il codice CSS è richiesta una certa dimestichezza con CSS e HTML. Prima di personalizzare il tema, verifica il livello di assistenza disponibile.

Considerazioni sull'utilizzo del codice CSS personalizzato

Nota

Il codice CSS personalizzato sostituisce le impostazioni del tema, pertanto le modifiche che apporti utilizzando il codice CSS personalizzato avranno la precedenza sulle impostazioni integrate del tema.

Prima di aggiungere codice CSS personalizzato al tema, esamina le seguenti considerazioni:

• I seguenti selettori CSS non sono supportati nel codice CSS personalizzato:

  • Le at-rules @import, @charset e @namespace non possono essere utilizzate
  • Per il CSS a livello di sezione, sono consentiti solo le at-rules @media, @container, @layer e @supports
  • Per il codice CSS a livello di sezione, non puoi scegliere l'ID o le classi di destinazione dell'elemento di disposizione della sezione Shopify visualizzato dal tema con la classe shopify-section

• Se una regola del codice CSS personalizzato viene dichiarata con il tag per la disposizione dell'elemento della sezione principale, il tag è considerato discendente e la regola di definizione dello stile viene applicata a tale sezione. Per impostazione predefinita la sezione principale presenta il tag <div> , ma può essere impostata su uno qualsiasi dei valori consentiti nello schema della sezione dagli sviluppatori del tema.

• Attualmente per gli URL utilizzati nel codice CSS personalizzato è consentito solo il dominio https://cdn.shopify.com.

• I font personalizzati non sono soggetti a restrizioni. Tuttavia, sono una risorsa separata scaricata dai browser prima che il testo venga visualizzato, il che può influire sulla performance complessiva del negozio. È tua responsabilità assicurarti che i font personalizzati non abbiano un impatto negativo sulla tua vetrina virtuale. Scopri come utilizzare font personalizzati nel tema.

• Le regole CSS che influiscono sull'intero tema hanno un limite massimo di 1500 caratteri.

• Le regole CSS che influiscono su una sezione specifica hanno un limite massimo di 500 caratteri.

• A seconda delle classi o dei selettori CSS utilizzati, l'aggiornamento del tema potrebbe interrompere il funzionamento del codice CSS personalizzato.

Shopify non fornisce assistenza su personalizzazioni avanzate dei temi. Se riscontri un errore relativo a queste limitazioni nel codice CSS personalizzato e non riesci a determinare quale è la causa dell'errore, consulta l'elenco delle altre risorse di assistenza disponibili.

Aggiunta del codice CSS personalizzato

Il codice CSS personalizzato può essere aggiunto all'intero tema, ovvero a tutte le pagine del negozio online, a eccezione della pagina Check-out. Ad esempio, puoi modificare il modo in cui i pulsanti vengono visualizzati in tutto il negozio.

Procedura:

1. Dal pannello di controllo Shopify vai su Negozio online > Temi.
2. Fai clic su Personalizza.
3. Clicca su Impostazioni tema.
4. Clicca su Codice CSS personalizzato.
5. Aggiungi il codice.
6. Clicca su Salva.

Il codice CSS personalizzato può anche essere aggiunto a una sezione specifica del tema. Se aggiungi il codice CSS personalizzato a una sezione del tema, l'ambito del codice CSS sarà quello della sezione. Ad esempio, puoi personalizzare la dimensione del font o il colore dello sfondo di una singola sezione.

Procedura:

1. Dal pannello di controllo Shopify vai su Negozio online > Temi.
2. Fai clic su Personalizza.
3. Clicca sulla sezione a cui desideri aggiungere il codice CSS.
4. Nella parte inferiore del pannello delle proprietà della sezione clicca su Codice CSS personalizzato.
5. Aggiungi il codice.
6. Clicca su Salva.

Risorse aggiuntive per il codice CSS

Per personalizzare il codice CSS è richiesta una certa dimestichezza con CSS e HTML. Prima di personalizzare il tema, verifica il livello di assistenza disponibile.

Se desideri saperne di più sul codice CSS, puoi consultare le seguenti risorse:

• Nozioni di base su CSS
• Formattazione HTML con CSS
• Riferimenti su CSS
• Selettori CSS