Vai al contenuto
stefanosottile

Caso studio / Shopify / Configuratore custom

Hole Gadget

Configurare un prodotto. Costruire un ordine.

Personalizzatore integrato nel tema Xtra: quantità, varianti, tecniche di stampa, file e riepilogo prima del carrello.

Parliamo di un progetto simileholegadget.store (si apre in una nuova scheda)
Configuratore Hole Gadget, passaggio 4 di 4: riepilogo con 100 penne arancioni, stampa 1 lato e totale finale di 57,00 euro, pulsante Aggiungi al carrello.
Schermata reale / configurazione Vivid
  • Liquid
  • JavaScript
  • CSS
  • JSON
  • Metafield
  • Fetch API
  • Ajax Cart API
  • FormData
  • Shopify CLI
  • Sito del cliente: holegadget.store

Panoramica del progetto

Esigenza, soluzione e ruolo.

  • Esigenza

    I prodotti personalizzabili richiedono più informazioni di una normale scheda prodotto: quantità distribuite su colori e varianti, una tecnica di stampa con le sue maggiorazioni, la grafica o le istruzioni di produzione. Tutto questo doveva arrivare nel carrello nativo di Shopify in forma leggibile, senza uscire dal tema esistente.

  • Soluzione

    Un configuratore in quattro passaggi integrato nel tema Xtra. La configurazione di ogni prodotto è descritta da metafield e JSON; la logica JavaScript tiene insieme le scelte e aggiorna il riepilogo; l’invio usa l’Ajax Cart API di Shopify con ID variante, quantità e proprietà di riga.

  • Il mio ruolo

    Sviluppo del configuratore (Liquid, JavaScript, CSS), adattamento del tema da Xtra 6.4.0 a Xtra 8.0.0 e documentazione operativa per la configurazione dei prodotti.

  • Tecnologie

    Liquid, JavaScript, CSS, JSON, Metafield, Fetch API, Ajax Cart API, FormData, Shopify CLI.

Hole Gadget / Percorso utente

Quattro passaggi, un solo flusso di acquisto.

Ogni passaggio raccoglie un tipo di informazione; il riepilogo laterale resta visibile durante tutto il percorso.

Configuratore Hole Gadget, passaggio 1 di 4: matrice di quantità per colore e variante delle penne Vivid, con riepilogo laterale.
Schermata reale / 01 Quantità

Hole Gadget / Implementazione API

Dal modello di configurazione al carrello nativo.

Dati Liquid e JSON, logica JavaScript e invio tramite Fetch API.

Configurazione per prodotto

Metafield e JSON definiscono famiglia, prezzo base, minimi, incrementi, scaglioni e tecniche disponibili.

Logica dell’interfaccia

Lo stato tiene insieme quantità, varianti, personalizzazione e istruzioni. Il riepilogo aggiorna i costi durante le scelte.

Trasferimento a Shopify

Il payload usa ID variante, quantità e proprietà delle righe del carrello. FormData gestisce il percorso con file.

Esempio senza allegato

POST /cart/add.js
Content-Type: application/json

{ items: [{
  id: selectedVariantId,
  quantity: 100,
  properties: {
    Personalizzazione: "Stampa 1 lato",
    "Note stampa": "Istruzioni..."
  }
}] }
  • Fetch API
  • JSON
  • FormData
  • Ajax Cart API
File: product-configurator.liquid / .js / .css

Hole Gadget / Regole e rilascio

Riutilizzabile nei dati. Integrato nel tema.

  • Modello riutilizzabile

    Gadget e abbigliamento condividono il configuratore. Opzioni e assi di variante sono definiti dai dati del prodotto.

  • Personalizzazione del tema

    Ho portato il configuratore da Xtra 6.4.0 a Xtra 8.0.0, adattando tre file custom e le integrazioni nei template nativi.

  • Documentazione operativa

    Guida ai metafield, JSON di esempio e controlli del blocco tema per configurare i prodotti e verificare il risultato.

Hole Gadget / Verifica

La prova nel carrello reale.

Cosa conferma

Variante, quantità, stampa e note per 100 penne con stampa inclusa arrivano nel carrello come proprietà della riga.

Cosa non copre

Test del carrello senza completamento dell’ordine. Allegati e altri scenari di prezzo non sono inclusi in questa prova.

Carrello Shopify di Hole Gadget con la riga Penne personalizzate Vivid: variante arancione, stampa 1 lato, note di stampa, quantità 100 e totale 57,00 euro.
Carrello reale / test del 30 settembre 2026

  • Quantità e variante

    100 penne Vivid arancioni arrivano come riga carrello con la variante scelta.

Risultato verificabile

I numeri della prova.

  • 100

    Penne Vivid arancioni

    Quantità configurata nel test.

  • 57,00 €

    Totale verificato nel carrello

    Test del 30 settembre 2026, non è fatturato.

  • 1 lato

    Personalizzazione della prova

    Stampa 1 lato inclusa.

Perimetro del test

Limiti e stato di pubblicazione.

  • Il test del 30 settembre 2026 verifica variante, quantità, stampa e note nel carrello, senza completare l’ordine.
  • Allegati e altri scenari di prezzo non sono inclusi in questa prova.
  • I valori mostrati descrivono una configurazione di prova, non fatturato o conversioni.

Altri progetti

Progetti correlati.

  • Mockup rappresentativo del CRM Sartoria Ragusa: menu laterale con Dashboard, Clienti, Su Misura, Inventario, Appuntamenti, Ordini e Campagne; riquadro 6.868 clienti importati ed elenco di clienti dimostrativi.Mockup · dati dimostrativi

    React e Next.js / Applicazione custom

    Sartoria Ragusa

    CRM interno: anagrafiche, misure e schede su misura collegate in un’interfaccia operativa React / Next.js.

    • React
    • Next.js
    • Supabase
  • Home page del portale Respet B2B con il riquadro Portale Ordini B2B e i pulsanti Accedi e Registrati.

    Shopify / E-commerce B2B

    Respet B2B

    Portale B2B: accesso approvato, flussi attraverso gli agenti, account cliente e raccolta dei dati fiscali nel checkout.

    • Shopify
    • Checkout UI extensions
    • Customer Account UI extensions

  • Automatizzare l’ordine delle taglie.

    Node.js · Express · GraphQL

    Integrazione Shopify / Webhook e automazioni

    Shopify Size Sorter

    Webhook prodotto con verifica HMAC che riordina l’opzione Taglia tramite productOptionsReorder.

    • Node.js
    • Express
    • GraphQL

Lavoriamo insieme

Hai un progetto simile?

Parliamo del tuo e-commerce o della tua applicazione e di come posso aiutarti.

Scrivimiinfo@stefanosottile.com