Come aggiungere una sezione personalizzata su Shopify

Cosa ti serve

• Un negozio Shopify e il permesso di modificarne il tema (titolare del negozio o collaboratore con accesso ai Temi).
• Il codice della sezione: un file .liquid che termina con un tag {% schema %}. Scrivilo tu, generalo con Klorr o prendine uno dal marketplace.
• Un tema Online Store 2.0, se vuoi la sezione anche su pagine diverse dalla home page.

1. Prima di tutto, duplica il tema

   Nel pannello di controllo Shopify, vai su Negozio online → Temi. Accanto al tema attuale, apri il menu … e scegli Duplica. Lavora sulla copia, così il negozio online resta intatto finché non sei soddisfatto.

2. Apri l'editor del codice

   Sulla copia, apri di nuovo il menu … e scegli Modifica codice. Le cartelle del tema — layout, sections, snippets, assets e le altre — sono elencate a sinistra.

3. Crea il file della sezione

   Nella cartella sections, scegli Aggiungi una nuova sezione (nell'editor più recente, il + accanto alla cartella, poi Nuovo file). Dagli un nome che dica cosa fa, ad esempio countdown-banner. Shopify crea sections/countdown-banner.liquid con del codice di esempio.

4. Incolla il codice e salva

   Seleziona tutto nel nuovo file, sostituiscilo con il codice della tua sezione — compreso il blocco {% schema %} alla fine — e fai clic su Salva. Se Shopify mostra un errore, trovi le soluzioni più sotto.

5. Aggiungila nell'editor del tema

   Torna a Temi e fai clic su Personalizza sulla copia. Apri la pagina che vuoi — home, prodotto, collezione — e fai clic su Aggiungi sezione nella barra laterale sinistra. La tua sezione compare con il nome indicato nel suo schema.

6. Configurala e pubblica

   Compila le impostazioni della sezione — testi, immagini, colori — trascinala al suo posto e fai clic su Salva. Quando l'anteprima ti convince, pubblica la copia dalla pagina Temi.

Una sezione completa da provare

Incollala in un nuovo file di sezione per vedere l'intero procedimento funzionare. È un titolo, una riga di testo e un pulsante, tutti modificabili dall'editor del tema.

<div class="promo-{{ section.id }}">
  <h2>{{ section.settings.heading | escape }}</h2>
  <p>{{ section.settings.text | escape }}</p>
  {% if section.settings.button_label != blank %}
    <a href="{{ section.settings.button_link }}">{{ section.settings.button_label | escape }}</a>
  {% endif %}
</div>

{% style %}
  .promo-{{ section.id }} {
    padding: 48px 20px;
    text-align: center;
    background: {{ section.settings.background }};
  }
{% endstyle %}

{% schema %}
{
  "name": "Promo banner",
  "tag": "section",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Free shipping this week" },
    { "type": "text", "id": "text", "label": "Text", "default": "On every order over $50." },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Shop now" },
    { "type": "url", "id": "button_link", "label": "Button link" },
    { "type": "color", "id": "background", "label": "Background", "default": "#f1ecfb" }
  ],
  "presets": [{ "name": "Promo banner" }]
}
{% endschema %}

Generatore di schema →

Perché aggiungere una sezione senza app

• Nessun canone mensile: la sezione fa parte del tuo tema, non di un abbonamento.
• Niente di extra da caricare: lo script di un'app può girare su ogni pagina, il codice di una sezione solo dove c'è la sezione.
• Resta anche quando le app se ne vanno: disinstallare un'app può lasciare buchi nelle pagine che ha costruito. Un file di sezione resta finché non lo elimini.

Correlati