Aggiunta di codice per un Buy Button nel codice HTML

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

La modalità di aggiunta del codice di incorporamento al codice sorgente HTML del tuo sito web varia in base a come e dove desideri visualizzare i Buy Button e il carrello, alla piattaforma di pubblicazione e, a volte, al tema usato sulla piattaforma.

Nota

Se hai bisogno di aiuto per aggiungere codice di incorporamento a piattaforme di pubblicazione esterne a Shopify (come i blog di Squarespace o WordPress), contatta direttamente il provider del tuo sito web o della piattaforma di pubblicazione per assistenza.

Aggiunta di codice di incorporamento a WordPress

Puoi aggiungere codice di incorporamento a articoli, pagine o modelli del tuo sito WordPress.

Nota

I Buy Button incorporati sono compatibili con i siti WordPress.org self-hosted e con determinati piani offerti da WordPress.com. La documentazione riportata di seguito fa riferimento alle versioni più recenti di WordPress. La versione installata sul tuo sito potrebbe essere diversa. Maggiori informazioni sulle versioni WordPress sono disponibili sul sito di assistenza WordPress.

Aggiunta di codice di incorporamento a post o pagine WordPress

1. Su Shopify crea un Buy Button e copia il codice di incorporamento dalla finestra di dialogo Codice di incorporamento oppure clicca su Copy embed code to clipboard (Copia codice di incorporamento negli appunti).
2. Dalla dashboard di WordPress, vai ai tuoi post o pagine.
3. Crea un nuovo post o una nuova pagina, oppure modificane uno esistente.
4. Nell'editor di blocchi clicca sul pulsante +, cerca Custom HTML (Personalizza HTML), quindi clicca per inserire un blocco HTML personalizzato.
5. Incolla il codice di incorporamento nel campo di testo del blocco HTML personalizzato.

6. Facoltativo: sposta il blocco HTML personalizzato o visualizza l'anteprima del Buy Button:

   • Per spostare il blocco HTML personalizzato, clicca sui pulsanti freccia nella barra degli strumenti del blocco oppure trascina il blocco in una nuova posizione.
   • Per visualizzare l'anteprima del Buy Button, clicca su Preview (Anteprima) nella barra degli strumenti del blocco.

7. Quando hai finito, clicca sul pulsante Save Draft (Salva bozza), Preview (Anteprima) o Publish (Pubblica) per il tuo post o pagina.

Se utilizzi la funzionalità Classic Editor Plugin di WordPress invece dei blocchi HTML personalizzati, modifica la modalità dell'editor di testo da Visual (Visual) a Text (Testo) e incolla il codice di incorporamento nell'editor.

Aggiunta di codice di incorporamento a un modello WordPress

Se il tuo tema WordPress supporta l'editor del sito, puoi aggiungere un Buy Button incorporato a uno dei modelli del tuo sito.

Procedura:

1. Su Shopify crea un Buy Button e copia il codice di incorporamento dalla finestra di dialogo Codice di incorporamento oppure clicca su Copy embed code to clipboard (Copia codice di incorporamento negli appunti).
2. Nella dashboard di WordPress, vai a Editor.
3. Vai al modello che desideri modificare.
4. Nell'editor di blocchi clicca sul pulsante +, cerca Custom HTML (Personalizza HTML), quindi clicca per inserire un blocco HTML personalizzato.
5. Incolla il codice di incorporamento nel campo di testo del blocco HTML personalizzato.

6. Facoltativo: sposta il blocco HTML personalizzato o visualizza l'anteprima del Buy Button:

   • Per spostare il blocco HTML personalizzato, clicca sui pulsanti freccia nella barra degli strumenti del blocco oppure trascina il blocco in una nuova posizione.
   • Per visualizzare l'anteprima del Buy Button, clicca su Preview (Anteprima) nella barra degli strumenti del blocco.

7. Quando hai finito, clicca sul pulsante Preview (Anteprima) o Save (Salva) per il modello.

Aggiunta di codice di incorporamento al tuo blog di Shopify

Nota

Il Buy Button crea un carrello separato. Se il cliente passa a un’altra pagina del negozio online, l’articolo non apparirà più nel carrello. Puoi modificare il Buy Button per collegarlo direttamente al check-out.

Nota: #### Procedura:

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Articoli del blog.
2. Nella pagina Articoli dei blog fai clic sul titolo di un articolo che desideri modificare, oppure fai clic su Aggiungi nuovo articolo per crearne uno nuovo.
3. Nella sezione Scrivi un articolo del blog clicca su Mostra HTML nel rich text editor.
4. Incolla il codice di incorporamento nel campo di testo principale.
5. Clicca su Salva.

iPhone

1. Nell'app di Shopify tocca il pulsante ….
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Seleziona Articoli del blog.

Android

1. Nell'app di Shopify tocca il pulsante ….
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Seleziona Articoli del blog.

## Aggiunta di codice di incorporamento a Squarespace

Attenzione

Alcune personalizzazioni avanzate su Squarespace sono specifiche del tema. Queste personalizzazioni non sono supportate da Shopify.

Puoi aggiungere codice di incorporamento a singoli articoli di Squarespace e ai menu della home page. In alcuni casi può essere utile aggiungerlo in entrambe le posizioni. Ad esempio, puoi incorporare un carrello nella tua home page per ricevere acquisti dai Buy Button incorporati in singoli articoli.

Procedura:

1. Dalla dashboard di Squarespace apri la pagina web dove vuoi aggiungere il codice di incorporamento.
2. Trova l’elemento nella pagina dove desideri visualizzare il Buy Button o il carrello incorporato, sposta il cursore sull’area Page Content, quindi clicca su EDIT.
3. Fai clic sul punto dove vuoi inserire il codice di incorporamento.
4. Nella sezione More della finestra di dialogo Content Blocks fai clic su Code.
5. Dal pannello di controllo Shopify copia il codice di incorporamento dalla finestra di dialogo Codice di incorporamento.
6. Nella dashboard di Squarespace incolla il codice di incorporamento nella finestra di dialogo CODE. Assicurati che il campo di testo sia impostato per ricevere codice HTML.
7. Fai clic su APPLY nella finestra di dialogo EDIT CODE.
8. Clicca di nuovo su SAVE nell’editor della pagina. Dal momento che Squarespace disabilita JavaScript nella dashboard, devi visualizzare l'anteprima della pagina separatamente per confermare il funzionamento del Buy Button o il carrello incorporato.

Se hai completato i passaggi e il Buy Button non si carica, potrebbe essere necessario disabilitare il caricamento AJAX. Per maggiori dettagli, vai alla sezione relativa all'abilitazione o disabilitazione di Ajax (in inglese).

Nota

Se aggiungi un carrello incorporato a un menu della tua homepage di Squarespace, riceve gli ordini dai Buy Button incorporati nei singoli articoli.

Aggiunta di codice di incorporamento a Wix

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

Attenzione

Se desideri incorporare Buy Button per più prodotti o collezioni, devi modificare il codice di incorporamento prima di aggiungerlo al widget di codice HTML di Wix. Se incorpori più di un pulsante Buy Button nel tuo sito web Wix senza modificare il codice di incorporamento, i clienti che tentano di acquistare più di un prodotto vedranno un carrello separato per ciascun prodotto.

Se vuoi 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.

Procedura:

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

Nota

Quando crei il Buy Button per un sito web Wix, non puoi usare l'opzione Reindirizza nella stessa scheda a causa delle limitazioni di Wix.

1. Nel tuo account Wix trova il sito che desideri modificare nella sezione I miei siti, quindi fai clic su Modifica sito.
2. Nell’Editor del sito web Wix, clicca sul pulsante +, quindi su Altro.
3. Fai clic su Codice HTML per aggiungere un widget di codice HTML alla pagina.
4. Fai clic su Inserisci codice.
5. Nella finestra di dialogo Impostazioni HTML incolla il codice di incorporamento per il Buy Button o la collezione nel campo Aggiungi il tuo codice qui, quindi fai clic su Aggiorna.
6. Ridimensiona il widget del codice HTML per adattarlo al contenuto. Se stai creando un incorporamento con un carrello, assicurati che la scheda del carrello appaia nel posto giusto.
7. Quando hai finito, clicca Salva.

Incorpora più prodotti o collezioni

Procedura:

1. Nel pannello di controllo Shopify crea un Buy Button per un prodotto o una collezione, quindi copiane il 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 fino a quando non avrai creato i Buy Button che ti occorrono.
3. Modifica i codici di incorporamento per assicurarti che vengano visualizzati con l’allineamento corretto.
4. Nel tuo account Wix trova il sito che desideri modificare nella sezione I miei siti, quindi fai clic su Modifica sito.
5. Nell’Editor del sito web Wix, clicca sul pulsante +, quindi su Altro.
6. Fai clic su Codice HTML per aggiungere un widget di codice HTML alla pagina.
7. Fai clic su Inserisci codice.
8. Nella finestra di dialogo Impostazioni HTML incolla il codice modificato per il Buy Button nel campo Aggiungi il tuo codice qui, quindi fai clic su Aggiorna.
9. Ridimensiona il widget del codice HTML per adattarlo al contenuto. Se stai creando un incorporamento con un carrello, assicurati che la scheda del carrello appaia nel posto giusto.
10. Quando hai finito, clicca Salva.

Nota

Hai bisogno di aiuto con l'Editor Wix? Contatta il Centro di Assistenza Wix.

Aggiungi 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 nel punto della pagina dove si desidera visualizzare il Buy Button.

Procedura:

1. Dal codice di incorporamento generato quando hai creato il Buy Button, copia sia l’elemento <div> che 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>

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

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

1. Apri la pagina del tuo sito web dove desideri incorporare il Buy Button.
2. Incolla nella pagina il frammento di codice <div>.
3. Salva le modifiche.