Aggiunta di un carrello d’acquisto a un sito web

Un carrello d’acquisto aiuta i clienti a vedere quanti articoli hanno aggiunto al loro ordine e procedere al checkout. Quando si incorpora il proprio negozio online o si separano i prodotti o i pulsanti “Acquista ora” in un sito web, l’icona del carrello d’acquisto comparirà automaticamente su quella pagina non appena almeno un prodotto verrà aggiunto al carrello.

Si ha anche l’opzione di aggiungere un ulteriore carrello d’acquisto ad altre pagine del proprio sito web o inserirlo nell’intestazione del sito web. Questa icona farà sapere ai visitatori del sito web che è presente un negozio online dove possono fare acquisti. Inoltre, è possibile modificare il design del carrello d’acquisto: scegliere l’icona, le informazioni da visualizzare (numero di articoli, totale parziale, ecc.), impostare la posizione in cui verrà visualizzato, ecc.

---

Aggiunta di un carrello d’acquisto a un sito web

È possibile aggiungere un carrello d’acquisto alle pagine del sito web in modo che i clienti possano accedere alla pagina del carrello da qualsiasi pagina del sito web. Inoltre, un’icona del carrello d’acquisto ricorda ai clienti che hanno aggiunto prodotti al carrello incoraggiandoli a completare l’acquisto.

Per aggiungere un carrello d’acquisto alle pagine del sito web:

1. Andare a pannello di controllo del negozio → Sito web.
2. Scorrere verso il basso fino alla sezione “Aggiungi il tuo negozio a un altro sito Web” e fare clic su Seleziona piattaforma → Altre piattaforme e sitebuilder.
3. Fare clic su Aggiungi carrello d’acquisto. Il codice del carrello d’acquisto per il proprio negozio verrà copiato negli appunti.
4. Andare all’editor del proprio sito web e aprire la pagina in cui si desidera visualizzare il negozio.
5. Incollare il codice nel codice sorgente per quella pagina. Potrebbe essere HTML o una scheda sorgente o un pulsante separato per aggiungere codici. Questo varia a seconda del builder per siti web che si utilizza.
6. Salvare e pubblicare le modifiche alla pagina.

L’icona del carrello d’acquisto aggiuntivo comparirà sul sito web.

---

Personalizzazione del design del carrello d’acquisto

È possibile personalizzare il design del carrello d’acquisto per adattarlo meglio al design del proprio sito web. Per modificare il design predefinito del carrello d’acquisto, è necessario modificare il codice predefinito del carrello e aggiungere un nuovo codice che effettuerà la modifica desiderata. Di seguito sono visibili i codici per le diverse modifiche al design.

Per modificare il design dell’icona del carrello d’acquisto:

1. Selezionare la modifica del design desiderata di seguito.
2. Copiare il codice nella modifica del design desiderata.
3. Sostituire VALUE con uno dei valori suggeriti e STORE_ID con l’ID del proprio negozio che può essere copiato nel pannello di controllo del negozio, nell’angolo in basso a sinistra.
4. Andare all’editor del sito web e aprire la pagina in cui si desidera aggiungere il carrello degli acquisti.
5. Incollare il codice nel codice sorgente della pagina. Potrebbe essere HTML o una scheda sorgente o un pulsante separato per aggiungere codici. Questo varia a seconda del builder per siti web che si utilizza.
6. Salvare e pubblicare le modifiche.

Layout

Valore	Layout
SMALL_ICON
SMALL_ICON_COUNTER
COUNTER_ONLY
TITLE_COUNTER
MEDIUM_ICON_COUNTER
MEDIUM_ICON_TITLE_COUNTER
BIG_ICON_TITLE_SUBTOTAL
BIG_ICON_DETAILS_SUBTOTAL

 

Ecco un codice per modificare il layout del carrello d’acquisto:

<div data-layout="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code"charset="utf-8"></script>
<script>Ecwid.init();</script>
</div>

dove:

VALUE è il nome del layout che si desidera applicare all’icona del carrello d’acquisto. Copiarlo dalla colonna di sinistra nella tabella sopra.

STORE_ID è l’ID del Suo negozio che può copiare nel pannello di controllo del negozio, nell’angolo in basso a sinistra.

Icona

Valore	Icona
BORSA
CARRELLO
CESTINO

Ecco un codice per modificare l’icona del carrello d’acquisto:

<div data-icon="VALUE" class="ec-cart-widget"></div>
<div><<script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script>
<script>Ecwid.init();</script>
</div>

dove:

VALUE deve essere sostituito con BORSA, CARRELLO o CESTINO a seconda dell’icona che si desidera utilizzare.

STORE_ID è l’ID del Suo negozio che può copiare nel pannello di controllo del negozio, nell’angolo in basso a sinistra.

Per aggiungere un’immagine personalizzata come icona del carrello d’acquisto, utilizzare questo codice:

<div data-custom-icon-url="VALUE" class="ec-cart-widget">
</div><div><script data-cfasync="false" type="text/javascript" src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" charset="utf-8"></script><script>Ecwid.init();</script>
</div>

dove:

VALUE è un URL per il file icona personalizzato o un markup SVG. Per ottenere un URL collegata alla propria icona, caricare l’immagine su un hosting di immagini dove è possibile ottenere un collegamento diretto a un’immagine.

STORE_ID è l’ID del Suo negozio che può copiare nel pannello di controllo del negozio, nell’angolo in basso a sinistra.

Forma del bordo

Per modificare la forma del bordo attorno all’icona del carrello d’acquisto, utilizzare questo codice:

<div data-fixed-shape="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script>
</div>

dove:

VALUE deve essere sostituito con NESSUNO per nessun bordo, RETT per un bordo rettangolo o ROT per un bordo rettangolo arrotondato.

STORE_ID deve essere sostituito con l’ID del Suo negozio che può copiare nel pannello di controllo del negozio, nell’angolo in basso a sinistra.

Posizione

 

Parametro	Valore	Descrizione
data-fixed	TRUE / FALSE	Fa in modo che il carrello d’acquisto si attacchi a un luogo specifico all’interno delle pagine
data-fixed-position	TOP_LEFT / TOP_RIGHT / BOTTOM_LEFT / BOTTOM_RIGHT	Blocca il carrello d’acquisto sullo schermo facendo seguire l’icona mentre si scorre la pagina
data-horizontal-indent	Numero intero positivo incluso zero	Definisce il margine orizzontale tra il widget carrello d’acquisto e il bordo dello schermo o un contenitore iframe
data-vertical-indent	Numero intero positivo incluso zero	Definisce il margine verticale tra il widget carrello d’acquisto e il bordo dello schermo o un contenitore iframe

Ecco un codice per modificare la posizione del carrello d’acquisto:

<div data-fixed="VALUE" 

data-fixed-position="VALUE"

data-fixed-shape="VALUE" 

data-horizontal-indent="VALUE" 

data-vertical-indent="VALUE" class="ec-cart-widget"></div>
<div>
<script data-cfasync="false" type="text/javascript" 
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

dove:

VALUE deve essere sostituito con uno dei valori della tabella sopra a seconda della posizione che si desidera applicare al carrello d’acquisto.

STORE_ID deve essere sostituito con l’ID del Suo negozio che può copiare nel pannello di controllo del negozio, nell’angolo in basso a sinistra.

Animazione

È possibile mostrare o disabilitare l’effetto animazione quando un articolo viene aggiunto al carrello utilizzando il seguente codice:

<div data-show-buy-animation="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script>
</div>

dove:

VALUE deve essere sostituito con TRUE per mostrare l’animazione o FALSE per disabilitarla.

STORE_ID deve essere sostituito con l’ID del Suo negozio che può copiare nel pannello di controllo del negozio, nell’angolo in basso a sinistra.

Usare lo stesso design del carrello d’acquisto su tutti i dispositivi

L’icona del carrello d’acquisto si adatta alla larghezza dello schermo e potrebbe apparire in modo diverso sui dispositivi con larghezza dello schermo diversa. Per fare in modo che il carrello d’acquisto utilizzi lo stesso design su tutti i dispositivi, utilizzare questo codice:

<div data-responsive="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script>
</div>

dove:

VALUE deve essere sostituito con TRUE affinché il carrello si adatti automaticamente a schermi di dimensioni diverse o FALSE affinché il carrello abbia lo stesso design su schermi di dimensioni diverse.

STORE_ID deve essere sostituito con l’ID del Suo negozio che può copiare nel pannello di controllo del negozio, nell’angolo in basso a sinistra.

---

Aggiunta di un carrello d’acquisto a pagine WordPress

È possibile aggiungere il negozio online a un sito web WordPress utilizzando il plug-in Negozio online. Questo plug-in consente inoltre di aggiungere un’icona del carrello d’acquisto e di modificarne il layout e il design.

Per aggiungere un carrello d’acquisto a un sito web WordPress:

1. Andare alla dashboard di WordPress → Aspetto → Personalizza.
2. Fare clic su Negozio online nel menu della barra laterale.
3. Fai clic su widget del carrello d’acquisto.
4. Selezionare dove si vuole visualizzare il carrello d’acquisto, definire il layout, l’icona e altre impostazioni su quella pagina.
5. Selezionare l’opzione Mostra quando vuoto se si desidera visualizzare l’icona del carrello anche quando non ci sono prodotti nel carrello.

---

Personalizzazione dell’aspetto del carrello d’acquisto su WordPress

Per modificare l’aspetto dell’icona del carrello d’acquisto aggiunto a un sito WordPress:

1. Andare alla dashboard di WordPress → Aspetto → Personalizza.
2. Fare clic su Negozio online nel menu della barra laterale → widget del carrello d’acquisto.
3. Provare varie impostazioni del widget del carrello d’acquisto. L’aspetto del widget del carrello d’acquisto cambia nell’anteprima quando si scelgono nuove impostazioni.
4. Una volta trovata la visualizzazione preferita, fare clic su Pubblica.