Yardım
Oturum aç

Satın Al Düğmesi kodunu HTML'e ekleme

Shopify yöneticinizde bir Satın Al Düğmesi oluşturduktan sonra bunu kendi web sitenize veya blogunuza ekleyebilirsiniz.

Web sitenizin kaynak HTML'ine yerleştirme kodu ekleme işlemi; Satın Al Düğmelerinizin ve sepetinizin nasıl ve nerede görünmesini istediğinize, yayınlama platformunuza ve bazen de o platformda kullandığınız temaya bağlı olarak biraz farklılık gösterir.

Bu sayfada

WordPress'e yerleştirme kodu ekleme

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

Bir WordPress gönderisine veya sayfasına yerleştirme kodu ekleme

  1. Shopify'da bir Satın Al Düğmesi oluşturun ve Yerleştirme Kodu iletişim kutusundan düğmenin yerleştirme kodunu kopyalayın (veya Yerleştirme kodunu panoya kopyala'ya 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 birini düzenleyin.
  4. Blok düzenleyicinin içinde + düğmesine tıklayın, Özel HTML araması yapı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üntüleneceğini önizleyin:
    • Ö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üğmesini önizlemek için blok araç çubuğunda Önizleme'ye tıklayın.
  7. İşiniz bittiğinde gönderiniz veya sayfanız için Taslağı Kaydet, Önizle ya da Yayınla düğmesine tıklayın.

WordPress'in Classic Editor Eklentisi'ni kullanıyorsanız Özel HTML bloğu kullanmak yerine metin düzenleyicisini Görsel moddan Metin moduna değiştirin ve yerleştirme kodunu düzenleyiciye yapıştırın.

Bir WordPress şablonuna yerleştirme kodu ekleme

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

Adımlar:

  1. Shopify'da bir Satın Al Düğmesi oluşturun ve Yerleştirme Kodu iletişim kutusundan düğmenin yerleştirme kodunu kopyalayın (veya Yerleştirme kodunu panoya kopyala'ya tıklayın).
  2. WordPress kontrol panelinizde Düzenleyici'ye gidin.
  3. Düzenlemek istediğiniz şablona gidin.
  4. Blok düzenleyicinin içinde + düğmesine tıklayın, Özel HTML araması yapı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üntüleneceğini önizleyin:
    • Ö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üğmesini önizlemek için blok araç çubuğunda Önizleme'ye tıklayın.
  7. İşiniz bittiğinde şablon için Önizle veya Kaydet düğmesine tıklayın.

Shopify blogunuza yerleştirme kodu ekleme

Not:

Adımlar:

Masaüstü

  1. Shopify yöneticinizden İçerik > Blog gönderileri bölümüne gidin.

  2. Blog Gönderileri sayfasından, düzenlemek istediğiniz bir blog gönderisinin başlığına tıklayın veya yeni bir tane oluşturmak için Blog gönderisi ekle'ye tıklayın.

  3. Blog gönderinizi 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. Kaydet'e tıklayın.

Mobil

  1. Shopify uygulamasından Menü simgesine dokunun.

  2. İçerik menüsünde aşağı ok simgesine ve ardından Blog gönderileri'ne dokunun.

  3. Düzenlemek istediğiniz blog gönderisine dokunun.

  4. İçerik bölümünde … simgesine ve ardından Kodu düzenle simgesine dokunun.

  5. Yerleştirme kodunuzu metin alanına yapıştırın.

  6. Kaydet'e veya ✓ simgesine dokunun.

Squarespace'e yerleştirme kodu ekleme

Squarespace'te hem ayrı gönderilere hem de ana sayfanızdaki menülere yerleştirme kodu ekleyebilirsiniz. Bazı durumlarda her ikisini de yapmak isteyebilirsiniz. Örneğin, ayrı gönderilere eklediğiniz Satın Al Düğmelerinden gelen satın alımları karşılamak için ana sayfanıza bir 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üntülenmesini istediğiniz sayfadaki öğeyi bulun, imlecinizi Sayfa İçeriği alanının üzerine getirin ve ardından DÜZENLE'ye tıklayın.
  3. Yerleştirme kodunu eklemek istediğiniz ekleme noktasına tıklayın.
  4. İçerik Blokları iletişim kutusunun Diğer bölümünde Kod'a tıklayın.
  5. Shopify yöneticinizden, Yerleştirme Kodu iletişim kutusundaki yerleştirme kodunu kopyalayın.
  6. Squarespace kontrol panelinizden yerleştirme kodunu KOD iletişim kutusuna yapıştırın. Metin alanının HTML alacak şekilde ayarlandığından emin olun.
  7. Kodu düzenle iletişim kutusunda UYGULA'ya tıklayın.
  8. Sayfa düzenleyicide yeniden KAYDET'e tıklayın. Squarespace, kontrol panelinde JavaScript'i devre dışı bıraktığından, Satın Al Düğmesi'nin veya ekli sepetin çalıştığını doğrulamak için sayfanızı ayrı olarak önizlemeniz gerekir.

Adımları tamamlamanıza rağmen Satın Al Düğmeniz yüklenmiyorsa Ajax yüklemesini kapatmanız gerekebilir. Daha fazla bilgi için Ajax'ı etkinleştirme veya devre dışı bırakma bölümüne bakın.

Wix'e yerleştirme kodu ekleme

Shopify yöneticinizde bir Satın Al Düğmesi veya koleksiyon oluşturduktan sonra bunu, Wix Web Sitesi Düzenleyicisi'ni kullanarak Wix web sitenize ekleyebilirsiniz.

Yerleştirme kodunu düzenlemeden Wix web sitenizde birden fazla ürün görüntülemek istiyorsanız bir koleksiyon yerleştirebilirsiniz. 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.
  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 Web Sitesi Düzenleyicisi'nde + düğmesine, ardından Daha Fazla'ya tıklayın.
  3. Sayfaya bir HTML kodu widget'ı eklemek için HTML Kodu'na tıklayın.
  4. Kod Gir'e tıklayın.
  5. HTML Ayarları iletişim kutusunda, Satın Al Düğmenizin veya koleksiyonunuzun yerleştirme kodunu Kodunuzu buraya ekleyin alanına yapıştırın ve ardından Güncelle'ye tıklayın.
  6. HTML kodu widget'ını içeriğine sığacak şekilde yeniden boyutlandırın. Sepetli bir yerleştirme oluşturuyorsanız sepet sekmesinin doğru yerde görüntülendiğinden emin olun.
  7. İşiniz bittiğinde Kaydet'e tıklayın.

Birden fazla ürün veya koleksiyon yerleştirme

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üzenleyiciye 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ı tekrarlayın.
  3. Düzgün bir şekilde hizalanmış olarak görüntülendiklerinden 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 Web Sitesi Düzenleyicisi'nde + düğmesine, ardından Daha Fazla'ya tıklayın.
  6. Sayfaya bir HTML kodu widget'ı eklemek için HTML Kodu'na tıklayın.
  7. Kod Gir'e tıklayın.
  8. HTML Ayarları iletişim kutusunda, Satın Al Düğmeleriniz için düzenlenmiş kodu Kodunuzu buraya ekleyin alanına yapıştırın ve ardından Güncelle'ye tıklayın.
  9. HTML kodu widget'ını içeriğine sığacak şekilde yeniden boyutlandırın. Sepetli bir yerleştirme oluşturuyorsanız sepet sekmesinin doğru yerde görüntülendiğinden emin olun.
  10. İşiniz bittiğinde Kaydet'e tıklayın.

Komut dosyası etiketlerini ayrı ekleme

Bazı platformlar (Unbounce gibi) yerleştirme kodunun <script> etiketlerini sayfa üstbilgisine, yerleştirme kodunun geri kalanını ise Satın Al Düğmesi'nin görüntülenmesini istediğiniz sayfaya yapıştırmanızı gerektirir.

Adımlar:

  1. Bir Satın Al Düğmesi oluşturduğunuzda oluşturulan yerleştirme kodundan hem <div> öğesini hem de <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 yerleştirmek 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 sitenizde Satın Al Düğmesi yerleştirmek istediğiniz sayfayı açın.
  2. <div> kod parçacığını sayfaya yapıştırın.
  3. Değişikliklerinizi kaydedin.