Sepete ekle düğmelerini gizleme

Dikkat

Bu, ileri düzey bir eğitimdir ve Shopify tarafından desteklenmez. HTML, CSS, JavaScript ve Liquid gibi web tasarımı dilleriyle ilgili bilgi sahibi olunması gerekir. Aşağıdaki eğitime devam etme konusunda kendinizi rahat hissetmiyorsanız bir Shopify İş Ortağı ile çalışmanızı öneririz.

Dikkat

Vintage temalar Shopify Tema Mağazası'nda bulunmaz.Bu temalar, Shopify'ın Online Store 2.0 temalarında yer alan özellikleri içermez ve güvenlik düzeltmelerinin dışında güncelleme almaz.

Not

Bu özelleştirme, vintage Shopify temaları içindir ve Online Store 2.0 temalarına uygulanmaz.

• Temanızın mimari sürümünü öğrenin
• Online Store 2.0 tema özelleştirmelerini keşfedin

Sepete ekle düğmelerinizi vitrininde gizleyebilirsiniz ve bunları gelecekte tekrar gösterebilirsiniz.

Not

Bu özelleştirme, dinamik ödeme düğmeleriyle uyumlu değildir. Temanız dinamik ödemeyi destekliyorsa ürün sayfalarında dinamik ödeme düğmelerini gizleme adımlarını takip ederek düğmelerin gösterilmesini engelleyin.

Bölümlere ayrılmış ve ayrılmamış temalar

Not: Bu eğitimin adımları bölümlere ayrılmış tema bir tema mı yoksa bölümlere ayrılmamış bir tema mı kullandığınıza bağlı olarak değişiklik gösterir. Bölümlere ayrılmış temada, ana sayfanızın düzenini değiştirmeniz için öğeleri sürükleyip bırakabilirsiniz. Bu işlemi bölümlere ayrılmamış temada yapamazsınız.

Temanızın, bölümleri destekleyip desteklemediğini öğrenmek için temanızın Kodu düzenle sayfasına gidin. Bölümler dizininde dosyalar varsa bu, bölümlendirilmiş bir tema kullandığınız anlamına gelir. Bölümlendirilmemiş temalar Ekim 2016'dan önce kullanıma sunulmuştur ve Bölümler dizininde bu temaların dosyaları yoktur.

Bölümlendirilmiş bir tema kullanıyorsanız Sectioned themes (Bölümlendirilmiş temalar) düğmesine tıklayın ve talimatları izleyin. Daha eski ve bölümlendirilmemiş bir tema kullanıyorsanız Non-sectioned themes (Bölümlendirilmemiş temalar) düğmesine tıklayın ve talimatları izleyin.

Sectioned

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
3. Bölümler dizininde product-template.liquid dosyanıza tıklayın. Sepete ekle düğmesinin HTML kodunu bulun. Başlangıç için sepet kelimesini aratabilirsiniz.

Sepete ekle düğmesinin kodu temaya göre değişiklik gösterir. Add to cart, AddToCart veya add-to-cart metinlerine sahip <input> veya <button> etiketlerini bulun.

Debut temasında, sepete ekle düğmesi kodu aşağıdaki gibi gözükmektedir:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>

1. Kodu Liquid {% comment %} ve {% endcomment %} etiketleri arasına alın. Bu, kodun mağazanızda görünmesini engeller fakat şablon değiştirmek istediğiniz zaman kolayca geri koymanızı sağlar.

Yukarıdaki örnek kullanıldığında yeni kod aşağıdaki gibi olur:

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}

Dikkat

Ürün sayfanızdaki <form> etiketlerini yorum içerisine almadığınızdan emin olun. Yorum etiketleriniz herhangi bir <form> veya </form> etiketinde yer almamalıdır. Aksi takdirde müşteriler, ürün sayfanızı görüntülerken hatalarla karşılaşabilir.

1. Değişikliklerinizi onaylamak için Kaydet'e tıklayın.

Sepete ekle düğmelerinizi tekrar göstermek istediğinizde HTML/CSS sayfasını düzenle içerisindeki product-template.liquid dosyanıza geri gidin, {% comment %} ve {% endcomment %} etiketlerini kaldırın ve Kaydet'e tıklayın.

Non-sectioned

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
3. Şablonlar dizininde product.liquid dosyanıza tıklayın. Sepete ekle düğmesinin HTML kodunu bulun. Başlangıç için sepet kelimesini aratabilirsiniz.

Sepete ekle düğmesinin kodu temaya göre değişiklik gösterir. Add to cart, AddToCart veya add-to-cart metinlerine sahip <input> veya <button> etiketlerini bulun.

Minimal temasında sepete ekle düğmesi aşağıdaki gibi gözükmektedir:

<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>

1. Kodu Liquid {% comment %} ve {% endcomment %} etiketleri arasına alın. Bu, kodun mağazanızda görünmesini engeller fakat şablon değiştirmek istediğiniz zaman kolayca geri koymanızı sağlar.

Yukarıdaki örnek kullanıldığında yeni kod aşağıdaki gibi olur:

{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}

Dikkat

Ürün sayfanızdaki <form> etiketlerini yorum içerisine almadığınızdan emin olun. Yorum etiketleriniz herhangi bir <form> veya </form> etiketinde yer almamalıdır. Aksi takdirde müşteriler, ürün sayfanızı görüntülerken hatalarla karşılaşabilir.

1. Değişikliklerinizi onaylamak için Kaydet'e tıklayın.

Sepete ekle düğmenizi göstermeye hazır olduğunuzda, HTML/CSS sayfasını düzenle üzerindeki product.liquid şablonunuza dönerek {% comment %} ve {% endcomment %} etiketlerini kaldırın ve Kaydet seçeneğine tıklayın.