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üğmelerinizin ve sepetin nerede ve nasıl görünmesini istediğinize, yayınlama platformunuza ve bazen de platformda kullandığınız temaya göre biraz değişiklik gösterir.

Not

Shopify dışındaki yayınlama platformlarına (Squarespace veya WordPress gibi) 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'e yerleştirme kodu ekleme

WordPress sitenizde gönderilere, sayfalara veya şablonlara yerleştirme kodu ekleyebilirsiniz.

Not

Ekli Satın Al Düğmeleri, kendi kendine barındırılan WordPress.org siteleri ve WordPress.com'un sunduğu belirli planlarla uyumludur. Aşağıdaki belgeler, son WordPress sürümleri göz önünde bulundurularak hazırlanmıştır. Sitenizde yüklü olan sürüm farklı olabilir. WordPress sürümleri hakkında daha fazla bilgiye, WordPress destek sitesinden ulaşabilirsiniz.

WordPress gönderisine veya sayfasına 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 kontrol panelinizden gönderilerinize veya sayfalarınıza gidin.
3. Yeni bir gönderi veya sayfa oluşturun ya da mevcut bir tanesini düzenleyin.
4. Blok düzenleyicisinin içinde + düğmesine tıklayın, Özel HTML ibaresini arayın ve ardından Özel HTML bloğu eklemek için tıklayın.
5. Yerleştirme kodunu, Özel HTML bloğu tarafından sağlanan metin alanına yapıştırın.

6. İsteğe bağlı: Özel HTML bloğunu taşıyın veya Satın Al Düğmenizin nasıl görüneceğinin önizlemesini gözden geçirin:

   • Özel HTML bloğunu taşımak için bloğun araç çubuğundaki ok düğmelerine tıklayın veya bloğu yeni bir konuma sürükleyin.
   • Satın Al Düğmesinin önizlemesini görüntülemek için blok araç çubuğunda Önizle'ye tıklayın.

7. İşlemi gerçekleştirdikten sonra gönderiniz veya sayfanız için Taslağı Kaydet, Önizle ya da Yayınla düğmesine tıklayın.

WordPress'in sunduğu Classic Editor Plugin'i kullanıyorsanız Özel HTML bloğu kullanmak yerine metin düzenleyicisini Görsel modundan Metin moduna geçirin ve yerleştirme kodunu düzenleyiciye yapıştırın.

WordPress şablonuna yerleştirme kodu ekleme

WordPress temanız site düzenleyicisini destekliyorsa sitenizin şablonlarına Ekli Satın Al Düğmesi ekleyebilirsiniz.

Adımlar:

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 kontrol panelinizde, Düzenleyici'ye gidin.
3. Düzenlemek istediğiniz şablona gidin.
4. Blok düzenleyicisinin içinde + düğmesine tıklayın, Özel HTML ibaresini arayın ve ardından Özel HTML bloğu eklemek için tıklayın.
5. Yerleştirme kodunu, Özel HTML bloğu tarafından sağlanan metin alanına yapıştırın.

6. İsteğe bağlı: Özel HTML bloğunu taşıyın veya Satın Al Düğmenizin nasıl görüneceğinin önizlemesini gözden geçirin:

   • Özel HTML bloğunu taşımak için bloğun araç çubuğundaki ok düğmelerine tıklayın veya bloğu yeni bir konuma sürükleyin.
   • Satın Al Düğmesinin önizlemesini görüntülemek için blok araç çubuğunda Önizle'ye tıklayın.

7. İşlemi gerçekleştirdikten sonra şablon için Önizle veya Kaydet düğmesine tıklayın.

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çerse ürün artık sepette görünmez. Satın Al Düğmesini düzenleyerek doğrudan ödeme sayfasına yönlendirmesini sağlayabilirsiniz.

Not: #### Adımlar:

Masaüstü

1. Shopify yöneticinizden Online Mağaza > Blog Gönderileri'ne gidin.
2. Blog Gönderileri sayfasında, düzenlemek istediğiniz blog gönderisinin başlığına veya yeni gönderi oluşturmak için Blog gönderisi ekle'ye tıklayın.
3. Write your blog post (Blog gönderisi yazın) bölümünde, zengin metin düzenleyicisindeki HTML'yi göster'e tıklayın.
4. Yerleştirme kodunuzu ana metin alanına yapıştırın.
5. Kayıtyap ' a tıklayın.

iPhone

1. Shopify uygulamasında, … düğmesine dokunun.
2. Satış Kanalları bölümünde online mağaza' ya dokunun.
3. Blog gönderileri'ne dokunun.

Android

1. Shopify uygulamasında, … düğmesine dokunun.
2. Satış Kanalları bölümünde online mağaza' ya dokunun.
3. Blog gönderileri'ne dokunun.

## Squarespace'e yerleştirme kodu ekleme

Dikkat

Squarespace'teki bazı gelişmiş özelleştirmeler temaya özeldir. Bu özelleştirmeler Shopify tarafından desteklenmez.

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, imleci Page Content (Sayfa İçeriği) alanının üzerine getirin, 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 SAVE (KAYDET) seçeneğine yeniden tıklayın. Squarespace, kontrol panelinde JavaScript'i devre dışı bıraktığından eklediğiniz Satın Al Düğmesinin veya ekli sepetinizin çalıştığını doğrulamak için sayfanızın önizlemesini ayrı olarak görüntülemeniz gerekir.

Adımları tamamlamanıza karşın Satın Al Düğmeniz yüklenmiyorsa Ajax yüklemesini kapatmanız gerekebilir. Ayrıntılı bilgi için Enable or disable Ajax (Ajax'ı etkinleştirme veya devre dışı bırakma) bölümüne bakın.

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.

Dikkat

Birden fazla ürün veya koleksiyon için Satın Al Düğmeleri eklemek istiyorsanız Wix HTML kodu widget'ına eklemeden önce yerleştirme kodunu düzenlemeniz gerekir. Wix web sitenize, yerleştirme kodunu düzenlemeden birden fazla Satın Al Düğmesi eklerseniz birden fazla ürün satın almaya çalışan müşteriler, her ürün için ayrı bir sepete sahip olur.

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, Wix sınırlamaları nedeniyle Aynı sekmede yönlendir seçeneğini 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. HTML kodu widget'ını, içeriklere uyacak şekilde yeniden boyutlandırın. Sepet içeren bir ekleme (gömme) işlemi 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. HTML kodu widget'ını, içeriklere uyacak şekilde yeniden boyutlandırın. Sepet içeren bir ekleme (gömme) işlemi 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'ü kullanma hakkında yardıma mı ihtiyacınız var? Wix Destek ekibiyle iletişime geçin.

Komut dosyası etiketlerini ayrı olarak ekleme

Unbounce gibi bazı platformlar, yerleştirme kodunun <script> etiketlerini sayfa üstbilgisine ve yerleştirme kodunun geri kalanını, Satın Al Düğmesinin görünmesini istediğiniz sayfaya 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.