Aggiunta di un Buy Button o di una collezione incorporata al tuo sito web

Dopo aver inserito il canale di vendita Buy Button nel pannello di controllo Shopify, puoi creare un nuovo Buy Button per un prodotto o una collezione:

Esempio di Buy Button

Esistono due alternative per creare Buy Button:

  • Puoi generare il codice da incorporare nel codice HTML di una pagina web per visualizzare un Buy Button nella pagina in questione. Puoi personalizzare l'aspetto dei Buy Button e collegarli al tuo check-out di Shopify, a un carrello o alla descrizione di un prodotto. Il codice del Buy Button può essere caratterizzato da un singolo prodotto o una collezione.

  • Puoi generare un link di check-out da inserire in una campagna via email, in un messaggio diretto o in un post sui social media.

Creazione di un Buy Button per un singolo prodotto

Puoi creare un Buy Button per un singolo prodotto che include una o tutte le varianti del prodotto. In fase di creazione puoi scegliere un modello e personalizzare colore, testo e aspetto del pulsante, oltre all'azione portata a termine quando un cliente clicca su di esso. Maggiori informazioni sullapersonalizzazione dei Buy Button.

Procedura:

  1. Clicca su Crea Buy Button.

  2. Seleziona un prodotto dal tuo catalogo o usa la funzione di ricerca per trovare un prodotto. Clicca su Seleziona prodotto.

  3. Se il tuo prodotto ha più varianti, seleziona Tutte le varianti o seleziona una variante dall'elenco a discesa.

  4. Scegli un modello e personalizza colore, testo e aspetto del pulsante, oltre all'azione portata a termine quando un cliente clicca su di esso:

    Creazione del Buy Button

    Per maggiori informazioni sulle diverse modalità di personalizzazione dei Buy Button, vedi Personalizzazione dei Buy Button

  5. Clicca su Genera codice.

  6. Clicca su Copy code to clipboard (Copia codice negli appunti) per copiare il codice.

  7. Apri l'editor HTML relativo alla pagina web in cui desideri visualizzare il Buy Button. Vedi Aggiunta di codice per un Buy Button nel codice HTML.

  8. Incolla il codice nel punto del codice HTML in cui desideri visualizzare il Buy Button, quindi salva le modifiche.

Crea una collezione incorporata

Puoi creare una collezione incorporata in modo che i prodotti figurino in una collezione con Buy Button:

La collezione incorporata visualizza ciascun prodotto che la compone completo di Buy Button, in modo che i clienti possano scegliere qualsiasi prodotto della collezione. In fase di creazione della collezione incorporata puoi personalizzare colore, testo e aspetto dei Buy Button per i prodotti disponibili, oltre all'azione portata a termine quando un cliente clicca sul pulsante. Il pulsante relativo a ciascun prodotto della collezione utilizza le stesse personalizzazioni. Maggiori informazioni sullapersonalizzazione dei Buy Button.

Procedura:

  1. Clicca su Crea Buy Button.

  2. Clicca su Collezioni.

  3. Dopo aver selezionato una collezione, clicca su Seleziona collezione.

  4. Personalizza colore, testo e aspetto del pulsante, oltre all'azione portata a termine quando un cliente clicca su di esso:

    Per maggiori informazioni sulle diverse modalità di personalizzazione dei Buy Button, vedi Personalizzazione dei Buy Button.

  5. Clicca su Genera codice.

  6. Clicca su Copy code to clipboard (Copia codice negli appunti) per copiare il codice.

  7. Apri l'editor HTML relativo alla pagina web in cui desideri visualizzare la collezione incorporata. Vedi Aggiunta di codice per un Buy Button nel codice HTML.

  8. Incolla il codice di incorporamento nel punto del codice HTML in cui desideri visualizzare la collezione incorporata, quindi salva le modifiche.

Personalizzazione dei Buy Button

Puoi personalizzare colore, dimensioni e aspetto di un Buy Button, nonché scegliere l'azione portata a termine cliccando su di esso. Quando crei un Buy Button per un singolo prodotto, puoi scegliere anche un relativo modello. Puoi visualizzare un'anteprima delle tue scelte prima di generare il codice nella pagina Crea.

Modelli di Buy Button

Quando crei un Buy Button per un singolo prodotto, puoi scegliere tra i seguenti modelli:

<table>
  <tr>
    <td style="min-width: 90px"><img src="/assets/manual/buy-button/icon-product-button.png" width="60" alt="Icon of a product image with a button"></td>
    <td><strong>Basic template</strong></td>
    <td>Select this template to display a product image and price beside the Buy Button.</td>
  </tr>
  <tr>
    <td><img src="/assets/manual/buy-button/icon-button.png" width="60" alt="Icon of only a rounded button"></td>
    <td><strong>Button template</strong></td>
    <td>Select this template to add a Buy Button without any product image. You might want to do this if you already display your products elsewhere online but want to add a checkout link.</td>
  </tr>
  <tr>
    <td><img src="/assets/manual/buy-button/icon-product-desc-button.png" width="60" alt="Icon of a product image with text and a button on the right side"></td>
    <td><strong>Enhanced template</strong></td>
    <td>Select this template to display a product image, price, and description beside the Buy Button.</td>
  </tr>
</table>

Azioni dei Buy Button

Quando crei un Buy Button puoi selezionare un'azione dall'elenco Azione su clic. Quando un cliente clicca sul Buy Button in una pagina, si verificherà uno dei seguenti scenari:

  • Aggiunge prodotto al carrello inserisce il prodotto in un carrello. I clienti possono continuare a fare acquisti e aggiungere altri prodotti al carrello.
  • Check-out diretto porta il cliente direttamente al tuo check-out, dove può acquistare il prodotto. I clienti non possono aggiungere ulteriori prodotti al proprio ordine.
  • Mostra dettagli prodotto visualizza una descrizione del prodotto con un pulsante Aggiungi al carrello. Se per un prodotto sono presenti più immagini, verranno visualizzate tutte.

Dimensioni e allineamento del Buy Button

Puoi selezionare le dimensioni e l'allineamento dei componenti del Buy Button dai menu a tendina Dimensione e Allineamento. Puoi visualizzare un'anteprima del Buy Button per stabilire quali opzioni sono più adatte alla tua pagina web.

Aspetto del Buy Button

  • Stile e testo pulsante include opzioni per definire stile e colore del componente pulsante del Buy Button.
  • Stile font include opzioni di font e colore per il testo del Buy Button e delle informazioni sul prodotto.
  • Carrello include opzioni di testo e colore per il carrello incorporato.

Puoi utilizzare il canale Buy Button per creare link di check-out su cui i tuoi clienti possono cliccare per inserire una singola variante di prodotto in un check-out. Puoi inserire link di check-out in messaggi via email, post sui social media o messaggi diretti per condividere facilmente un prodotto con i clienti.

Procedura:

  1. Clicca su Create checkout link (Crea link di check-out).

  2. Dopo aver selezionato il prodotto, clicca su Seleziona prodotto.

  3. Se il prodotto presenta più varianti, selezionane una. Ciascun link di check-out può corrispondere a una sola variante di prodotto.

  4. Clicca su Copia link per copiare il link.

  5. Incollalo direttamente in un messaggio, in un'email o in un post sui social media.

Puoi condividere link di check-out in campagne via email, post sui social media o messaggi diretti. Dopo aver creato il link, puoi copiarne il testo e incollarlo ovunque per condividere il check-out diretto con i clienti.

Di seguito vengono riportati alcuni esempi di utilizzo dei link di check-out:

Sei pronto/a per iniziare a vendere con Shopify?

Provalo, è gratis