Aggiunta del codice del Buy Button all'HTML

Dopo aver creato un Buy Button nel pannello di controllo Shopify, puoi aggiungerlo al tuo sito web o blog.

La procedura per aggiungere il codice di incorporamento al codice sorgente HTML del tuo sito web è leggermente diversa a seconda di come e dove desideri che appaiano i Buy Button e il carrello, della piattaforma di pubblicazione e, a volte, del tema che utilizzi su tale piattaforma.

Aggiunta del codice di incorporamento a WordPress

Puoi aggiungere il codice di incorporamento ad articoli, pagine o modelli sul tuo sito WordPress.

Aggiunta del codice di incorporamento a un articolo o a una pagina WordPress

1. In Shopify, crea un Buy Button e copia il suo codice di incorporamento dalla finestra di dialogo Codice di incorporamento (oppure clicca su Copia codice di incorporamento negli appunti).
2. Dalla dashboard di WordPress, vai ai tuoi articoli o alle tue pagine.
3. Crea un nuovo articolo o una nuova pagina oppure modificane uno esistente.
4. Nell’editor a blocchi, clicca sul pulsante +, cerca HTML personalizzato, quindi clicca per inserire un blocco HTML personalizzato.
5. Incolla il codice di incorporamento nel campo di testo fornito dal blocco HTML personalizzato.
6. Facoltativo: sposta il blocco HTML personalizzato o visualizza l’anteprima del tuo Buy Button:
   • Per spostare il blocco HTML personalizzato, clicca sui pulsanti con la freccia nella barra degli strumenti del blocco o trascina il blocco in una nuova posizione.
   • Per visualizzare l'anteprima del Buy Button, clicca su Anteprima nella barra degli strumenti del blocco.
7. Al termine, clicca sul pulsante Salva bozza, Anteprima o Pubblica per il tuo articolo o la tua pagina.

Se utilizzi il plugin Classic Editor di WordPress, invece di utilizzare un blocco HTML personalizzato, modifica l'editor di testo dalla modalità Visuale alla modalità Testo e incolla il codice di incorporamento nell'editor.

Aggiungere il codice di incorporamento a un modello WordPress

Se il tuo tema WordPress supporta l’editor del sito, puoi aggiungere un Buy Button incorporato a qualsiasi modello del tuo sito.

Passaggi:

1. In Shopify, crea un Buy Button e copia il suo codice di incorporamento dalla finestra di dialogo Codice di incorporamento (oppure clicca su Copia codice di incorporamento negli appunti).
2. Dalla dashboard di WordPress, vai all'Editor.
3. Passa al modello che desideri modificare.
4. Nell’editor a blocchi, clicca sul pulsante +, cerca HTML personalizzato, quindi clicca per inserire un blocco HTML personalizzato.
5. Incolla il codice di incorporamento nel campo di testo fornito dal blocco HTML personalizzato.
6. Facoltativo: sposta il blocco HTML personalizzato o visualizza l’anteprima del tuo Buy Button:
   • Per spostare il blocco HTML personalizzato, clicca sui pulsanti con la freccia nella barra degli strumenti del blocco o trascina il blocco in una nuova posizione.
   • Per visualizzare l'anteprima del Buy Button, clicca su Anteprima nella barra degli strumenti del blocco.
7. Quando hai finito, clicca sul pulsante Anteprima o Salva per il modello.

Aggiunta del codice di incorporamento al blog di Shopify

Passaggi:

Aggiunta del codice di incorporamento a Squarespace

Puoi aggiungere il codice di incorporamento a singoli articoli su Squarespace e ai menu della tua homepage. In alcuni casi, potresti voler eseguire entrambe le operazioni. Ad esempio, puoi incorporare un carrello nella homepage per ricevere gli acquisti dai Buy Button che hai incorporato nei singoli articoli.

Passaggi:

1. Dalla dashboard di Squarespace, apri la pagina web in cui desideri aggiungere il codice di incorporamento.
2. Trova l’elemento sulla pagina in cui desideri visualizzare il Buy Button o il carrello incorporato, sposta il cursore sull'area Contenuto della pagina, quindi clicca su MODIFICA.
3. Clicca sul punto di inserimento in cui desideri aggiungere il codice di incorporamento.
4. Nella sezione Altro della finestra di dialogo Blocchi di contenuto, clicca su Codice.
5. Dal pannello di controllo Shopify, copia il codice di incorporamento dalla finestra di dialogo Codice di incorporamento.
6. Dalla dashboard di Squarespace, incolla il codice di incorporamento nella finestra di dialogo CODICE. Assicurati che il campo di testo sia impostato per ricevere HTML.
7. Clicca su APPLICA nella finestra di dialogo MODIFICA CODICE.
8. Clicca di nuovo su SALVA nell'editor di pagine. Poiché Squarespace disabilita JavaScript nella sua dashboard, devi visualizzare l'anteprima della pagina separatamente per verificare che il Buy Button o il carrello incorporato funzionino.

Se completi i passaggi e il Buy Button non si carica, potrebbe essere necessario disattivare il caricamento Ajax. Per maggiori dettagli, consulta Abilitare o disabilitare Ajax.

Aggiunta del codice di incorporamento a Wix

Dopo aver creato un Buy Button o una collezione nel pannello di controllo Shopify, puoi aggiungerlo al tuo sito web Wix utilizzando l'editor del sito web di Wix.

Se desideri visualizzare più di un prodotto sul tuo sito web Wix senza modificare il codice di incorporamento, puoi incorporare una collezione. Puoi creare una nuova collezione nel pannello di controllo Shopify per i prodotti che desideri visualizzare su Wix.

Passaggi:

1. Dal pannello di controllo Shopify, crea un Buy Button per un prodotto o una collezione, quindi copia il relativo codice di incorporamento.

2. Dal tuo account Wix, individua il sito che desideri modificare nella sezione I miei siti, quindi clicca su Modifica sito.
3. Nell'editor del sito web di Wix, clicca sul pulsante +, quindi su Altro.
4. Clicca su Codice HTML per aggiungere un widget di codice HTML alla pagina.
5. Clicca su Inserisci codice.
6. Nella finestra di dialogo Impostazioni HTML, incolla il codice di incorporamento per il Buy Button o la collezione nel campo Aggiungi qui il tuo codice, quindi clicca su Aggiorna.
7. Ridimensiona il widget di codice HTML per adattarlo al suo contenuto. Se stai creando un incorporamento con un carrello, assicurati che la scheda del carrello venga visualizzata nella posizione corretta.
8. Al termine, fai clic su Salva.

Incorporare più prodotti o collezioni

Passaggi:

1. Dal pannello di controllo Shopify, crea un Buy Button per un prodotto o una collezione, quindi copia il relativo codice di incorporamento.
2. Incolla il codice in un editor di codice o nel generatore di siti web di Wix. Ripeti i primi due passaggi finché non avrai creato i Buy Button di cui hai bisogno.
3. Modifica i codici di incorporamento per assicurarti che vengano visualizzati con l'allineamento corretto.
4. Dal tuo account Wix, individua il sito che desideri modificare nella sezione I miei siti, quindi clicca su Modifica sito.
5. Nell'editor del sito web di Wix, clicca sul pulsante +, quindi su Altro.
6. Clicca su Codice HTML per aggiungere un widget di codice HTML alla pagina.
7. Clicca su Inserisci codice.
8. Nella finestra di dialogo Impostazioni HTML, incolla il codice modificato per i tuoi Buy Button nel campo Aggiungi qui il tuo codice, quindi clicca su Aggiorna.
9. Ridimensiona il widget di codice HTML per adattarlo al suo contenuto. Se stai creando un incorporamento con un carrello, assicurati che la scheda del carrello venga visualizzata nella posizione corretta.
10. Al termine, fai clic su Salva.

Aggiungere i tag script separatamente

Alcune piattaforme (come Unbounce) richiedono di incollare i tag <script> del codice di incorporamento nell'header della pagina e il resto del codice di incorporamento nella pagina in cui desideri visualizzare il Buy Button.

Passaggi:

1. Dal codice di incorporamento generato quando crei un Buy Button, copia sia l'elemento <div> sia l'elemento <script>. Ad esempio:

<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'haris-mahmood.myshopify.com',
      apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
      appId: '15'
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [9017131142],
        node: document.getElementById('product-component-2dd3c8704e6'),
        moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "contents": {
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

2. Apri l'header della pagina del sito web in cui desideri incorporare un Buy Button.
3. Incolla l'intero elemento <script> nell'header della pagina.
4. Salva le modifiche.
5. Dal codice di incorporamento originale nel pannello di controllo Shopify, copia solo l'elemento <div>. Ad esempio:

<div id='product-component-2dd3c8704e6'></div>

6. Apri la pagina del tuo sito web in cui desideri incorporare un Buy Button.
7. Incolla il frammento di codice <div> nella pagina.
8. Salva le modifiche.