Müşterilerin bir seçenek seçmesini sağlayın
Müşteri online mağazanızdaki bir ürün sayfasını ziyaret ettiğinde, varsayılan olarak mevcut ilk varyasyon seçilir. İlk kullanılabilir varyasyonu otomatik olarak seçme özelliğini devre dışı bırakmak için bu özelleştirmeyi kullanabilirsiniz. Bu şekilde, 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. Varyasyonlu ü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.
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 için adımlar
Özelleştirmeyi Boundless'a uygulamak için şu adımları izleyin:
Temanızın JavaScript dosyasını düzenleme
Temanızın JavaScript dosyasını düzenlemek için:
Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Assets (Öğeler) dizininde
theme.js
veyatheme.js.liquid
seçeneğine tıklayın.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);
Add the following code on a new line below:
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;
}
}
}
It should look something like this:
// 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;
}
}
}
- Aşağıdaki kod satırını bulun:
$(selectors.addToCartText).html(theme.strings.soldOut);
There are *two instances* of this line of code, both found within the `productVariantCallback` function. Replace only the *second* instance with:
$(selectors.addToCartText).html('Make a Selection');
> Note:
> Some versions of Boundless do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.
- Kayıtyap ' a tıklayın.
Ürün sayfası şablonunuzu düzenleme
Ürün sayfası şablonunuzu düzenlemek için:
Bölümler dizininde
product-template.liquid
öğesine tıklayın.Aşağıdaki kodu bulun:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
- Aşağıdaki kodu bulun ve silin:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
{% 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 %}
It should look something like this:
{% 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 %}
- 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.
- Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun ve İşlemler > Varsayılan tema içeriğini düzenle'ye tıklayın.
Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için
unavailable
yazmaya başlayın.Kullanılamaz metnini
Make a selection
olarak değiştirin.Kayıtyap ' a tıklayın.
Debut için adımlar
Özelleştirmeyi Debut'a uygulamak için şu adımları izleyin:
Temanızın JavaScript dosyasını düzenleme
Temanızın JavaScript dosyasını düzenlemek için:
Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Assets (Öğeler) dizininde
theme.js
veyatheme.js.liquid
seçeneğine tıklayın.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;
}
}
}
})();
-
_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;
}
with:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
} */
If you can't find the above code, then find the following code:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
Replace it with:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
- Kodu bulun
this.currentVariant = variant;
this._updatePaymentButton(variant);
The result should look something like this:
this.currentVariant = variant;
this._updatePaymentButton(variant);
-
_updateImages: function(variant)
kodunu bulun. Şu kodun yerine:
var currentVariantImage = this.currentVariant.featured_image || {};
with:
if (this.currentVariant != undefined) {
var currentVariantImage = this.currentVariant.featured_image || {};
}
- Hemen altında, aşağıdaki kodu bulun:
if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
}
Replace it with:
/* if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
} */
-
_updateSKU: function(variant)
kodunu bulun. Şu kodun yerine:
if (variant.sku === this.currentVariant.sku) {
return;
}
with:
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}
-
_initVariants: function() {
kodunu bulun. Şu kodun yerine:
if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
}
with:
/* if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */
> Note:
> This code only needs to be replaced in Debut version 17.5.0 and above.
- 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
})
);
},
Add the following code, on a new line, below the above code:
_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');
}
},
It should look something like this:
_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');
}
},
- Kayıtyap ' a tıklayın.
Ürün sayfası şablonunuzu düzenleme
Ürün sayfası şablonunuzu düzenlemek için:
Bölümler dizininde
product-template.liquid
öğesine tıklayın.Aşağıdaki kodu bulun:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Replace it with:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else %}
{%- assign current_variant = product.first_available_variant -%}
{%- endif %}
- Aşağıdaki kodu bulun ve silin:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
If you can't find the code above, then find this code and delete it:
{%- if variant == current_variant %} selected="selected" {%- endif -%}
- Aşağıdaki kodu bulun:
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
Replace it with:
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
If you can't find the code above, then find this code:
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
Replace it with:
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
> Note:
> Some versions of Debut do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.
- Aşağıdaki kodu bulun:
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
Replace it with:
{% 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 %}
- Aşağıdaki kodu bulun:
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
Replace it with:
<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
-
{% 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 %}
It should look something like this:
{% 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 %}
- 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:
Parçacıklar dizininde
product-price.liquid
seçeneğine tıklayın.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
-%}
Replace it with:
{%- 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
-%}
> Note:
> Some versions of Debut do not include the code to be replaced in this step. If you can't find the code, then skip to the next step.
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.
- Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun ve İşlemler > Varsayılan tema içeriğini düzenle'ye tıklayın.
Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için
unavailable
yazmaya başlayın.Kullanılamaz metnini
Make a selection
olarak değiştirin.Kayıtyap ' a tıklayın.
Minimal için adımlar
Özelleştirmeyi Minimal'a uygulamak için şu adımları izleyin:
Temanızın JavaScript dosyasını düzenleme
Temanızın JavaScript dosyasını düzenlemek için:
Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Assets (Öğeler) dizininde
theme.js
veyatheme.js.liquid
seçeneğine tıklayın.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();
}
Add the following code on a new line below:
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;
}
}
}
It should look something like this:
// 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;
}
}
}
- Kayıtyap ' a tıklayın.
Ürün sayfası şablonunuzu düzenleme:
Ürün sayfası şablonunuzu düzenlemek için:
Bölümler dizininde
product-template.liquid
öğesine tıklayın.Aşağıdaki kodu bulun:
{% assign variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign variant = product.selected_variant %}
- Aşağıdaki kodu bulun ve silin:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Şu kodun tüm örneklerini bulun:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Replace with:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
{% 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 %}
It should look something like this:
{% 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 %}
- 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.
- Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun ve İşlemler > Varsayılan tema içeriğini düzenle'ye tıklayın.
Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için
unavailable
yazmaya başlayın.Kullanılamaz metnini
Make a selection
olarak değiştirin.Kayıtyap ' a tıklayın.
Narrative için adımlar
Özelleştirmeyi Narrative'e uygulamak için şu adımları izleyin:
Temanızın JavaScript dosyasını düzenleme
Temanızın JavaScript dosyasını düzenlemek için:
Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Assets (Öğeler) dizininde
custom.js
seçeneğine tıklayın.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;
}
}
}
})();
- Kayıtyap ' a tıklayın.
Ürün sayfası şablonunuzu düzenleme
Ürün sayfası şablonunuzu düzenlemek için:
Bölümler dizininde
product-template.liquid
öğesine tıklayın.Aşağıdaki kodu bulun:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Replace it with:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else -%}
{%- assign current_variant = product.first_available_variant -%}
{%- endif -%}
-
{% 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 %}
It should look something like this:
{% 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 %}
- 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.
- Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun ve İşlemler > Varsayılan tema içeriğini düzenle'ye tıklayın.
Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için
unavailable
yazmaya başlayın.Kullanılamaz metnini
Make a selection
olarak değiştirin.Kayıtyap ' a tıklayın.
Simple için adımlar
Özelleştirmeyi Simple'a uygulamak için şu adımları izleyin:
Temanızın JavaScript dosyasını düzenleme
Temanızın JavaScript dosyasını düzenlemek için:
Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Assets (Öğeler) dizininde
theme.js
veyatheme.js.liquid
seçeneğine tıklayın.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);
Add the following code on a new line below:
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;
}
}
}
It should look something like this:
// 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;
}
}
}
- Kayıtyap ' a tıklayın.
Ürün sayfası şablonunuzu düzenleme
Ürün sayfası şablonunuzu düzenlemek için:
Bölümler dizininde
product-template.liquid
öğesine tıklayın.Aşağıdaki kodu bulun:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
- Aşağıdaki kodu bulun ve silin:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
{% 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 %}
It should look something like this:
{% 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 %}
- 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.
- Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun ve İşlemler > Varsayılan tema içeriğini düzenle'ye tıklayın.
Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için
unavailable
yazmaya başlayın.Kullanılamaz metnini
Make a selection
olarak değiştirin.Kayıtyap ' a tıklayın.
Supply için adımlar
Özelleştirmeyi Supply'a uygulamak için şu adımları izleyin:
Temanızın JavaScript dosyasını düzenleme
Temanızın JavaScript dosyasını düzenlemek için:
Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Assets (Öğeler) dizininde
theme.js
veyatheme.js.liquid
seçeneğine tıklayın.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);
Add the following code on a new line below:
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;
}
}
}
It should look something like this:
// 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;
}
}
}
- Kayıtyap ' a tıklayın.
Ürün sayfası şablonunuzu düzenleme
Ürün sayfası şablonunuzu düzenlemek için:
Bölümler dizininde
product-template.liquid
öğesine tıklayın.Aşağıdaki kodu bulun:
{% assign variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign variant = product.selected_variant %}
- Aşağıdaki kodu bulun ve silin:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Şu kodun tüm örneklerini bulun:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Replace it with:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
{% 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 %}
It should look something like this:
{% 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 %}
- 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.
- Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun ve İşlemler > Varsayılan tema içeriğini düzenle'ye tıklayın.
Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için
unavailable
yazmaya başlayın.Kullanılamaz metnini
Make a selection
olarak değiştirin.Kayıtyap ' a tıklayın.
Venture için adımlar
Özelleştirmeyi Venture'a uygulamak için şu adımları izleyin:
Temanızın JavaScript dosyasını düzenleme
Temanızın JavaScript dosyasını düzenlemek için:
Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.
Assets (Öğeler) dizininde
theme.js
veyatheme.js.liquid
seçeneğine tıklayın.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;
}
}
}
})();
- Aşağıdaki kodu bulun:
this.currentVariant = this._getVariantFromOptions();
Replace it with:
this.currentVariant = this._getVariantFromOptions() || {};
-
_updatePrice: function(variant)
kodunu bulun. Şu kodun yerine:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
with:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
- Kayıtyap ' a tıklayın.
Ürün sayfası şablonunuzu düzenleme
Ürün sayfası şablonunuzu düzenlemek için:
Bölümler dizininde
product-template.liquid
öğesine tıklayın.Aşağıdaki kodu bulun:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% if product.variants.size > 1 %}
{% assign current_variant = product.selected_variant %}
{% else %}
{% assign current_variant = product.first_available_variant %}
{% endif %}
- Aşağıdaki kodu bulun ve silin:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
If you can't find the code above, then find this code and delete it:
{% if variant == current_variant %} selected="selected" {% endif %}
- Şu kodun tüm örneklerini bulun:
{% unless current_variant.available %}
Replace it with:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
- 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 %}
Replace it with:
{% 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 %}
-
{% 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 %}
It should look something like this:
{% 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 %}
- 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.
- Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun ve İşlemler > Varsayılan tema içeriğini düzenle'ye tıklayın.
Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için
unavailable
yazmaya başlayın.Kullanılamaz metnini
Make a selection
olarak değiştirin.Kayıtyap ' a tıklayın.
Varyasyon açılan menülerinize komutlar ekleyin.
Varyasyon açılır menülerine istem eklemek için:
Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.
Yeni parçacığınızı
pick-an-option
olarak adlandırın.Yeni parçacık dosyanıza, GitHub'da barındırılan bu kodu yapıştırın.
Kayıtyap ' a tıklayın.
Düzen dizininde
theme.liquid
seçeneğine tıklayın.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' %}

Kayıtyap ' a tıklayın.
Sepete ekle formunu içeren dosyayı bulun. Bu dosyanın
/cart/add
olarak ayarlanmış biraction
özelliği olacaktır.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>
or
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
Replace it with:
<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>
- Aşağıdaki kodu bulup değiştirin:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Replace with:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
### Other free Shopify themesIf you use any other Shopify theme, then find this code:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
- 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.
- Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
- Shopify uygulamasından Mağaza'ya dokunun.
- Satış kanalları bölümünde Online Mağaza'ya dokunun.
- Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun ve İşlemler > Varsayılan tema içeriğini düzenle'ye tıklayın.
Filter (Filtrele) kutusunda "Kullanılamaz" çevirisini görmek için
unavailable
yazmaya başlayın.Kullanılamaz metnini
Make a selection
olarak değiştirin.Kayıtyap ' a tıklayın.