Bantuan
Masuk

Menambahkan kode Tombol Beli ke HTML

Setelah Anda membuat Tombol Beli di admin Shopify, Anda siap untuk menambahkannya ke situs web atau blog Anda sendiri.

Proses penambahan kode semat ke HTML sumber situs web Anda sedikit berbeda, bergantung pada bagaimana dan di mana Anda ingin Tombol Beli dan keranjang muncul, pada platform publikasi Anda, dan terkadang pada tema yang Anda gunakan di platform tersebut.

Di halaman ini

Menambahkan kode semat ke WordPress

Anda dapat menambahkan kode semat ke postingan, halaman, atau templat di situs WordPress Anda.

Menambahkan kode semat ke postingan atau halaman WordPress

  1. Di Shopify, buat Tombol Beli dan salin kode sematnya dari dialog Kode Semat (atau klik Salin kode semat ke clipboard).
  2. Dari dasbor WordPress Anda, buka postingan atau halaman Anda.
  3. Buat postingan atau halaman baru, atau edit yang sudah ada.
  4. Di dalam editor blok, klik tombol +, cari HTML Kustom, lalu klik untuk menyisipkan blok HTML Kustom.
  5. Tempel kode semat ke kolom teks yang disediakan oleh blok HTML Kustom.
  6. Opsional: Pindahkan blok HTML Kustom atau pratinjau tampilan Tombol Beli Anda:
    • Untuk memindahkan blok HTML Kustom, klik tombol panah di bilah alat blok, atau seret blok ke lokasi baru.
    • Untuk melihat pratinjau Tombol Beli, klik Pratinjau di bilah alat blok.
  7. Setelah selesai, klik tombol Simpan Draf, Pratinjau, atau Publikasikan untuk postingan atau halaman Anda.

Jika Anda menggunakan Plugin Editor Klasik WordPress, alih-alih menggunakan blok HTML Kustom, ubah editor teks dari mode Visual ke mode Teks dan tempel kode semat di editor.

Menambahkan kode semat ke templat WordPress

Jika tema WordPress Anda mendukung editor situs, Anda dapat menambahkan Tombol Beli Tersemat ke templat situs Anda.

Langkah-langkah:

  1. Di Shopify, buat Tombol Beli dan salin kode sematnya dari dialog Kode Semat (atau klik Salin kode semat ke clipboard).
  2. Di dasbor WordPress Anda, buka Editor.
  3. Buka templat yang ingin Anda edit.
  4. Di dalam editor blok, klik tombol +, cari HTML Kustom, lalu klik untuk menyisipkan blok HTML Kustom.
  5. Tempel kode semat ke kolom teks yang disediakan oleh blok HTML Kustom.
  6. Opsional: Pindahkan blok HTML Kustom atau pratinjau tampilan Tombol Beli Anda:
    • Untuk memindahkan blok HTML Kustom, klik tombol panah di bilah alat blok, atau seret blok ke lokasi baru.
    • Untuk melihat pratinjau Tombol Beli, klik Pratinjau di bilah alat blok.
  7. Setelah selesai, klik tombol Pratinjau, atau Simpan untuk templat tersebut.

Menambahkan kode semat ke blog Shopify Anda

Catatan:

Langkah-langkah:

Desktop

  1. Dari admin Shopify, buka Konten > Postingan blog.

  2. Dari halaman Postingan Blog, klik judul postingan blog yang ingin Anda edit, atau klik Tambahkan postingan blog untuk membuat yang baru.

  3. Di bagian Tulis postingan blog Anda, klik Tampilkan HTML di editor teks kaya.

  4. Tempel kode semat Anda ke kolom teks utama.

  5. Klik Simpan.

Seluler

  1. Dari Shopify app, ketuk ikon Menu.

  2. Di menu Konten, ketuk ikon panah bawah, lalu ketuk Postingan blog.

  3. Ketuk postingan blog yang ingin Anda edit.

  4. Di bagian Konten, ketuk …, lalu ketuk ikon Edit kode.

  5. Tempel kode semat Anda ke kolom teks.

  6. Ketuk Simpan atau ✓.

Menambahkan kode semat ke Squarespace

Anda dapat menambahkan kode semat ke postingan individual di Squarespace dan ke menu di beranda Anda. Dalam beberapa kasus, Anda mungkin ingin melakukan keduanya. Misalnya, Anda dapat menyematkan keranjang di beranda untuk menerima pembelian dari Tombol Beli yang Anda sematkan pada postingan individual.

Langkah-langkah:

  1. Dari dasbor Squarespace Anda, buka halaman web tempat Anda ingin menambahkan kode semat.
  2. Temukan elemen di halaman tempat Anda ingin Tombol Beli atau keranjang tersemat ditampilkan, arahkan kursor ke area Konten Halaman, lalu klik EDIT.
  3. Klik titik sisip tempat Anda ingin menambahkan kode semat.
  4. Di bagian Lainnya pada dialog Blok Konten, klik Kode.
  5. Dari admin Shopify Anda, salin kode semat dari dialog Kode Semat.
  6. Dari dasbor Squarespace Anda, tempel kode semat ke dalam dialog KODE. Pastikan kolom teks diatur untuk menerima HTML.
  7. Klik TERAPKAN pada dialog EDIT KODE.
  8. Klik SIMPAN lagi di editor halaman. Karena Squarespace menonaktifkan JavaScript di dasbornya, Anda perlu mempratinjau halaman Anda secara terpisah untuk mengonfirmasi bahwa Tombol Beli atau keranjang tersemat berfungsi.

Jika Anda menyelesaikan langkah-langkahnya dan Tombol Beli Anda tidak dimuat, Anda mungkin perlu menonaktifkan pemuatan Ajax. Untuk detail selengkapnya, lihat Aktifkan atau nonaktifkan Ajax.

Menambahkan kode semat ke Wix

Setelah Anda membuat Tombol Beli atau koleksi di admin Shopify, Anda dapat menambahkannya ke situs web Wix menggunakan Editor Situs Web Wix.

Jika Anda ingin menampilkan lebih dari satu produk di situs web Wix tanpa mengedit kode semat, Anda dapat menyematkan koleksi. Anda dapat membuat koleksi baru di admin Shopify untuk produk yang ingin Anda tampilkan di Wix.

Langkah-langkah:

  1. Dari admin Shopify Anda, buat Tombol Beli untuk produk atau koleksi, lalu salin kode sematnya.
  1. Dari akun Wix Anda, cari situs yang ingin Anda edit di bagian Situs Saya, lalu klik Edit Situs.
  2. Di Editor Situs Web Wix, klik tombol +, lalu klik Lainnya.
  3. Klik Kode HTML untuk menambahkan widget kode HTML ke halaman.
  4. Klik Masukkan Kode.
  5. Pada dialog Pengaturan HTML, tempelkan kode semat untuk Tombol Beli atau koleksi Anda di kolom Tambahkan kode Anda di sini, lalu klik Perbarui.
  6. Ubah ukuran widget kode HTML agar sesuai dengan kontennya. Jika Anda membuat sematan dengan keranjang, pastikan tab keranjang ditampilkan di tempat yang tepat.
  7. Setelah selesai, klik Simpan.

Menyematkan beberapa produk atau koleksi

Langkah-langkah:

  1. Dari admin Shopify Anda, buat Tombol Beli untuk produk atau koleksi, lalu salin kode sematnya.
  2. Tempelkan kode ke editor kode atau pembuat situs web Wix. Ulangi dua langkah pertama hingga Anda selesai membuat Tombol Beli yang dibutuhkan.
  3. Edit kode semat untuk memastikan kode tersebut ditampilkan dengan perataan yang benar.
  4. Dari akun Wix Anda, cari situs yang ingin Anda edit di bagian Situs Saya, lalu klik Edit Situs.
  5. Di Editor Situs Web Wix, klik tombol +, lalu klik Lainnya.
  6. Klik Kode HTML untuk menambahkan widget kode HTML ke halaman.
  7. Klik Masukkan Kode.
  8. Pada dialog Pengaturan HTML, tempelkan kode yang telah diedit untuk Tombol Beli Anda di kolom Tambahkan kode Anda di sini, lalu klik Perbarui.
  9. Ubah ukuran widget kode HTML agar sesuai dengan kontennya. Jika Anda membuat sematan dengan keranjang, pastikan tab keranjang ditampilkan di tempat yang tepat.
  10. Setelah selesai, klik Simpan.

Tambahkan tag skrip secara terpisah

Beberapa platform (seperti Unbounce) mengharuskan Anda untuk menempelkan tag <script> dari kode semat di header halaman, dan sisa kode semat di halaman tempat Anda ingin Tombol Beli ditampilkan.

Langkah-langkah:

  1. Dari kode semat yang dibuat saat Anda membuat Tombol Beli, salin elemen <div> dan elemen <script>. Contoh:
<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. Buka header halaman untuk situs web tempat Anda ingin menyematkan Tombol Beli.
  2. Tempelkan seluruh elemen <script> di header halaman.
  3. Simpan perubahan Anda.
  4. Dari kode semat asli di admin Shopify, salin hanya elemen <div>. Contoh:
<div id='product-component-2dd3c8704e6'></div>
  1. Buka halaman di situs web Anda tempat Anda ingin menyematkan Tombol Beli.
  2. Tempelkan cuplikan kode <div> ke dalam halaman.
  3. Simpan perubahan Anda.