Bantuan
Masuk

Menyesuaikan atau menghapus Tombol Beli, koleksi tersemat, atau keranjang tersemat

Anda dapat mengubah tampilan atau perilaku Tombol Beli, koleksi tersemat, atau keranjang tersemat dengan mengedit kode sematnya di HTML sumber halaman web Anda. Anda juga dapat menghapus sematan dengan menghapus kode tersebut dari halaman web.

Tombol Beli menampilkan produk beserta tombol pembelian. Koleksi tersemat menampilkan beberapa produk. Keranjang tersemat menampilkan keranjang mandiri yang dapat digunakan pelanggan di berbagai halaman.

Kode semat adalah cuplikan kode yang Anda salin dari admin Shopify dan tempel ke HTML halaman web saat membuat Tombol Beli atau keranjang. Kode semat ditulis dalam JavaScript, bahasa pemrograman yang digunakan untuk menambahkan fitur interaktif ke halaman web.

Di halaman ini

Memahami kode semat Tombol Beli

Setiap Tombol Beli dibangun dari beberapa bagian terpisah yang disebut komponen. Komponen adalah bagian bernama dari kode semat yang mengontrol salah satu fungsi Tombol Beli. Misalnya, saat Anda menambahkan produk dengan keranjang ke halaman web, kode semat akan menghasilkan komponen berikut:

  • komponen product, yang menampilkan informasi produk dan tombol pembelian
  • komponen cart, yang menampilkan isi keranjang
  • komponen toggle keranjang, yang menampilkan ikon untuk membuka keranjang

Jika komponen produk Anda membuka jendela pop-up detail produk, kode semat akan menghasilkan dua komponen tambahan: komponen modal untuk pop-up itu sendiri dan komponen modalProduct untuk informasi produk di dalam pop-up tersebut.

Dalam cuplikan kode berikut, terdapat komponen terpisah untuk produk dan keranjang:

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

Setiap komponen dikonfigurasi melalui objek konfigurasi di dalam kode semat. Objek adalah grup pengaturan terstruktur, yang diformat sebagai daftar pasangan kunci-nilai:

  • Kunci (key) adalah nama pengaturan, seperti buttonDestination.
  • Nilai (value) adalah hasil penetapan dari pengaturan, seperti 'cart'.

Objek ini serupa dengan spreadsheet: setiap kunci berhubungan dengan nama kolom, dan setiap nilai berkaitan dengan isi sel. Untuk mengubah tampilan atau perilaku Tombol Beli Anda, edit kunci dan nilai di dalam objek konfigurasi tersebut.

Setiap komponen memiliki banyak kunci yang dapat diedit. Untuk melihat daftar lengkap kunci yang dapat diedit, lihat dokumentasi pengembang. Untuk mengonfigurasi kunci yang belum ada di kode semat Anda, tambahkan kunci ke objek yang sesuai. Untuk contohnya, rujuk ke Mengubah tata letak sematan produk.

Menyesuaikan gaya komponen

Setiap komponen memiliki objek konfigurasi styles bersarang yang mengontrol tampilan komponen. Objek bersarang adalah objek yang ditempatkan di dalam objek lain.

Objek styles menggunakan CSS, yaitu bahasa yang digunakan untuk mendeskripsikan cara elemen halaman web diberi gaya visual. Setiap kunci tingkat atas di dalam objek styles mewakili elemen dalam komponen tersebut, seperti judul atau tombol. Di dalam kunci tersebut, setiap kunci bersarang adalah properti CSS (misalnya, background-color atau border), dan nilainya adalah nilai CSS.

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

Properti CSS valid apa pun dapat ditambahkan ke styles. Pastikan nama properti yang menggunakan tanda hubung diapit oleh tanda kutip.

Untuk informasi selengkapnya tentang kustomisasi CSS, lihat dokumentasi developer.

Komponen koleksi tersemat

Koleksi tersemat menggunakan objek konfigurasi yang sama dengan Tombol Beli. Untuk mengedit tata letak atau properti produk lainnya di dalam koleksi, temukan objek konfigurasi product dan edit dengan cara yang sama seperti mengedit sematan produk. Untuk mengedit properti koleksi itu sendiri, seperti teks tombol Halaman berikutnya, edit objek konfigurasi productSet.

Beberapa kunci, seperti teks suatu komponen, dikonfigurasi melalui objek bersarang. Misalnya, teks untuk tombol Halaman berikutnya berada di dalam objek text milik komponen productSet:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}

Modal detail produk adalah jendela pop-up yang menampilkan informasi produk. Untuk mengarahkan pelanggan Anda ke modal detail produk alih-alih keranjang, edit kode semat Tombol Beli di HTML sumber halaman web Anda.

Langkah-langkah:

  1. Buka HTML halaman yang berisi sematan produk yang ingin Anda ubah.
  2. Temukan objek konfigurasi product.
  3. Temukan kunci buttonDestination dalam objek tersebut:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Ubah nilai kunci tersebut menjadi 'modal', termasuk tanda kutipnya:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Simpan perubahan Anda.

Mengubah tata letak sematan produk

Tata letak sematan produk horizontal menempatkan gambar di samping detail produk, bukan di atasnya. Untuk beralih ke tata letak ini, edit kode semat Tombol Beli di HTML sumber halaman web Anda.

Langkah-langkah:

  1. Buka HTML halaman yang berisi sematan produk yang ingin Anda ubah.
  2. Temukan objek konfigurasi product.
  3. Tambahkan kunci layout, lalu tetapkan nilainya menjadi 'horizontal'. Pastikan nilainya menyertakan tanda kutip dan baris sebelumnya diakhiri dengan koma:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Simpan perubahan Anda.

Mengubah tampilan dan perilaku sematan keranjang

Untuk mengubah tampilan atau perilaku keranjang, edit objek konfigurasi cart di kode semat Anda.

Langkah-langkah:

  1. Buka HTML halaman yang berisi keranjang yang ingin Anda edit.
  2. Temukan objek konfigurasi cart di kode semat Anda:
options: {
      cart: {
        startOpen: false
      }
}
  1. Edit kunci yang ada, atau tambahkan kunci baru, untuk mengubah tampilan atau perilaku keranjang. Untuk melihat daftar lengkap kunci yang dapat dikonfigurasi, lihat dokumentasi pengembang.
  2. Simpan perubahan Anda.

Hapus Tombol Beli, koleksi tersemat, atau keranjang tersemat

Untuk menghapus Tombol Beli, koleksi tersemat, atau keranjang tersemat dari halaman web Anda, hapus kode sematnya dari HTML sumber.

Langkah-langkah:

  1. Buka HTML sumber halaman web yang berisi Tombol Beli, koleksi tersemat, atau keranjang tersemat.
  2. Hapus seluruh kode semat dari HTML sumber, dimulai dari <script data-shopify-buy-ui> hingga </script>. Berikut adalah contoh kode semat Tombol Beli:
<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      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({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>
  1. Simpan perubahan Anda.