Müşterilerin bir seçenek seçmesini sağlayın

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

Shopify'ın ücretsiz bir temasını kullanıyorsanız bu eğitimle ilgili yardım almak için Shopify Destek ekibi ile iletişime geçebilirsiniz. 15 dakikalık tasarım süresi gerekir. Daha fazla bilgi edinmek için Temalar için destek bölümüne bakın.

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

Müşteri online mağazanızdaki bir ürün sayfasını ziyaret ettiğinde, varsayılan olarak kullanılabilir ilk varyasyon seçilir. Kullanılabilir ilk varyasyonu otomatik olarak seçme özelliğini devre dışı bırakmak için bu özelleştirmeyi kullanabilirsiniz. Bunu yaptığınızda, bir varyasyon gösterilmeden önce müşteriden manuel olarak bir varyasyon seçmesi istenir.

Not

Bu özelleştirme, varsayılan olarak bir varyasyonun seçilmesini engellediğinden müşteri bir varyasyon seçinceye kadar temanız bir ürün fiyatı göstermeyebilir. Varyasyonları olan ürünlerin öne çıkan bir fiyatı olmadığı için bu beklenen bir davranıştır. Görüntülenen fiyat, seçilen varyasyon tarafından belirlenir.

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.

Bölümlere ayrılmış temalar için adımlar

Temanızı seçme

Bu özelleştirmeye yönelik adımlar, temanıza göre değişiklik gösterir. Aşağıdaki talimatları uygulamadan önce temanıza ilişkin düğmeye tıklayın:

Boundless

Boundless için adımlar

Özelleştirmeyi Boundless'a uygulamak için şu adımları izleyin:

Temanızın JavaScript dosyasını düzenleme

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. Assets (Öğeler) dizininde theme.js veya theme.js.liquid seçeneğine tıklayın.
4. initVariantSelectors kodunu bulun. Hemen sonrasında aşağıdaki kodu göreceksiniz:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

Aşağıdaki kodu, aşağıya yeni bir satıra ekleyin:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Şu şekilde gözükmelidir:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Aşağıdaki kod satırını bulun:

$(selectors.addToCartText).html(theme.strings.soldOut);

Bu kod satırının iki örneği vardır ve ikisi de productVariantCallback işlevinde bulunur. Yalnızca ikinci örneği şununla değiştirin:

$(selectors.addToCartText).html('Make a Selection');

1. Kayıtyap ' a tıklayın.

Not

Bazı Boundless sürümleri bu adımda değiştirilecek kod satırını içermez. Kodu bulamazsanız bir sonraki adıma geçin.

Ürün sayfası şablonunuzu düzenleme

Ürün sayfası şablonunuzu düzenlemek için:

1. Bölümler dizininde product-template.liquid öğesine tıklayın.
2. Aşağıdaki kodu bulun:

{% assign current_variant = product.selected_or_first_available_variant %}

Bunu şununla değiştirin:

{% assign current_variant = product.selected_variant %}

1. Aşağıdaki kodu bulun ve silin:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. {% schema %} kodunu bulun. Aşağıdaki kodu bir üst satıra yapıştırın:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Şu şekilde gözükmelidir:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Kayıtyap ' a tıklayın.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Bir seçim yapılmadan önce ürünlerin "Kullanılamaz" olarak görünmemesi için, Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için unavailable yazmaya başlayın.
4. Kullanılamaz metnini Make a selection olarak değiştirin.
5. Kayıtyap ' a tıklayın.

Debut

Debut için adımlar

Özelleştirmeyi Debut'a uygulamak için şu adımları izleyin:

Temanızın JavaScript dosyasını düzenleme

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. Assets (Öğeler) dizininde theme.js veya theme.js.liquid seçeneğine tıklayın.
4. Aşağıdaki kodu dosyanın en altına ekleyin:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. _updatePrice: function(variant) kodunu bulun. Şu kodun yerine:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
}

Şunu yazın:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
} */

Yukarıdaki kodu bulamazsanız aşağıdaki kodu bulmayı deneyin:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

Bunu şununla değiştirin:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

1. Kodu bulun this.currentVariant = variant;

Aşağıdaki kodu altına ekleyin:

this._updatePaymentButton(variant);

Sonuç şu şekilde gözükmelidir:

this.currentVariant = variant;
this._updatePaymentButton(variant);

1. _updateImages: function(variant) kodunu bulun. Şu kodun yerine:

var currentVariantImage = this.currentVariant.featured_image || {};

Şunu yazın:

if (this.currentVariant != undefined) {
  var currentVariantImage = this.currentVariant.featured_image || {};
}

1. Hemen altında, aşağıdaki kodu bulun:

if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
}

Bunu şununla değiştirin:

/* if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
} */

1. _updateSKU: function(variant) kodunu bulun. Şu kodun yerine:

if (variant.sku === this.currentVariant.sku) {
  return;
}

Şunu yazın:

if (this.currentVariant != undefined ) {
  if (variant.sku === this.currentVariant.sku) {
    return;
  }
}

1. _initVariants: function() { kodunu bulun. Şu kodun yerine:

if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
}

Şunu yazın:

/* if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */

Not

Bu kodun, yalnızca Debut 17.5.0 ve sonraki sürümlerde değiştirilmesi gerekir.

1. Aşağıdaki kodu bulun:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

Yukarıdaki kodun altına, yeni bir satıra aşağıdaki kodu ekleyin:

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

Şu şekilde gözükmelidir:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

1. Kayıtyap ' a tıklayın.

Ürün sayfası şablonunuzu düzenleme

Ürün sayfası şablonunuzu düzenlemek için:

1. Bölümler dizininde product-template.liquid öğesine tıklayın.
2. Aşağıdaki kodu bulun:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Bunu şununla değiştirin:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else %}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif %}

1. Aşağıdaki kodu bulun ve silin:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Yukarıdaki kodu bulamazsanız aşağıdaki kodu bulun ve silin:

{%- if variant == current_variant %} selected="selected" {%- endif -%}

1. Aşağıdaki kodu bulun:

{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}

Bunu şununla değiştirin:

{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

Yukarıdaki kodu bulamazsanız aşağıdaki kodu bulmayı deneyin:

{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

Bunu şununla değiştirin:

{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}

Not

Bazı Debut sürümleri bu adımda değiştirilecek kod satırını içermez. Kodu bulamazsanız bir sonraki adıma geçin.

1. Aşağıdaki kodu bulun:

{% unless current_variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Bunu şununla değiştirin:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% elsif current_variant.available %}
  {{ 'products.product.add_to_cart' | t }}
{% else %}
  {{ 'products.product.sold_out' | t }}
{% endif %}

1. Aşağıdaki kodu bulun:

{% if section.settings.enable_payment_button %}
  {{ form | payment_button }}
{% endif %}

Bunu şununla değiştirin:

<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
  {% if section.settings.enable_payment_button %}
    {{ form | payment_button }}
  {% endif %}
</div>

1. {% schema %} kodunu bulun. Aşağıdaki kodu bir üst satıra yapıştırın:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Şu şekilde gözükmelidir:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Kayıtyap ' a tıklayın.

Ürün fiyatı parçacığınızı düzenleme

Ürün fiyatı parçacığınızı düzenlemek için:

1. Parçacıklar dizininde product-price.liquid seçeneğine tıklayın.
2. Aşağıdaki kodu bulun:

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif

  assign money_price = price | money
-%}

Bunu şununla değiştirin:

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  elsif product.title
    assign compare_at_price = product.compare_at_price
    assign price = product.price
    assign available = product.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif

  assign money_price = price | money
-%}

Not

Bazı Debut sürümleri bu adımda değiştirilecek kod satırını içermez. Kodu bulamazsanız bir sonraki adıma geçin.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Bir seçim yapılmadan önce ürünlerin "Kullanılamaz" olarak görünmemesi için, Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için unavailable yazmaya başlayın.
4. Kullanılamaz metnini Make a selection olarak değiştirin.
5. Kayıtyap ' a tıklayın.

Minimal

Minimal için adımlar

Özelleştirmeyi Minimal'a uygulamak için şu adımları izleyin:

Temanızın JavaScript dosyasını düzenleme

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. Assets (Öğeler) dizininde theme.js veya theme.js.liquid seçeneğine tıklayın.
4. initProductVariant: function() { kodunu bulun. Hemen sonrasında aşağıdaki kodu göreceksiniz:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

Aşağıdaki kodu, aşağıya yeni bir satıra ekleyin:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Şu şekilde gözükmelidir:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Kayıtyap ' a tıklayın.

Ürün sayfası şablonunuzu düzenleme

Ürün sayfası şablonunuzu düzenlemek için:

1. Bölümler dizininde product-template.liquid öğesine tıklayın.
2. Aşağıdaki kodu bulun:

{% assign variant = product.selected_or_first_available_variant %}

Bunu şununla değiştirin:

{% assign variant = product.selected_variant %}

1. Aşağıdaki kodu bulun ve silin:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Şu kodun tüm örneklerini bulun:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Şununla değiştirin:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. {% schema %} kodunu bulun. Aşağıdaki kodu bir üst satıra yapıştırın:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Şu şekilde gözükmelidir:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Kayıtyap ' a tıklayın.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Bir seçim yapılmadan önce ürünlerin "Kullanılamaz" olarak görünmemesi için, Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için unavailable yazmaya başlayın.
4. Kullanılamaz metnini Make a selection olarak değiştirin.
5. Kayıtyap ' a tıklayın.

Narrative

Narrative için adımlar

Özelleştirmeyi Narrative'e uygulamak için şu adımları izleyin:

Temanızın JavaScript dosyasını düzenleme

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. Assets (Öğeler) dizininde custom.js seçeneğine tıklayın.
4. Aşağıdaki kodu dosyanın en altına ekleyin:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Kayıtyap ' a tıklayın.

Ürün sayfası şablonunuzu düzenleme

Ürün sayfası şablonunuzu düzenlemek için:

1. Bölümler dizininde product-template.liquid öğesine tıklayın.
2. Aşağıdaki kodu bulun:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Bunu şununla değiştirin:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else -%}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif -%}

1. {% schema %} kodunu bulun. Aşağıdaki kodu bir üst satıra yapıştırın:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Şu şekilde gözükmelidir:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Kayıtyap ' a tıklayın.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Bir seçim yapılmadan önce ürünlerin "Kullanılamaz" olarak görünmemesi için, Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için unavailable yazmaya başlayın.
4. Kullanılamaz metnini Make a selection olarak değiştirin.
5. Kayıtyap ' a tıklayın.

Simple

Simple için adımlar

Özelleştirmeyi Simple'a uygulamak için şu adımları izleyin:

Temanızın JavaScript dosyasını düzenleme

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. Assets (Öğeler) dizininde theme.js veya theme.js.liquid seçeneğine tıklayın.
4. initProductVariant: function() { kodunu bulun. Hemen sonrasında aşağıdaki kodu göreceksiniz:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

Aşağıdaki kodu, aşağıya yeni bir satıra ekleyin:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Şu şekilde gözükmelidir:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Kayıtyap ' a tıklayın.

Ürün sayfası şablonunuzu düzenleme

Ürün sayfası şablonunuzu düzenlemek için:

1. Bölümler dizininde product-template.liquid öğesine tıklayın.
2. Aşağıdaki kodu bulun:

{% assign current_variant = product.selected_or_first_available_variant %}

Bunu şununla değiştirin:

{% assign current_variant = product.selected_variant %}

1. Aşağıdaki kodu bulun ve silin:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. {% schema %} kodunu bulun. Aşağıdaki kodu bir üst satıra yapıştırın:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Şu şekilde gözükmelidir:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Kayıtyap ' a tıklayın.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Bir seçim yapılmadan önce ürünlerin "Kullanılamaz" olarak görünmemesi için, Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için unavailable yazmaya başlayın.
4. Kullanılamaz metnini Make a selection olarak değiştirin.
5. Kayıtyap ' a tıklayın.

Supply

Supply için adımlar

Özelleştirmeyi Supply'a uygulamak için şu adımları izleyin:

Temanızın JavaScript dosyasını düzenleme

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. Assets (Öğeler) dizininde theme.js veya theme.js.liquid seçeneğine tıklayın.
4. initProductVariant: function() { kodunu bulun. Hemen sonrasında aşağıdaki kodu göreceksiniz:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

Aşağıdaki kodu, aşağıya yeni bir satıra ekleyin:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Şu şekilde gözükmelidir:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Kayıtyap ' a tıklayın.

Ürün sayfası şablonunuzu düzenleme

Ürün sayfası şablonunuzu düzenlemek için:

1. Bölümler dizininde product-template.liquid öğesine tıklayın.
2. Aşağıdaki kodu bulun:

{% assign variant = product.selected_or_first_available_variant %}

Bunu şununla değiştirin:

{% assign variant = product.selected_variant %}

1. Aşağıdaki kodu bulun ve silin:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Şu kodun tüm örneklerini bulun:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Bunu şununla değiştirin:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. {% schema %} kodunu bulun. Aşağıdaki kodu bir üst satıra yapıştırın:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Şu şekilde gözükmelidir:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Kayıtyap ' a tıklayın.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Bir seçim yapılmadan önce ürünlerin "Kullanılamaz" olarak görünmemesi için, Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için unavailable yazmaya başlayın.
4. Kullanılamaz metnini Make a selection olarak değiştirin.
5. Kayıtyap ' a tıklayın.

Venture

Venture için adımlar

Özelleştirmeyi Venture'a uygulamak için şu adımları izleyin:

Temanızın JavaScript dosyasını düzenleme

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. Assets (Öğeler) dizininde theme.js veya theme.js.liquid seçeneğine tıklayın.
4. Aşağıdaki kodu dosyanın en altına ekleyin:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Aşağıdaki kodu bulun:

this.currentVariant = this._getVariantFromOptions();

Bunu şununla değiştirin:

this.currentVariant = this._getVariantFromOptions() || {};

1. _updatePrice: function(variant) kodunu bulun. Şu kodun yerine:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

Şunu yazın:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

1. Kayıtyap ' a tıklayın.

Ürün sayfası şablonunuzu düzenleme

Ürün sayfası şablonunuzu düzenlemek için:

1. Bölümler dizininde product-template.liquid öğesine tıklayın.
2. Aşağıdaki kodu bulun:

{% assign current_variant = product.selected_or_first_available_variant %}

Bunu şununla değiştirin:

{% if product.variants.size > 1 %}
  {% assign current_variant = product.selected_variant %}
{% else %}
  {% assign current_variant = product.first_available_variant %}
{% endif %}

1. Aşağıdaki kodu bulun ve silin:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Yukarıdaki kodu bulamazsanız aşağıdaki kodu bulun ve silin:

{% if variant == current_variant %} selected="selected" {% endif %}

1. Şu kodun tüm örneklerini bulun:

{% unless current_variant.available %}

Bunu şununla değiştirin:

{% unless current_variant.available or product.variants.size == 1 and variant.available %}

1. Aşağıdaki kodu bulun:

{% unless current_variant.available or product.variants.size == 1 and variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Bunu şununla değiştirin:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% else %}
  {% unless current_variant.available or product.variants.size == 1 and variant.available %}
    {{ 'products.product.sold_out' | t }}
  {% else %}
    {{ 'products.product.add_to_cart' | t }}
  {% endunless %}
{% endif %}

1. {% schema %} kodunu bulun. Aşağıdaki kodu bir üst satıra yapıştırın:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Şu şekilde gözükmelidir:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Kayıtyap ' a tıklayın.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Bir seçim yapılmadan önce ürünlerin "Kullanılamaz" olarak görünmemesi için, Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için unavailable yazmaya başlayın.
4. Kullanılamaz metnini Make a selection olarak değiştirin.
5. Kayıtyap ' a tıklayın.

Bölümlere ayrılmamış temalar için adımlar

Varyasyon açılan menülerinize komutlar ekleyin.

Varyasyon açılır menülerine istem eklemek için:

1. Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.
2. Yeni parçacığınızı pick-an-option olarak adlandırın.

1. Yeni parçacık dosyanıza, GitHub'da barındırılan bu kodu yapıştırın.
2. Kayıtyap ' a tıklayın.
3. Düzen dizininde theme.liquid seçeneğine tıklayın.
4. Dosyanın alt taraflarındaki kapatma </body> etiketini bulun. Kapatma </body> etiketinin tam üzerindeki yeni satıra aşağıdaki kodu yapıştırın:

{% render 'pick-an-option' %}

1. Kayıtyap ' a tıklayın.

2. Sepete ekle formunu içeren dosyayı bulun. Bu dosyanın /cart/add olarak ayarlanmış bir action özelliği olacaktır. Bu, şu dört dosyadan birinde olmalıdır:

   • Şablonlar bölümündeki product.liquid şablonu
   • Düzen bölümündeki theme.liquid düzeni
   • Snippets (Parçacıklar) bölümündeki product.liquid parçacığı
   • Snippets (Parçacıklar) bölümündeki single-product.liquid parçacığı

3. Formun içinde şu kodu bulun:

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

veya

<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Bunu şununla değiştirin:

<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

1. Aşağıdaki kodu bulup değiştirin:
   • Minimal, Pop veya Supply: Minimal, Pop veya Supply kullanıyorsanız bu kodun bulunduğu tüm konumları bulun:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Şununla değiştirin:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

• Diğer ücretsiz Shopify temaları: Başka bir Shopify teması kullanıyorsanız şu kodu bulun:

{% assign current_variant = product.selected_or_first_available_variant %}

Bunu şununla değiştirin:

{% assign current_variant = product.selected_variant %}

1. Kayıtyap ' a tıklayın.

Sepete ekle düğmesinin dil ayarlarını değiştirme

Bir seçim yapılmadan önce ürünlerin "Kullanılamaz" olarak görünmemesi için, Sepete ekle düğmesinin dil ayarlarını değiştirebilirsiniz.

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Düzenlemek istediğiniz temayı bulun ve ... > Varsayılan tema içeriğini düzenle'ye tıklayın.
3. Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için unavailable yazmaya başlayın.
4. Kullanılamaz metnini Make a selection olarak değiştirin.
5. Kayıtyap ' a tıklayın.