Aggiunta di codice per un Buy Button nel codice HTML

Dopo aver creato un Buy Button nel pannello di controllo Shopify, sei pronto per 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 un blog WordPress.org

Puoi aggiungere codice di incorporamento a singoli articoli e al menu sulla home page del tuo blog WordPress.org.

Aggiungi codice di incorporamento a un articolo WordPress

Procedura:

  1. In Shopify, crea un Buy Button e copia il codice di incorporamento dalla finestra di dialogo Codice di incorporamento (oppure fai clic su Copia codice di incorporamento negli appunti ).
  2. Dalla Bacheca di WordPress fai clic su Articoli.
  3. Fai clic su Aggiungi nuovo per creare un nuovo articolo, oppure fai clic sul titolo di un articolo esistente dove vuoi visualizzare un Buy Button.
  4. Nella pagina Aggiungi nuovo articolo o Modifica articolo passa dall’editor Visuale all’editor di Testo.
  5. Incolla il codice di incorporamento nel campo di testo principale dell’editor, nel punto in cui desideri visualizzare il Buy Button o la collezione.
  6. Al termine, fai clic su Salva bozza , Anteprima o Pubblica.

Aggiungi codice di incorporamento a un menu WordPress

Procedura:

  1. Dalla Bacheca di WordPress fai clic su Aspetto.
  2. Fai clic su Personalizza per aprire l’editor del tema, quindi fai clic su Widget.
  3. Fai clic sul nome dell’area dove vuoi aggiungere il Buy Button o il codice del carrello personalizzato.
  4. Apri un widget di Testo esistente, oppure fai clic su Aggiungi un widget e quindi su Testo.
  5. Incolla il codice di incorporamento nel campo di testo principale all’interno del widget di Testo.
  6. Salva le modifiche.

Aggiunta di codice di incorporamento al tuo blog Shopify

Procedura:

  1. Nel pannello di controllo Shopify fai clic su Negozio online.
  2. Fai clic su Articoli dei blog.
  3. 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.
  4. Nella sezione Scrivi un articolo sul blog fai clic su Mostra HTML nel Rich text editor.
    Pulsante dell’editor Mostra HTML
  5. Incolla il codice di incorporamento nel campo di testo principale.
  6. 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. Fai di nuovo clic su SAVE 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.

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.
  2. Nel tuo account Wix trova il sito che desideri modificare nella sezione I miei siti , quindi fai clic su Modifica sito.
  3. Nell’Editor del sito web Wix, clicca sul pulsante +, quindi su Altro.
  4. Fai clic su Codice HTML per aggiungere un widget di codice HTML alla pagina.
  5. Fai clic 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 il tuo codice qui , quindi fai clic su Aggiorna.
  7. 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.
  8. 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 nello strumento di creazione siti 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 lo snippet di codice <div>.

  3. Salva le modifiche.

Sei pronto/a per iniziare a vendere con Shopify?

Provalo, è gratis