HTML'ye Satın Al Düğmesi kodu ekleme

Shopify yöneticinizde Satın Al Düğmesi oluşturduktan sonra bunu kendi web sitenize veya blogunuza eklemeye hazırsınız demektir.

Web sitenizin kaynak HTML'sine yerleştirme kodu ekleme işlemi, Satın Al Düğmeleriniz ile sepetin nasıl ve nerede görünmesini istediğinize, yayınlama platformunuza ve bazen platformda kullandığınız temaya göre biraz değişiklik gösterir.

Not: Squarespace veya WordPress.org blogu gibi, Shopify'ın dışındaki yayınlama platformlarına yerleştirme kodu ekleme konusunda yardıma ihtiyacınız varsa destek almak için doğrudan web sitesi sağlayıcınızla veya yayınlama platformunuzla iletişime geçin.

WordPress.org bloguna yerleştirme kodu ekleme

WordPress.org blogunuzun ana sayfasında, ayrı ayrı gönderilere ve menüye yerleştirme kodu ekleyebilirsiniz.

Not: Ekli Satın Al Düğmeleri WordPress.org platformuyla uyumludur ancak WordPress.com ile uyumlu değildir. Bu belgeler, WordPress 4.2.2 sürümüyle ilgili bilgi verir. Sizin sürümünüz farklı olabilir. WordPress destek sitesinden WordPress sürümleri hakkında daha fazla bilgi edinebilirsiniz.

WordPress gönderisine yerleştirme kodu ekleme

  1. Shopify'da Satın Al Düğmesi oluşturun ve Yerleştirme Kodu iletişim kutusundan düğmenin yerleştirme kodunu kopyalayın veya Copy embed code to clipboard (Yerleştirme kodunu panoya kopyala) seçeneğine tıklayın.
  2. WordPress panelinizden gönderilerinize gidin.
  3. Yeni bir gönderi oluşturun veya Satın Al Düğmesi göstermek istediğiniz mevcut bir gönderiyi düzenleyin.
  4. Kullandığınız WordPress sürümüne bağlı olarak aşağıdaki adımlardan birini tamamlayın:

    • Gönderide, metin düzenleyicisini Görsel modundan Metin moduna geçirin.
    • Blok düzenleyicisinden + düğmesine tıklayıp Custom HTML öğesini arayın, ardından Özel HTML'ye tıklayın.
  5. Yerleştirme kodunu, Satın Al Düğmesinin veya koleksiyonun görünmesini istediğiniz yerdeki metin alanına yapıştırın.

  6. İşiniz bittiğinde Taslağı Kaydet, Ön izleme veya Yayımla seçeneğine tıklayın.

WordPress menüsüne yerleştirme kodu ekleme

Adımlar:

  1. WordPress panelinizden Tasarlayın seçeneğine tıklayın.
  2. Tema düzenleyicisini açmak için Özelleştir'e tıklayın ve ardından Bileşenler'e tıklayın.
  3. Satın Al Düğmesini veya özel sepet kodunu eklemek istediğiniz alanın adına tıklayın.
  4. Mevcut bir Metin bileşeni açın veya Bir bileşen ekle'ye tıklayın ve ardından Metin'e tıklayın.
  5. Yerleştirme kodunu Metin bileşenindeki ana metin alanına yapıştırın.
  6. Değişikliklerinizi kaydedin.

Not: Web sitenizdeki sepet davranışını veya görünümünü değiştirmek istiyorsanız WordPress.org blogunuzun ana sayfasındaki bir menüye özel sepet kodu ekleyebilirsiniz.

Shopify blogunuza yerleştirme kodu ekleme

Not: Satın Al Düğmesi ayrı bir sepet oluşturur. Müşteriniz online mağazanızda farklı bir sayfaya geçtiğinde ürün artık sepette görünmez. Doğrudan ödeme sayfasına gitmek için Satın Al Düğmesini düzenleyebilirsiniz.

Adımlar:

  1. Blog Gönderileri sayfasından, düzenlemek istediğiniz bir blog gönderisinin başlığına tıklayın veya yeni bir sayfa oluşturmak için Blog gönderisi ekle'ye tıklayın. 4. Blog gönderisi yaz bölümünde zengin metin düzenleyicisinden HTML'yi göster'e tıklayın. 5. Yerleştirme kodunuzu ana metin alanına yapıştırın. 6. Kaydet'e tıklayın.

Squarespace'e yerleştirme kodu ekleme

Squarespace'teki ayrı ayrı gönderilere ve ana sayfanızdaki menülere yerleştirme kodu ekleyebilirsiniz. Bazı durumlarda ikisini de yapmak isteyebilirsiniz. Örneğin, gönderilere eklediğiniz Satın Al Düğmelerinden satın alım gelmesi için ana sayfanıza sepet ekleyebilirsiniz.

Adımlar:

  1. Squarespace kontrol panelinizden yerleştirme kodunu eklemek istediğiniz web sayfasını açın.
  2. Satın Al Düğmesinin veya ekli sepetin görünmesini istediğiniz sayfada öğeyi bulun, imlecinizi Page Content (Sayfa İçeriği) alanının üzerine getirin ve ardından EDIT (DÜZENLE) seçeneğine tıklayın.
  3. Yerleştirme kodunu eklemek istediğiniz ekleme noktasına tıklayın.
  4. Content Blocks (İçerik Blokları) iletişim kutusunun More (Daha Fazla) bölümünde Code (Kod) seçeneğine tıklayın.
  5. Shopify yöneticinizden embed kodunu Embed Code (Yerleştirme Kodu) iletişim kutusundan kopyalayın.
  6. Squarespace kontrol panelinizden yerleştirme kodunu CODE (KOD) iletişim kutusuna yapıştırın. Metin alanının, HTML almaya ayarlandığından emin olun.
  7. EDIT CODE (KODU DÜZENLE) iletişim kutusundan APPLY (UYGULA) seçeneğine tıklayın.
  8. Sayfa düzenleyicisinde yeniden SAVE (KAYDET) seçeneğine tıklayın. Squarespace, kontrol panelinde JavaScript'i devre dışı bıraktığından eklediğiniz Satın Al Düğmesini veya ekli sepetinizi görmek için ayrı olarak sayfanızın önizlemesini görüntülemeniz gerekir.

Adımları tamamlarsanız ve Satın Al Düğmeniz yüklenmiyorsa Ajax yüklemesini devre dışı bırakmanız gerekebilir. Daha fazla ayrıntı görmek için Enable or disable Ajax (Ajax'ı etkinleştirme veya devre dışı bırakma) bölümüne gidin.

Not: Squarespace ana sayfanızda bir menüye ekli sepet eklerseniz bu, ayrı gönderilerde eklediğiniz Satın Al Düğmelerinden siparişler alır.

Wix'e yerleştirme kodu ekleme

Shopify yöneticinizde Satın Al Düğmesi veya koleksiyon oluşturduktan sonra Wix Editörü'nü kullanarak bu kodu Wix web sitenize ekleyebilirsiniz.

Yerleştirme kodunu düzenlemeden Wix web sitenizde birden fazla ürün görüntülemek istiyorsanız koleksiyon ekleyebilirsiniz. Wix'te görüntülemek istediğiniz ürünler için Shopify yöneticinizde yeni bir koleksiyon oluşturabilirsiniz.

Adımlar:

  1. Shopify yöneticinizden bir ürün veya koleksiyon için Satın Al Düğmesi oluşturun ve ardından yerleştirme kodunu kopyalayın.

Not: Bir Wix web sitesi için Satın Al Düğmenizi oluşturduğunuzda Aynı sekmede yönlendir seçeneğini Wix sınırlamaları nedeniyle kullanamazsınız.

  1. Wix hesabınızdan, Sitelerim bölümünde düzenlemek istediğiniz siteyi bulun ve ardından Siteyi Düzenle'ye tıklayın.
  2. Wix Editörü'nde + düğmesine ve ardından Daha Fazla'ya tıklayın.
  3. Sayfaya HTML kodu widget'ı eklemek için HTML Kodu seçeneğine tıklayın.
  4. Kodu Girin'e tıklayın.
  5. HTML Ayarları iletişim kutusunda, Satın Al Düğmeniz veya koleksiyonunuz için Kodunuzu buraya ekleyin alanına yerleştirme kodunu yapıştırın ve ardından Uygula'ya tıklayın.
  6. İçeriğe uyması için HTML kodu widget'ını yeniden boyutlandırın. Sepet içeren bir ekleme (bir gömülebilir) oluşturuyorsanız sepet sekmesinin doğru yerde göründüğünden emin olun.
  7. İşlemi tamamladığınızda Kaydet'e tıklayın.

Birden fazla ürün veya koleksiyon ekleme

Adımlar:

  1. Shopify yöneticinizden bir ürün veya koleksiyon için Satın Al Düğmesi oluşturun ve ardından yerleştirme kodunu kopyalayın.
  2. Kodu bir kod düzenleyicisine veya Wix web sitesi oluşturucusuna yapıştırın. İhtiyacınız olan Satın Al Düğmelerini oluşturana kadar ilk iki adımı yineleyin.
  3. Uygun hizalamada göründüğünden emin olmak için yerleştirme kodlarını düzenleyin.
  4. Wix hesabınızdan, Sitelerim bölümünde düzenlemek istediğiniz siteyi bulun ve ardından Siteyi Düzenle'ye tıklayın.
  5. Wix Editörü'nde + düğmesine ve ardından Daha Fazla'ya tıklayın.
  6. Sayfaya HTML kodu widget'ı eklemek için HTML Kodu seçeneğine tıklayın.
  7. Kodu Girin'e tıklayın.
  8. HTML Ayarları iletişim kutusunda, Satın Al Düğmeleriniz için Kodunuzu buraya ekleyin alanına düzenlenen kodu yapıştırın ve ardından Uygula'ya tıklayın.
  9. İçeriğe uyması için HTML kodu widget'ını yeniden boyutlandırın. Sepet içeren bir ekleme (bir gömülebilir) oluşturuyorsanız sepet sekmesinin doğru yerde göründüğünden emin olun.
  10. İşlemi tamamladığınızda Kaydet'e tıklayın.

Not: Wix Editörü'nü kullanma konusunda yardıma mı ihtiyacınız var? Wix Destek ile iletişime geçin.

Komut dosyası etiketlerini ayrı olarak ekleme

Unbounce gibi bazı platformlar, yerleştirme kodunun <script> etiketlerini sayfa üstbilgisine ve Satın Al Düğmesinin görünmesini istediğiniz sayfadaki yerleştirme kodunun geri kalanını yapıştırmanızı gerektirir.

Adımlar:

  1. Satın Al Düğmesi oluşturduğunuzda ortaya çıkan yerleştirme kodundan <div> öğesini ve <script> öğesini kopyalayın. Örneğin:
<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. Satın Al Düğmesi eklemek istediğiniz web sitesinin sayfa üstbilgisini açın.

  2. <script> öğesinin tamamını sayfa üstbilgisine yapıştırın.

  3. Değişikliklerinizi kaydedin.

  4. Shopify yöneticinizdeki orijinal yerleştirme kodundan yalnızca <div> öğesini kopyalayın. Örneğin:

<div id='product-component-2dd3c8704e6'></div>
  1. Web sitenizdeki, Satın Al Düğmesi eklemek istediğiniz sayfayı açın.

  2. <div> kod parçacığını sayfaya yapıştırın.

  3. Değişikliklerinizi kaydedin.

Shopify ile satış yapmaya hazır mısınız?

Ücretsiz olarak dene