Shopify tema o Shopify headless: quando conviene

In breve

• Quando il tema basta: catalogo chiaro e design compatibile con i template di Shopify.
• Quando serve l'headless: la pagina è parte del prodotto: storytelling, motion, più lingue, un CMS accanto al catalogo.
• Divisione dei ruoli: Shopify gestisce prodotti, carrello e pagamenti; Next.js gestisce la pagina.
• Casi: Diesel Farm, NAYT e Bradiboo sono costruiti con questa architettura.
• Costi: l'headless richiede più investimento in sviluppo e manutenzione.
• Valutazione preliminare: se il tema è sufficiente, lo indico subito. Servizio correlato: Shopify headless.

Quando il tema basta

Un tema ben disegnato è una scelta vera. Basta quando:

• il catalogo è leggibile e i prodotti condividono pochi template;
• griglia, tipografia, scheda, carrello e pagine di contenuto stanno dentro Shopify;
• chi aggiorna lavora già nell'admin;
• le lingue sono quelle che tema e mercati Shopify reggono;
• il motion, se c'è, è contorno, non racconto.

In quel caso un front Next.js significa più sviluppo e più manutenzione per una griglia che il tema reggeva. Lo indico prima, non a progetto avviato.

Nel portfolio i negozi sono headless perché sono i casi in cui la pagina era parte del prodotto. È una selezione, non un argomento a favore dell'headless.

«Su misura» non significa headless: un tema si può disegnare con cura, con stati veri (esaurito, variante, carrello vuoto). Entro quando quella cura non sta più nel tema.

Quando la pagina è parte del prodotto

Quattro segnali, letti sul file:

1. Storytelling: la homepage è un racconto che porta al catalogo. Su Diesel Farm tenuta e catalogo stanno nella stessa vetrina. Josetta Saffirio, stesso studio, è il caso opposto: il racconto viene prima e lo shop non è stato forzato.
2. Motion: entrate, scroll, transizioni in GSAP, a volte con Lenis o Framer Motion. Un tema può avere un hover, non una timeline disegnata. Il testo resta in HTML.
3. Lingue: se ogni lingua ha un ritmo diverso, o racconto e catalogo non si traducono nello stesso punto, serve un front su misura. Conto pagine e template e lo scrivo in stima.
4. CMS editoriale: schede, capitoli, journal, pagine di brand. Shopify tiene il prodotto; il racconto sta in Prismic o WordPress; Next.js legge entrambi.

Senza questi segnali, resto sul tema.

Shopify tiene il negozio, Next.js tiene la pagina

• Shopify: prodotti, varianti, prezzi, disponibilità, carrello, checkout, pagamenti, ordini. Non ricostruisco il checkout: dal bottone d'acquisto in poi il flusso è di Shopify.
• Next.js: la pagina: griglia disegnata, racconto, motion, presentazione del prodotto, pagine che non sono prodotti. I dati arrivano dalla Storefront API. Spostare una sezione nel theme editor non cambia la pagina che vedono i visitatori.
• CMS editoriale: una terza fonte, non un sostituto del catalogo: Prismic su Diesel Farm e NAYT, WordPress su Bradiboo. Una scena 3D non si modifica da Shopify.

Le anteprime sono due: l'admin Shopify mostra il prodotto, l'anteprima headless mostra la bozza nel layout vero. In consegna si aprono entrambe su un prodotto reale. Approfondimento: aggiornare i contenuti.

Diesel Farm, NAYT, Bradiboo

• Diesel Farm: e-commerce ed esperienza di brand della tenuta di Brave Wine Company, con uno studio partner, 2024. Shopify headless, Next.js, Prismic, GSAP, Framer Motion, Lenis. Il vino non è una scheda staccata dal luogo. Awwwards Honorable Mention 2024.
• NAYT: piattaforma ufficiale dopo Sanremo 2026, con un designer di riferimento. Next.js, Shopify Storefront, Prismic, GSAP, Lenis. Musica, pagine e shop nello stesso front; componenti, campi e motion sono del progetto.
• Bradiboo: il catalogo più piccolo: prodotti soft e mondo di brand, con un designer di riferimento, 2024. Next.js headless, Shopify Storefront, WordPress, GSAP e Framer Motion. Catalogo piccolo non significa tema: significa meno prodotti, non meno pagina.

Stessa regola: Shopify fa il negozio, la pagina si costruisce quando il tema non la contiene.

Costruire, e poi mantenere l'interfaccia

A parità di negozio, headless costa più di un tema, in sviluppo e in manutenzione.

Sviluppo: dipende da catalogo, lingue, CMS, area clienti e quanto la vetrina è su misura: template, integrazione Shopify, motion, eventuale 3D (con modelli, performance e fallback).

Manutenzione dell'interfaccia: un tema segue il ciclo di Shopify; una vetrina Next.js è codice: framework, dipendenze, mappatura dati-componenti, motion, anteprima, build. Quando Shopify cambia un'API, il lavoro è nel repository. Va detto insieme al costo di costruzione.

Tempi: alcune settimane per un sito editoriale con motion definito; di più, a volte mesi, con e-commerce, più lingue o 3D. Fattori in quanto costa un sito web animato o 3D, tempi in quanto tempo serve un sito Next.js.

Consegna: codice, repository e accessi al committente; si decide chi è owner degli account Shopify, Prismic o WordPress. La manutenzione è un accordo a parte: manutenzione dopo il lancio.

Domande frequenti

Un tema Shopify può reggere un buon design?

Sì. Se il catalogo è chiaro e il design sta nei template, è la strada che consiglio.

Il checkout si rifà in Next.js?

No. Carrello, checkout e pagamenti restano Shopify; Next.js arriva fino all'ingresso nel flusso d'acquisto.

Diesel Farm, NAYT e Bradiboo sono lo stesso starter?

No. Stessa divisione, ma CMS diversi (Prismic, Prismic, WordPress), designer diversi, componenti e motion del singolo progetto.

Headless costa di più anche dopo il lancio?

Sì, per la manutenzione dell'interfaccia. Per questo, se il tema basta, non lo propongo.

E se a metà lavoro il tema sarebbe bastato?

Si decide guardando il file, non a build iniziata. Cambiare schema a metà è il modo più costoso di fare entrambe le cose.

La mia scelta

Parto dal tema. Se regge catalogo e design, si resta sul tema. L'headless ha senso quando la pagina è parte del prodotto: racconto, motion, lingue, un CMS accanto ai prodotti. Shopify resta il negozio, Next.js la pagina; il costo aggiuntivo viene indicato prima di iniziare.