Satın Al Düğmesini ya da ekli sepeti düzenleme veya silme

Satın Al Düğmeleri ve sepetler, Shopify yöneticinizden kopyaladığınız ve web sayfanızın kaynak HTML'sine yapıştırdığınız kod parçacıklarından oluşturulur. Bu kod parçacıkları ekleme kodu olarak adlandırılır. Bir düğmenin veya sepetin görünümünü veya davranışını değiştirmek istiyorsanız ilişkili ekleme kodunu düzenlemeniz gerekir.

Satın Al Düğmesi, ekli koleksiyon veya ekli sepet silme

Adımlar:

  1. Satın Al Düğmesini, ekli koleksiyonu veya ekli sepeti içeren web sayfasının kaynak HTML'sini açın.
  2. <script data-shopify-buy-ui> ile başlayan ve </script> ile biten kaynak HTML'den tüm ekleme kodunu silin. Satın Al Düğmesi için ekleme kodu aşağıdaki kod gibi görünür:
<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. Değişikliklerinizi kaydedin.

Satın Al Düğmesi, ekli koleksiyon veya ekli sepet artık web sayfanızda görüntülenmez.

Satın Al Düğmesini düzenleme

Mevcut bir Satın Al Düğmesinin görünümünü veya ayarlarını değiştirmek için kaynak HTML'nize eklediğiniz ekleme kodunu düzenlemeniz gerekir.

Her Satın Al Düğmesi, ekleme kodundaki ayrı bileşenlerden oluşturulur. Örneğin, web sayfanıza sepetle birlikte bir ürün eklerseniz ekleme kodu bir product bileşeni, bir cart bileşeni ve bir sepet toggle bileşeni oluşturur:

Ürün bileşeninizin, ürün ayrıntılarını içeren bir mod penceresi açmasını istiyorsanız ekleme kodu bir modal bileşeni ve bir modalProduct bileşeni oluşturur:

Aşağıdaki kod parçacığında, product ve cart için ayrı bileşenler vardır:

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'
          }
        }
      }
    }
  });
});

Bu bileşenler, ekleme kodunda yapılandırma nesneleri yoluyla ayrı olarak yapılandırılır. Ekleme kodundaki yapılandırma nesnelerini düzenleyerek Satın Al Düğmelerinizin görünümünü veya davranışını değiştirebilirsiniz.

Her bileşenin, düzenleyebileceğiniz birçok özelliği vardır. Düzenlenebilir seçeneklerin tam listesi için geliştirici belgelerimizi görüntüleyin. Ekleme kodunuzda görünmeyen bir seçeneği yapılandırmak istiyorsanız ilgili anahtarı ilgili nesneye eklemeniz gerekir (örneğe bakın).

Bileşenin stilini düzenleme

Her bileşenin, bileşen görünümünü değiştirmek için düzenleyebileceğiniz veya ekleyebileceğiniz iç içe geçmiş bir styles yapılandırma nesnesi vardır. Bu stiller CSS'ye benzer şekilde biçimlendirilir. Bileşendeki başlık veya düğme gibi bir öğeyi styles nesnesindeki her bir üst düzey anahtar temsil eder. Bu nesnede, her anahtar bir CSS özelliğidir (örneğin, "background-color" veya "border") ve değer, bir CSS değeridir.

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

Geçerli CSS özellikleri, styles nesnesine eklenebilir. `Kısa çizgi içeren özellik adlarının, tırnak işaretleri içinde olması gerektiğini unutmayın.

CSS özelleştirmesi hakkında daha fazla bilgi için geliştirici belgelerini görüntüleyin.

Örnek: Sepet bağlantısını ürün ayrıntıları modu ile değiştirme

Bu örnekte, geçerli ekleme kodunuzu değiştirerek müşterinizi sepet yerine ürün ayrıntıları moduna yönlendirebilirsiniz:

  1. Değiştirmek istediğiniz ürün eklemesini içeren sayfanın HTML'sini açın.
  2. product yapılandırma nesnesini bulun.
  3. Nesnedeki buttonDestination anahtarını bulun:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Bu anahtarın değerini 'modal' olarak değiştirin (tırnak işaretlerini eklediğinizden emin olun):
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Değişikliklerinizi kaydedin.

Örnek: Ürün eklemenizin düzenini değiştirme

Bu örnekte, ürün eklemenizin düzenini değiştirebilir ve böylece resmin üst taraf yerine yan tarafta görünmesini sağlayabilirsiniz:

  1. Değiştirmek istediğiniz ürün eklemesini içeren sayfanın HTML'sini açın.
  2. product yapılandırma nesnesini bulun.
  3. Bir layout anahtarı ekleyin ve ardından değeri 'horizontal' olarak ayarlayın:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

  1. Değişikliklerinizi kaydedin.

Web sitenizin sepetini düzenleme

Web sitenizin sepetinin görünümünü veya davranışını değiştirmek istiyorsanız ekleme kodunuzdaki cart yapılandırma nesnesini düzenlemeniz gerekir.

Adımlar:

  1. Düzenlemek istediğiniz sepeti içeren sayfanın HTML'sini açın.
  2. Ekleme kodunuzdaki cart yapılandırma nesnesini bulun:
options: {
      cart: {
        startOpen: false
      }
}
  1. Değiştirmek istediğiniz özelliği düzenleyin veya ekleyin. Yapılandırılabilir özelliklerin tam listesi için geliştirici belgelerini görüntüleyin.

  2. Değişikliklerinizi kaydedin.

Ekli koleksiyonu düzenleme

Ekli bir koleksiyonu düzenlemek, bir ürünün veya sepetin düzenlenmesine benzer. Koleksiyondaki ürünlerin özelliklerini (örneğin, her bir ürünün düzenini) düzenlemek için product yapılandırma nesnesini bulmanız ve bir ürün eklemesini düzenlediğiniz şekilde bunu düzenlemeniz gerekir. Koleksiyonun özelliklerini (örneğin, Sonraki sayfa düğmesinin metni) düzenlemek için bunun yerine productSet anahtarını düzenleyin.

Bir bileşenin metni gibi bazı özellikler, diğer nesnelerin içinde görünen nesneler olan iç içe geçmiş nesneler üzerinden yapılandırılır. Örneğin, bir Sonraki sayfa düğmesinin metni productSet bileşeninin text nesnesinin içinde görünür:

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

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

Ücretsiz olarak dene