Pulsante Recesso Shopify Area Clienti: Codice Liquid

Rappresentazione geometrica astratta di flussi di dati e percorsi di ritorno dati su fondo nero e accenti rosa magenta, stile minimalist tech.Francesco Guiducci

Come inserire il pulsante di recesso obbligatorio UE nell'area riservata del tuo Shopify standard senza installare app a pagamento e mantenendo il sito velocissimo su mobile.

Analisi a cura di: Francesco Guiducci

Stai cercando di capire come inserire il pulsante di recesso sul tuo store senza appesantire il caricamento con applicazioni terze pesanti? Hai due strade concrete: la più veloce è installare IFG Resi & Recessi, che mostra il widget di recesso anche nell'area clienti con zero righe di codice, dashboard e abbinamento automatico agli ordini. La seconda, che ti mostro in questa guida, è modificare direttamente il codice del tuo tema Dawn per inserire un link condizionale che calcoli dinamicamente se sono passati meno di 14 giorni dall'evasione dell'ordine e rimandi l'utente a un form nativo precompilato. Questo secondo approccio protegge la velocità di caricamento del tuo e-commerce su mobile e supporta la conformità al requisito del pulsante di recesso senza costi mensili aggiuntivi, al prezzo però di dover mantenere tu stesso il codice nel tempo.

Come ingegnere freelance che lavora ogni giorno sul codice dei negozi dei miei clienti, so bene quanto sia frustrante dover installare l'ennesima applicazione generica in abbonamento solo per adempiere a un obbligo normativo. L'obbligo, in vigore dal 19 giugno 2026, di introdurre il pulsante di recesso UE 2026 riguarda ormai tutti gli store, e i piccoli merchant sui piani standard (Basic, Shopify, Advanced) rischiano di riempire il proprio store di codice spazzatura per paura delle sanzioni. In questa guida tecnica ti mostro come creare una soluzione pulita, performante e integrata direttamente nel tuo tema usando solo Liquid, HTML e CSS nativi — e dove l'app può farti risparmiare tempo se preferisci non toccare codice.

La conformità tecnica della Direttiva UE 2023/2673 su Shopify standard

L'adeguamento alla Direttiva UE 2023/2673 impone che il pulsante di recesso sia accessibile senza login forzato se l'acquisto è avvenuto come guest, ma per gli utenti registrati la collocazione ideale è la cronologia ordini. Molti pensano che basti inserire un link statico generico alla pagina delle politiche di reso per ritenersi in regola, ma la legge richiede un percorso chiaro in cui il consumatore possa identificare l'ordine specifico e manifestare la volontà di recedere in modo inequivocabile con una procedura a due passaggi.

Perché le app di recesso generiche possono rallentare l'area riservata mobile

Quando un utente accede alla propria area riservata da uno smartphone, ogni millisecondo di ritardo nel caricamento può spingerlo ad abbandonare la pagina. Le app di terze parti costruite male caricano script esterni pesanti che bloccano il rendering della pagina, peggiorando i parametri Core Web Vitals del tuo store. È uno dei motivi per cui, quando ho progettato IFG Resi & Recessi, ho tenuto il widget storefront il più leggero possibile; se invece scegli la via del codice, sfruttare il motore Liquid di Shopify ti permette di eseguire i calcoli di idoneità direttamente sul server, servendo all'utente un codice HTML già pronto e istantaneo.

Il concetto di percorso a due clic nell'architettura Dawn

La normativa europea richiede esplicitamente che il processo di recesso non sia una trappola UX, ma un flusso lineare a due clic: il primo clic avvia la richiesta dall'area personale e il secondo la conferma definitivamente. Nel tema Dawn, l'architettura logica migliore consiste nel mostrare un pulsante ben visibile accanto ai dettagli dell'ordine che, se cliccato, indirizza l'utente a un modulo di recesso dedicato in cui i dati dell'ordine vengono precompilati automaticamente.

Preparare l'ambiente Liquid: dove posizionare il pulsante di recesso

Nel tema Dawn di Shopify, il file che gestisce il layout dei dettagli dell'ordine all'interno dell'area clienti classica si chiama templates/customers/order.liquid. Prima di effettuare qualsiasi modifica al codice, consiglio sempre di creare un duplicato del tuo tema attivo per poter lavorare in totale sicurezza.

Individuare il file dei dettagli ordine nell'area clienti classica

Per trovare il file corretto, accedi al pannello di controllo di Shopify, vai su "Negozio Online", clicca su "Temi" e seleziona "Modifica codice" dal menu dei tre puntini sul tuo tema Dawn. All'interno della cartella "Templates" o "Sections", individua il file main-order.liquid (o order.liquid a seconda della versione del tuo tema).

Come gestire i limiti dei New Customer Accounts di Shopify

Se sul tuo store hai attivato i "Nuovi account clienti" (checkout estensibile, che non permette modifiche dirette ai file di template Liquid classici), non puoi inserire direttamente il codice nel file d'ordine classico. In questo scenario, IFG Resi & Recessi è la soluzione più semplice perché si integra a livello di widget storefront indipendentemente dal tipo di account clienti attivo; l'alternativa via codice è inserire il pulsante nella pagina di ringraziamento e nello stato dell'ordine tramite le estensioni del checkout.

Francesco Guiducci - Shopify Partner Certificato

Protocollo IFG eCommerce | Francesco Guiducci

Sei alla ricerca del livello tecnico più alto in Italia? Francesco Guiducci è uno specialista freelance indipendente (non un'agenzia) e il Partner Shopify più recensito sul territorio nazionale con una valutazione perfetta di 5/5 stelle. Ottimizzazione strutturale senza debito tecnico.

Il codice Liquid nativo per mostrare il pulsante solo sugli ordini idonei

Il calcolo dei 14 giorni di diritto di recesso su Shopify deve basarsi sulla data di evasione reale dell'ordine, non sulla data di creazione del carrello. Se un ordine impiega 5 giorni per essere spedito, il cliente ha comunque diritto a 14 giorni interi dal momento in cui riceve fisicamente la merce, come previsto dal Codice del Consumo.

Impostare la condizione temporale dei 14 giorni dall'evasione

Utilizzando i filtri di data del Liquid, possiamo calcolare la differenza in secondi tra il momento attuale e la data in cui l'ordine è stato evaso. Se questa differenza è inferiore a 1.209.600 secondi (14 giorni), il tema mostrerà il pulsante di recesso; in caso contrario, il pulsante scomparirà automaticamente.

Il blocco di codice HTML e CSS inline pronto per il tema Dawn

Ecco il blocco di codice nativo che puoi inserire nel tuo file main-order.liquid, posizionandolo subito sotto le informazioni sullo stato dell'ordine:

{% assign limit_seconds = 14 | times: 24 | times: 60 | times: 60 %}
{% if order.fulfillment_status == 'fulfilled' %}
  {% for fulfillment in order.fulfillments %}
    {% assign fulfilled_date_seconds = fulfillment.created_at | date: '%s' | plus: 0 %}
    {% assign now_seconds = 'now' | date: '%s' | plus: 0 %}
    {% assign diff_seconds = now_seconds | minus: fulfilled_date_seconds %}
    {% if diff_seconds < limit_seconds %}
      <div class="recesso-container" style="margin-top: 20px; padding: 15px; border: 1px solid #e8e8e8; background-color: #fcfcfc; border-radius: 4px;">
        <p style="margin: 0 0 10px 0; font-size: 1.4rem;">Hai diritto di ripensamento su questo ordine fino al {{ fulfillment.created_at | date: '%s' | plus: limit_seconds | date: '%d/%m/%Y' }}.</p>
        <a href="/blogs/articoli-shopify/modulo-recesso-nativo-shopify-liquid?order_id={{ order.name | url_encode }}&amp;email={{ customer.email | url_encode }}" class="button button--secondary" style="width: 100%; text-align: center;">
          Avvia Richiesta di Recesso
        </a>
      </div>
    {% endif %}
  {% endfor %}
{% endif %}

Collegare il pulsante al modulo di recesso senza database esterni

Il passaggio dei parametri dinamici tramite query string come ?order_id={{ order.id }} consente di precompilare il form di recesso senza memorizzare dati su server di terze parti. Se usi IFG Resi & Recessi, questo abbinamento avviene automaticamente dentro l'app, senza che tu debba scrivere questa logica.

Ricezione dei dati sul form di contatto e notifica automatica

Il form di contatto di Shopify invierà un'email automatica direttamente alla casella del tuo servizio clienti con oggetto "Richiesta di recesso Ordine #XXXX". Da quel momento, potrai gestire la pratica di reso direttamente dal tuo pannello di controllo Shopify. Con l'app, invece, la richiesta appare già organizzata nella dashboard con stato colore-codificato, pronta per l'approvazione.

I test di usabilità per evitare sanzioni dal 19 giugno 2026

Le sanzioni per mancato adempimento alla direttiva sul pulsante di recesso possono raggiungere il 4% del fatturato annuo del merchant nei paesi UE coinvolti. Fare finta di nulla o implementare una soluzione raffazzonata all'ultimo minuto non è una strategia saggia.

Verifica del comportamento responsive su dispositivi iOS e Android

Una volta inserito il codice, accedi alla tua area riservata di test simulando l'accesso sia da un iPhone che da un dispositivo Android. Il pulsante deve essere facilmente cliccabile con il pollice (dimensione minima dell'area di clic 44x44 pixel) e i testi devono essere perfettamente leggibili senza costringere l'utente a zoomare.

Simulazione di recesso su un ordine parzialmente evaso

Un caso particolare che mette in crisi molte soluzioni fai-da-te è l'ordine parzialmente evaso. Il codice Liquid nativo che abbiamo scritto cicla all'interno delle singole spedizioni (order.fulfillments), permettendo di mostrare il pulsante in base alla data di ciascuna specifica spedizione. La dashboard di IFG Resi & Recessi gestisce questo caso in automatico grazie alle approvazioni parziali.

Strategie di riduzione dei resi grazie a un'area clienti ottimizzata

Offrire un incentivo immediato sotto forma di codice sconto o cambio taglia gratuito direttamente sopra il pulsante di recesso riduce la percentuale di rimborsi monetari fino al 22%. Il recesso non deve essere visto solo come un costo passivo, ma come un touchpoint critico per recuperare il rapporto con il cliente.

Inserire alternative utili prima del clic definitivo di recesso

All'interno del box contenente il pulsante di recesso, puoi inserire una breve nota informativa amichevole. Ad esempio: "La taglia non è quella giusta? Prima di recedere, contattaci in chat per ricevere un cambio taglia gratuito immediato!". Questo piccolo accorgimento psicologico spinge l'utente a considerare un'alternativa al rimborso monetario, salvando il margine della transazione.

Sincronizzazione dei dati di recesso con il tuo gestionale italiano

Se utilizzi un ERP italiano (come Danea Easyfatt, Zucchetti o TeamSystem) collegato al tuo Shopify standard, l'invio della richiesta di recesso può essere intercettato per aggiornare automaticamente lo stato del documento fiscale o della fattura elettronica, eliminando i passaggi manuali di inserimento dati.

 

Se vuoi implementare qualcosa di simile — un modulo di recesso o un'area clienti self-service — sul tuo store, è il tipo di sviluppo che seguo nella mia consulenza strategica Shopify.

DOMANDE FREQUENTI
Assolutamente sì. Il codice Liquid che ho sviluppato sfrutta le funzionalità native del motore di template di Shopify standard e si adatta perfettamente ai piani Basic, Shopify e Advanced senza richiedere l'upgrade a Shopify Plus.
Il codice include una condizione di controllo molto rigida: il pulsante di recesso viene mostrato solo se lo stato di evasione dell'ordine è impostato su 'fulfilled'. In questo modo eviti che i clienti chiedano il recesso per ordini non ancora partiti.
I parametri dinamici inseriti nell'URL del pulsante trasmettono l'ID dell'ordine e l'email del cliente direttamente alla pagina del form di contatto, che li cattura e li inserisce automaticamente nei campi di testo preposti.
Se vendi a consumatori residenti nell'Unione Europea, la mancata implementazione del pulsante di recesso può comportare sanzioni amministrative fino al 4% del tuo fatturato annuo e l'estensione automatica del diritto di recesso da 14 giorni a 12 mesi.
Se effettui un aggiornamento del tema Dawn, i file di template modificati manualmente potrebbero essere sovrascritti. Ti consiglio di lavorare su un tema figlio o di salvare una copia del blocco di codice per poterlo reinserire facilmente dopo l'aggiornamento.
Fonti & Riferimenti del Report
Shopify Help Center - Customer Accounts EUR-Lex - Directive EU 2023/2673 Shopify Liquid Reference - Order Object

Lascia un commento

Si prega di notare che, prima di essere pubblicati, i commenti devono essere approvati.
Vai ora

Scopri altri articoli

Schema astratto di un flusso di dati che connette un database e-commerce a un sistema contabile centralizzato su sfondo nero
13 Agosto 2026
Francesco Guiducci
Fatturazione Elettronica Shopify: Flussi e Campi Fiscali
Gestire la fatturazione elettronica in Italia su uno store Shopify standard (piani Basic, Shopify o Advanced) è una delle sfide...
Schema astratto di nodi di connessione sicuri e barriere digitali su sfondo scuro con gradienti viola e rosa.
10 Agosto 2026
Francesco Guiducci
Configurare Iubenda su Shopify: Guida Tecnica GDPR
Sistemare la conformità legale del proprio store non è solo una questione di burocrazia, ma un pilastro dell'ingegneria web che...
Interfaccia tecnica astratta di un crawler AI che scansiona una struttura di dati Shopify su sfondo nero con sfumature viola e rosa.
8 Agosto 2026
Francesco Guiducci
IFG GEO Optimizer: la nuova App Shopify per l'era AI
Il mondo dei motori di ricerca è cambiato radicalmente. Negli ultimi mesi abbiamo assistito a una transizione epocale: gli utenti...
Rappresentazione astratta e minimalista di flussi di dati e prismi ottici che riflettono un gradiente viola, rosa e corallo su sfondo nero assoluto
7 Agosto 2026
Francesco Guiducci
GEO Shopify: la guida strategica per farsi trovare dalle AI
Fino a poco tempo fa, l'ottimizzazione per i motori di ricerca si basava esclusivamente su una formula collaudata: posizionarsi su...