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.

Aggiunta di codice di incorporamento a WordPress

Puoi aggiungere codice di incorporamento a articoli, pagine o modelli del tuo sito 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

Procedura:

  1. 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.
  2. Nella sezione Scrivi un articolo del blog clicca su Mostra HTML nel rich text editor.
  3. Incolla il codice di incorporamento nel campo di testo principale.
  4. Clicca su Salva.

Aggiunta di codice di incorporamento a Squarespace

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 vuoi visualizzare il Buy Button o il carrello incorporato, sposta il cursore sull’area Page Content, quindi fai clic 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 SALVA nell’editor della pagina. Dal momento che Squarespace disabilita JavaScript nella dashboard, devi visualizzare l’anteprima della pagina separatamente per vedere il Buy Button o il carrello incorporato che hai aggiunto.

Se completi i passaggi e il tuo buy Button non sta caricando, potrebbe essere necessario disabilitare il caricamento AJAX. Per vedere maggiori dettagli, vai su Abilita o Disabilita Ajax.

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.

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

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.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis