ให้ลูกค้าเลือกตัวเลือก
เมื่อลูกค้าเข้าชมหน้าสินค้าในร้านค้าออนไลน์ของคุณ ตัวเลือกสินค้าแรกที่มีอยู่จะถูกเลือกไว้ตามค่าเริ่มต้น คุณสามารถใช้การปรับแต่งนี้เพื่อปิดใช้การเลือกตัวเลือกสินค้าแรกที่มีอยู่โดยอัตโนมัติได้ ด้วยวิธีนี้ ลูกค้าจะได้รับแจ้งให้เลือกตัวเลือกสินค้าด้วยตนเองก่อนที่จะแสดงตัวเลือกสินค้า ) 
หมายเหตุ: เนื่องจากการปรับแต่งนี้ป้องกันไม่ให้ระบบเลือกตัวเลือกสินค้าตามค่าเริ่มต้น ธีมของคุณอาจไม่แสดงราคาสินค้าจนกว่าลูกค้าจะเลือกตัวเลือกสินค้า นี่คือพฤติกรรมที่คาดหวังไว้เนื่องจากสินค้าที่มีตัวเลือกสินค้านั้นไม่มีราคาที่แนะนำไว้ ดังนั้นราคาที่แสดงจะกําหนดโดยตัวเลือกสินค้าที่เลือก
ธีมที่แบ่งส่วนและธีมที่ไม่แบ่งส่วน
หมายเหตุ: ขั้นตอนสำหรับบทแนะนำการใช้งานนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณกำลังใช้ธีมที่แบ่งส่วน หรือไม่แบ่งส่วน อยู่ โดยธีมที่แบ่งส่วนจะให้คุณสามารถลากและวางวัตถุเพื่อจัดการเลย์เอาต์ของหน้าแรกได้ ในขณะที่ธีมที่ไม่แบ่งส่วนนั้นไม่สามารถทำได้
หากต้องการทราบว่าธีมของคุณรองรับส่วนหรือไม่ ให้ไปที่หน้าแก้ไขโค้ดของธีม หากมีไฟล์ในไดเรกทอรีส่วน หมายความว่าคุณกำลังใช้ธีมที่แบ่งส่วน ธีมที่ไม่แบ่งส่วนเปิดตัวก่อนเดือนตุลาคม 2016 และไม่มีไฟล์ในไดเรกทอรีส่วน
หากคุณใช้ธีมที่แบ่งส่วน ให้คลิกปุ่ม ธีมที่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ หากคุณใช้ธีมที่ไม่แบ่งส่วนซึ่งเป็นรุ่นเก่า ให้คลิกปุ่ม ธีมที่ไม่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ
เลือกธีมของคุณ
ขั้นตอนสำหรับการปรับแต่งนี้จะแตกต่างกันไปขึ้นอยู่กับธีมของคุณ คลิกปุ่มสำหรับธีมของคุณก่อนทำตามคำแนะนำด้านล่าง:
ขั้นตอนสำหรับ Boundless
ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการปรับแต่งกับ Boundless:
แก้ไขไฟล์ JavaScript ของธีม
หากต้องการแก้ไขไฟล์ JavaScript ของธีม:
ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquidค้นหาโค้ด
initVariantSelectorsและค้นหาโค้ดต่อไปนี้ด้านล่างโค้ดดังกล่าว:
// 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;
}
}
}- ค้นหาข้อความโค้ดต่อไปนี้:
$(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.- คลิกที่ “บันทึก”
แก้ไขเทมเพลตหน้าสินค้าของคุณ
วิธีแก้ไขเทมเพลตหน้าสินค้าของคุณ:
ในไดเรกทอรีส่วน ให้คลิก
product-template.liquidค้นหาโค้ดต่อไปนี้:
{% assign current_variant = product.selected_or_first_available_variant %}Replace it with:{% assign current_variant = product.selected_variant %}- ค้นหาโค้ดต่อไปนี้และลบโค้ดดังกล่าว:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}-
ค้นหาโค้ด
{% schema %}วางโค้ดข้างต้นลงในบรรทัดเหนือบรรทัดของโค้ดนี้:
{% 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 %}
- คลิกที่ “บันทึก”
เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า
คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก
- ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกการดำเนินการ > แก้ไขเนื้อหาธีมเริ่มต้น
ในกล่องฟิลเตอร์ ให้พิมพ์
unavailableเพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย
Make a selectionคลิกที่ “บันทึก”
ขั้นตอนสำหรับ Debut
ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการปรับแต่งกับ Debut:
แก้ไขไฟล์ JavaScript ของธีม
หากต้องการแก้ไขไฟล์ JavaScript ของธีม:
ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquidเพิ่มโค้ดต่อไปนี้ที่ด้านล่างของไฟล์:
(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)แทนที่โค้ดต่อไปนี้:
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;
} */-
ค้นหาโค้ด
this.currentVariant = variant;
this._updatePaymentButton(variant);The result should look something like this:this.currentVariant = variant;
this._updatePaymentButton(variant);-
ค้นหาโค้ด
_updateImages: function(variant)แทนที่โค้ดต่อไปนี้:
var currentVariantImage = this.currentVariant.featured_image || {};with:if (this.currentVariant != undefined) {
var currentVariantImage = this.currentVariant.featured_image || {};
}- ค้นหาโค้ดต่อไปนี้ด้านล่าง:
if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
}Replace it with:/* if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
} */-
ค้นหาโค้ด
_updateSKU: function(variant)แทนที่โค้ดต่อไปนี้:
if (variant.sku === this.currentVariant.sku) {
return;
}with:if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}-
ค้นหาโค้ด
_initVariants: function() {แทนที่โค้ดต่อไปนี้:
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.- ค้นหาโค้ดต่อไปนี้:
_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');
}
},- คลิกที่ “บันทึก”
แก้ไขเทมเพลตหน้าสินค้าของคุณ
วิธีแก้ไขเทมเพลตหน้าสินค้าของคุณ:
ในไดเรกทอรีส่วน ให้คลิก
product-template.liquidค้นหาโค้ดต่อไปนี้:
{%- 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 %}- ค้นหาโค้ดต่อไปนี้และลบโค้ดดังกล่าว:
{% 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 -%}- ค้นหาโค้ดต่อไปนี้:
{%- 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.- ค้นหาโค้ดต่อไปนี้:
{% 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 %}- ค้นหาโค้ดต่อไปนี้:
{% 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 %}วางโค้ดข้างต้นลงในบรรทัดเหนือบรรทัดของโค้ดนี้:
{% 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 %}
- คลิกที่ “บันทึก”
แก้ไขส่วนย่อยราคาสินค้าของคุณ
หากต้องการแก้ไขส่วนย่อยราคาสินค้า:
ในไดเรกทอรี ส่วนย่อย ให้คลิกที่
product-price.liquidค้นหาโค้ดต่อไปนี้:
{%- 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.เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า
คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก
- ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกการดำเนินการ > แก้ไขเนื้อหาธีมเริ่มต้น
ในกล่องฟิลเตอร์ ให้พิมพ์
unavailableเพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย
Make a selectionคลิกที่ “บันทึก”
ขั้นตอนสำหรับ Minimal
ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการปรับแต่งกับ Minimal:
แก้ไขไฟล์ JavaScript ของธีม
หากต้องการแก้ไขไฟล์ JavaScript ของธีม:
ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquidค้นหาโค้ด
initProductVariant: function() {และค้นหาโค้ดต่อไปนี้ด้านล่างโค้ดดังกล่าว:
// 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;
}
}
}- คลิกที่ “บันทึก”
แก้ไขเทมเพลตหน้าสินค้าของคุณ:
วิธีแก้ไขเทมเพลตหน้าสินค้าของคุณ:
ในไดเรกทอรีส่วน ให้คลิก
product-template.liquidค้นหาโค้ดต่อไปนี้:
{% assign variant = product.selected_or_first_available_variant %}Replace it with:{% assign variant = product.selected_variant %}- ค้นหาโค้ดต่อไปนี้และลบโค้ดดังกล่าว:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}- ค้นหาโค้ดนี้ทั้งหมด:
{% 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 %}วางโค้ดข้างต้นลงในบรรทัดเหนือบรรทัดของโค้ดนี้:
{% 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 %}
- คลิกที่ “บันทึก”
เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า
คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก
- ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกการดำเนินการ > แก้ไขเนื้อหาธีมเริ่มต้น
ในกล่องฟิลเตอร์ ให้พิมพ์
unavailableเพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย
Make a selectionคลิกที่ “บันทึก”
ขั้นตอนสำหรับ Narrative
ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการปรับแต่งกับ Narrative:
แก้ไขไฟล์ JavaScript ของธีม
หากต้องการแก้ไขไฟล์ JavaScript ของธีม:
ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
ในไดเรกทอรีชิ้นงาน ให้คลิก
custom.jsเพิ่มโค้ดต่อไปนี้ที่ด้านล่างของไฟล์:
(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;
}
}
}
})();- คลิกที่ “บันทึก”
แก้ไขเทมเพลตหน้าสินค้าของคุณ
วิธีแก้ไขเทมเพลตหน้าสินค้าของคุณ:
ในไดเรกทอรีส่วน ให้คลิก
product-template.liquidค้นหาโค้ดต่อไปนี้:
{%- 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 %}วางโค้ดข้างต้นลงในบรรทัดเหนือบรรทัดของโค้ดนี้:
{% 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 %}
- คลิกที่ “บันทึก”
เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า
คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก
- ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกการดำเนินการ > แก้ไขเนื้อหาธีมเริ่มต้น
ในกล่องฟิลเตอร์ ให้พิมพ์
unavailableเพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย
Make a selectionคลิกที่ “บันทึก”
ขั้นตอนสำหรับ Simple
ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการปรับแต่งกับธีม Simple:
แก้ไขไฟล์ JavaScript ของธีม
หากต้องการแก้ไขไฟล์ JavaScript ของธีม:
ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquidค้นหาโค้ด
initProductVariant: function() {และค้นหาโค้ดต่อไปนี้ด้านล่างโค้ดดังกล่าว:
// 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;
}
}
}- คลิกที่ “บันทึก”
แก้ไขเทมเพลตหน้าสินค้าของคุณ
วิธีแก้ไขเทมเพลตหน้าสินค้าของคุณ:
ในไดเรกทอรีส่วน ให้คลิก
product-template.liquidค้นหาโค้ดต่อไปนี้:
{% assign current_variant = product.selected_or_first_available_variant %}Replace it with:{% assign current_variant = product.selected_variant %}- ค้นหาโค้ดต่อไปนี้และลบโค้ดดังกล่าว:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}-
ค้นหาโค้ด
{% schema %}วางโค้ดข้างต้นลงในบรรทัดเหนือบรรทัดของโค้ดนี้:
{% 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 %}
- คลิกที่ “บันทึก”
เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า
คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก
- ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกการดำเนินการ > แก้ไขเนื้อหาธีมเริ่มต้น
ในกล่องฟิลเตอร์ ให้พิมพ์
unavailableเพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย
Make a selectionคลิกที่ “บันทึก”
ขั้นตอนสำหรับ Supply
ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการปรับแต่งกับ Supply:
แก้ไขไฟล์ JavaScript ของธีม
หากต้องการแก้ไขไฟล์ JavaScript ของธีม:
ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquidค้นหาโค้ด
initProductVariant: function() {และค้นหาโค้ดต่อไปนี้ด้านล่างโค้ดดังกล่าว:
// 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;
}
}
}- คลิกที่ “บันทึก”
แก้ไขเทมเพลตหน้าสินค้าของคุณ
วิธีแก้ไขเทมเพลตหน้าสินค้าของคุณ:
ในไดเรกทอรีส่วน ให้คลิก
product-template.liquidค้นหาโค้ดต่อไปนี้:
{% assign variant = product.selected_or_first_available_variant %}Replace it with:{% assign variant = product.selected_variant %}- ค้นหาโค้ดต่อไปนี้และลบโค้ดดังกล่าว:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}- ค้นหาโค้ดนี้ทั้งหมด:
{% 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 %}วางโค้ดข้างต้นลงในบรรทัดเหนือบรรทัดของโค้ดนี้:
{% 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 %}
- คลิกที่ “บันทึก”
เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า
คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก
- ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกการดำเนินการ > แก้ไขเนื้อหาธีมเริ่มต้น
ในกล่องฟิลเตอร์ ให้พิมพ์
unavailableเพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย
Make a selectionคลิกที่ “บันทึก”
ขั้นตอนสำหรับธีม Venture
ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการปรับแต่งกับธีม Venture:
แก้ไขไฟล์ JavaScript ของธีม
หากต้องการแก้ไขไฟล์ JavaScript ของธีม:
ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
ในไดเรกทอรีชิ้นงาน ให้คลิก
theme.jsหรือtheme.js.liquidเพิ่มโค้ดต่อไปนี้ที่ด้านล่างของไฟล์:
(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;
}
}
}
})();- ค้นหาโค้ดต่อไปนี้:
this.currentVariant = this._getVariantFromOptions();Replace it with:this.currentVariant = this._getVariantFromOptions() || {};-
ค้นหาโค้ด
_updatePrice: function(variant)แทนที่โค้ดต่อไปนี้:
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;
} */- คลิกที่ “บันทึก”
แก้ไขเทมเพลตหน้าสินค้าของคุณ
วิธีแก้ไขเทมเพลตหน้าสินค้าของคุณ:
ในไดเรกทอรีส่วน ให้คลิก
product-template.liquidค้นหาโค้ดต่อไปนี้:
{% 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 %}- ค้นหาโค้ดต่อไปนี้และลบโค้ดดังกล่าว:
{% 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 %}- ค้นหาโค้ดนี้ทั้งหมด:
{% unless current_variant.available %}Replace it with:{% unless current_variant.available or product.variants.size == 1 and variant.available %}- ค้นหาโค้ดต่อไปนี้:
{% 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 %}วางโค้ดข้างต้นลงในบรรทัดเหนือบรรทัดของโค้ดนี้:
{% 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 %}
- คลิกที่ “บันทึก”
เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า
คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก
- ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกการดำเนินการ > แก้ไขเนื้อหาธีมเริ่มต้น
ในกล่องฟิลเตอร์ ให้พิมพ์
unavailableเพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย
Make a selectionคลิกที่ “บันทึก”
เพิ่มการแจ้งเตือนไปยังเมนูดรอปดาวน์ของตัวเลือกสินค้า
วิธีเพิ่มการแจ้งเตือนไปยังเมนูดรอปดาวน์ตัวเลือกสินค้าของคุณ:
ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่
ตั้งชื่อส่วนย่อย
pick-an-optionใหม่ของคุณในไฟล์ส่วนย่อยใหม่ของคุณ ให้วางโค้ดนี้ที่โฮสต์โดย GitHub
คลิกที่ “บันทึก”
ในไดเรกทอรีเลย์เอาต์ ให้คลิก
theme.liquidค้นหาแท็กปิด
</body>ใกล้กับด้านล่างของไฟล์ ในบรรทัดใหม่ด้านบนแท็กปิด</body>ให้วางโค้ดต่อไปนี้:
{% render 'pick-an-option' %}
คลิกที่ “บันทึก”
ค้นหาไฟล์ที่มีแบบฟอร์มเพิ่มลงในตะกร้าสินค้า ซึ่งจะมีการระบุที่มา
actionที่ตั้งไว้เป็น/cart/addค้นหาโค้ดนี้ภายในแบบฟอร์ม:
<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>- ค้นหาและแทนที่โค้ดต่อไปนี้:
{% 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 %}- คลิกที่ “บันทึก”
เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า
คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก
- ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
- จากแอป Shopify ให้แตะ ร้านค้า
- ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกการดำเนินการ > แก้ไขเนื้อหาธีมเริ่มต้น
ในกล่องฟิลเตอร์ ให้พิมพ์
unavailableเพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย
Make a selectionคลิกที่ “บันทึก”