Codice personalizzato

Link in evidenza

1. Documentazione Shopify su sezioni e blocchi
2. Documentazione di Company XYZ sulla sezione del codice personalizzato
3. Documentazione di Company XYZ sul blocco delle risorse personalizzate
4. Documentazione di Company XYZ sul blocco CSS personalizzato
5. Documentazione di Company XYZ sul blocco JavaScript personalizzato

Video utili

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Usate questa sezione per inserire CSS personalizzato, JavaScript o incorporamenti completi di asset direttamente in un template. È ideale per modifiche avanzate e specifiche della pagina, come override di stile, servizi incorporati o script che devono essere caricati solo in un’area specifica.

Il codice personalizzato può influire su layout, prestazioni, accessibilità e comportamento interattivo. Verificate con attenzione su desktop e dispositivi mobili prima di pubblicare le modifiche.

Impostazioni standard della sezione

Questa sezione non include controlli visivi della sezione. Al contrario, la costruite con i blocchi in modo che CSS, JavaScript e inclusioni di asset esterni possano essere mantenuti separati e più facili da gestire. Per una panoramica più ampia della struttura dell’editor del tema, consultate la documentazione Shopify sulle sezioni e i blocchi

Il testo di aiuto della sezione include il riferimento canonico per Codice personalizzato. In pratica, questa sezione funziona meglio quando avete bisogno di un comportamento personalizzato a livello di template invece di modifiche più ampie a livello di sito.

Tipi di blocco supportati

1. Asset personalizzato
2. CSS personalizzato
3. JavaScript personalizzato

Riferimento dei blocchi

Asset personalizzato

Usate questo blocco quando dovete incollare un’inclusione completa di asset, come un link a un foglio di stile o un tag script esterno. È la scelta giusta per servizi di terze parti che forniscono un incorporamento completo o uno snippet di asset anziché solo CSS o JavaScript grezzo. Per il riferimento del blocco, consultate Blocco Asset personalizzato.

1. Usate un blocco per ogni servizio o file, così gli aggiornamenti e la risoluzione dei problemi restano semplici.
2. Riservate questo blocco alle inclusioni complete di asset, non a regole CSS autonome o a codice JavaScript.

Impostazioni dell’editor

Potete impostare un titolo dell’editor per il blocco, così sarà più facile identificarlo nella barra laterale. È particolarmente utile quando aggiungete più servizi o file alla stessa sezione.

CSS personalizzato

Usate questo blocco per aggiungere regole CSS direttamente al template senza racchiuderle in tag style. È utile per piccoli override visivi mirati che devono applicarsi solo in questo contesto di template. Per il riferimento del blocco, consultate Blocco CSS personalizzato.

Consiglio

Mantenete i selettori strettamente circoscritti, così il CSS influisce solo sull’area prevista ed è più facile da mantenere dopo futuri aggiornamenti del tema.

1. Incollate solo regole CSS.
2. Preferite questo blocco per override mirati invece di fogli di stile personalizzati di grandi dimensioni.

Impostazioni dell’editor

Potete rinominare il blocco nell’editor per rifletterne lo scopo, ad esempio una correzione di spaziatura o una modifica per una landing page. Titoli chiari rendono molto più semplice la pulizia successiva.

JavaScript personalizzato

Usate questo blocco per aggiungere JavaScript direttamente al template senza tag script. Funziona bene per widget incorporati, inizializzazione di servizi o piccoli comportamenti interattivi legati al template corrente. Per il riferimento del blocco, consultate Blocco JavaScript personalizzato.

Attenzione

Un errore JavaScript può interrompere altre funzioni della pagina. Se qualcosa smette di funzionare dopo una modifica, disattivate prima il blocco script più recente e riprovate.

1. Incollate solo JavaScript.
2. Separate gli script non correlati in blocchi diversi, così ogni modifica è più facile da verificare o rimuovere.

Impostazioni dell’editor

Usate il titolo dell’editor per etichettare lo script in base al servizio o allo scopo. Questo non modifica il front end, ma rende molto più semplice la manutenzione continua.

Impostazioni standard della sezione

Questa sezione non include impostazioni condivise per layout, spaziatura, sfondo, visibilità o larghezza. Il suo comportamento dipende interamente dai blocchi che aggiungete e dal codice inserito al loro interno.

Note sull’uso

1. Abbinate il blocco all’attività. Usate CSS personalizzato per le regole di stile, JavaScript personalizzato per la logica dello script e Asset personalizzato quando dovete incollare un’inclusione esterna completa.
2. Mantenete le modifiche modulari. Suddividete le personalizzazioni non correlate in blocchi separati, così potete isolare rapidamente i problemi e rimuovere una modifica senza influire sulle altre.
3. Date nomi chiari ai blocchi. Usate titoli descrittivi nell’editor, così gli snippet ripetuti restano facili da identificare in seguito.
4. Aspettatevi che il contenuto del blocco determini il risultato. L’aggiunta di blocchi può sostituire contenuti semplici a livello di sezione o estenderli con incorporamenti e comportamenti aggiuntivi, quindi esaminate il template finito dopo ogni modifica.
5. Testate i percorsi chiave. Controllate le azioni importanti della pagina, i layout responsive e i servizi incorporati dopo ogni modifica del codice.
6. Limitate il codice specifico del template. Aggiungete solo ciò di cui questo template ha bisogno per ridurre conflitti, costi di manutenzione e peso inutile della pagina.