ให้ลูกค้าเลือกตัวเลือก

ข้อควรระวัง

ธีมวินเทจไม่พร้อมใช้งานในร้านค้าธีม ธีมเหล่านี้ไม่มีฟีเจอร์ในธีม Online Store 2.0 ของ Shopify และธีมวินเทจฟรีของ Shopify จะไม่ได้รับการอัปเดตนอกเหนือไปจากการแก้ไขความปลอดภัย

หมายเหตุ

หากคุณใช้ ธีมฟรีจาก Shopify คุณอาจสามารถติดต่อฝ่ายช่วยเหลือของ Shopify เพื่อขอความช่วยเหลือเกี่ยวกับบทแนะนำการใช้งานนี้ได้ ซึ่งระยะเวลาออกแบบจะอยู่ที่ 15 นาที หากต้องการดูข้อมูลเพิ่มเติม โปรดดูที่ ฝ่ายช่วยเหลือเกี่ยวกับธีม

หมายเหตุ

การปรับแต่งนี้เฉพาะกับธีมเก่าของ Shopify และไม่สามารถใช้ได้กับธีม Online Store 2.0

• ค้นหาธีมของคุณในเวอร์ชันสถาปัตยกรรม
• สำรวจการปรับแต่งธีม Online Store 2.0

เมื่อลูกค้าเข้าชมหน้าสินค้าในร้านค้าออนไลน์ของคุณ ระบบจะเลือกตัวเลือกสินค้าแรกที่มีอยู่ไว้ตามค่าเริ่มต้น คุณสามารถใช้การปรับแต่งนี้เพื่อปิดใช้การเลือกตัวเลือกสินค้าแรกที่มีอยู่โดยอัตโนมัติได้ ด้วยวิธีนี้ ลูกค้าจะได้รับแจ้งให้เลือกตัวเลือกสินค้าด้วยตนเองก่อนที่จะแสดงตัวเลือกสินค้า

หมายเหตุ

เนื่องจากการปรับแต่งนี้ป้องกันไม่ให้ระบบเลือกตัวเลือกสินค้าตามค่าเริ่มต้น ธีมของคุณอาจไม่แสดงราคาสินค้าจนกว่าลูกค้าจะเลือกตัวเลือกสินค้า ซึ่งเป็นพฤติกรรมที่คาดหวังไว้เนื่องจากสินค้าที่มีตัวเลือกสินค้านั้นไม่มีราคาที่แนะนำไว้ ดังนั้นราคาที่แสดงจะกําหนดโดยตัวเลือกสินค้าที่เลือก

ธีมที่แบ่งส่วนและธีมที่ไม่แบ่งส่วน

หมายเหตุ: ขั้นตอนสำหรับบทแนะนำการใช้งานนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณกำลังใช้ธีมที่แบ่งส่วน หรือไม่แบ่งส่วน อยู่ โดยธีมที่แบ่งส่วนจะให้คุณสามารถลากและวางวัตถุเพื่อจัดการเลย์เอาต์ของหน้าแรกได้ ในขณะที่ธีมที่ไม่แบ่งส่วนนั้นไม่สามารถทำได้

หากต้องการทราบว่าธีมของคุณรองรับส่วนหรือไม่ ให้ไปที่หน้าแก้ไขโค้ดของธีม หากมีไฟล์ในไดเรกทอรีส่วน หมายความว่าคุณกำลังใช้ธีมที่แบ่งส่วน ธีมที่ไม่แบ่งส่วนเปิดตัวก่อนเดือนตุลาคม 2016 และไม่มีไฟล์ในไดเรกทอรีส่วน

หากคุณใช้ธีมที่แบ่งส่วน ให้คลิกปุ่ม ธีมที่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ หากคุณใช้ธีมที่ไม่แบ่งส่วนซึ่งเป็นรุ่นเก่า ให้คลิกปุ่ม ธีมที่ไม่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ

ขั้นตอนต่างๆ สำหรับธีมที่แบ่งส่วน

เลือกธีมของคุณ

ขั้นตอนสำหรับการปรับแต่งนี้จะแตกต่างกันไปขึ้นอยู่กับธีมของคุณ คลิกปุ่มสำหรับธีมของคุณก่อนทำตามคำแนะนำด้านล่าง:

Boundless

ขั้นตอนสำหรับ Boundless

ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการปรับแต่งกับ Boundless:

แก้ไขไฟล์ JavaScript ของธีม

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid
4. ค้นหาโค้ด initVariantSelectors และค้นหาโค้ดต่อไปนี้ด้านล่างโค้ดดังกล่าว:

// 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;
    }
  }
}

โค้ดควรมีลักษณะดังนี้:

// 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. ค้นหาข้อความโค้ดต่อไปนี้:

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

มีสองอินสแตนซ์ในข้อความโค้ดนี้ ซึ่งพบในฟังก์ชัน productVariantCallback ให้แทนที่เฉพาะอินสแตนซ์ที่สองด้วย:

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

1. คลิกที่ “บันทึก”

หมายเหตุ

Boundless บางรุ่นไม่มีข้อความโค้ดที่จะแทนที่ในขั้นตอนนี้หากคุณไม่พบโค้ดดังกล่าว ให้ข้ามไปขั้นตอนถัดไป

แก้ไขเทมเพลตหน้าสินค้าของคุณ

วิธีแก้ไขเทมเพลตหน้าสินค้าของคุณ:

1. ในไดเรกทอรีส่วน ให้คลิก product-template.liquid
2. ค้นหาโค้ดต่อไปนี้:

{% assign current_variant = product.selected_or_first_available_variant %}

แทนที่ด้วย:

{% assign current_variant = product.selected_variant %}

1. ค้นหาโค้ดต่อไปนี้และลบโค้ดดังกล่าว:

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

1. ค้นหาโค้ด {% 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 %}

โค้ดควรมีลักษณะดังนี้:

{% 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. คลิกที่ “บันทึก”

เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า

คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก ... > แก้ไขเนื้อหาธีมเริ่มต้น
3. ในกล่องฟิลเตอร์ ให้พิมพ์ unavailable เพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”
4. แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย Make a selection
5. คลิกที่ “บันทึก”

Debut

ขั้นตอนสำหรับ Debut

ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการปรับแต่งกับ Debut:

แก้ไขไฟล์ JavaScript ของธีม

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid
4. เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของไฟล์:

(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) แทนที่โค้ดต่อไปนี้:

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

ด้วย:

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

หากคุณไม่พบโค้ดข้างต้น ให้ค้นหาโค้ดต่อไปนี้:

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

แทนที่ด้วย:

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

1. ค้นหาโค้ด this.currentVariant = variant;

เพิ่มโค้ดต่อไปนี้ด้านล่าง:

this._updatePaymentButton(variant);

ผลลัพธ์ควรมีลักษณะดังนี้:

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

1. ค้นหาโค้ด _updateImages: function(variant) แทนที่โค้ดต่อไปนี้:

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

ด้วย:

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

1. ค้นหาโค้ดต่อไปนี้ด้านล่าง:

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

แทนที่ด้วย:

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

1. ค้นหาโค้ด _updateSKU: function(variant) แทนที่โค้ดต่อไปนี้:

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

ด้วย:

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

1. ค้นหาโค้ด _initVariants: function() { แทนที่โค้ดต่อไปนี้:

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

ด้วย:

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

หมายเหตุ

จำเป็นต้องแทนที่โค้ดนี้เฉพาะในธีม Debut เวอร์ชัน 17.5.0ขึ้นไปเท่านั้น

1. ค้นหาโค้ดต่อไปนี้:

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

โค้ดควรมีลักษณะดังนี้:

_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. คลิกที่ “บันทึก”

แก้ไขเทมเพลตหน้าสินค้าของคุณ

วิธีแก้ไขเทมเพลตหน้าสินค้าของคุณ:

1. ในไดเรกทอรีส่วน ให้คลิก product-template.liquid
2. ค้นหาโค้ดต่อไปนี้:

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

แทนที่ด้วย:

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

1. ค้นหาโค้ดต่อไปนี้และลบโค้ดดังกล่าว:

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

หากคุณไม่พบโค้ดข้างต้น ให้ค้นหาโค้ดต่อไปนี้และลบโค้ดดังกล่าว

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

1. ค้นหาโค้ดต่อไปนี้:

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

แทนที่ด้วย:

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

หากคุณไม่พบโค้ดข้างต้น ให้ค้นหาโค้ดต่อไปนี้

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

แทนที่ด้วย:

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

หมายเหตุ

Debut บางรุ่นไม่มีข้อความโค้ดที่จะแทนที่ในขั้นตอนนี้ หากคุณไม่พบโค้ดดังกล่าว ให้ข้ามไปขั้นตอนถัดไป

1. ค้นหาโค้ดต่อไปนี้:

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

แทนที่ด้วย:

{% 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. ค้นหาโค้ดต่อไปนี้:

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

แทนที่ด้วย:

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

1. ค้นหาโค้ด {% 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 %}

โค้ดควรมีลักษณะดังนี้:

{% 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. คลิกที่ “บันทึก”

แก้ไขส่วนย่อยราคาสินค้าของคุณ

หากต้องการแก้ไขส่วนย่อยราคาสินค้า:

1. ในไดเรกทอรี ส่วนย่อย ให้คลิกที่ product-price.liquid
2. ค้นหาโค้ดต่อไปนี้:

{%- 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
-%}

แทนที่ด้วย:

{%- 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
-%}

หมายเหตุ

Debut บางรุ่นไม่มีโค้ดที่จะแทนที่ในขั้นตอนนี้ หากคุณไม่พบโค้ดดังกล่าว ให้ข้ามไปขั้นตอนถัดไป

เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า

คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก ... > แก้ไขเนื้อหาธีมเริ่มต้น
3. ในกล่องฟิลเตอร์ ให้พิมพ์ unavailable เพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”
4. แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย Make a selection
5. คลิกที่ “บันทึก”

Minimal

ขั้นตอนสำหรับ Minimal

ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการปรับแต่งกับ Minimal:

แก้ไขไฟล์ JavaScript ของธีม

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid
4. ค้นหาโค้ด 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();
}

เพิ่มโค้ดต่อไปนี้ในบรรทัดใหม่ด้านล่าง:

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

โค้ดควรมีลักษณะดังนี้:

// 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. คลิกที่ “บันทึก”

แก้ไขเทมเพลตหน้าสินค้าของคุณ

วิธีแก้ไขเทมเพลตหน้าสินค้าของคุณ:

1. ในไดเรกทอรีส่วน ให้คลิก product-template.liquid
2. ค้นหาโค้ดต่อไปนี้:

{% assign variant = product.selected_or_first_available_variant %}

แทนที่ด้วย:

{% assign variant = product.selected_variant %}

1. ค้นหาโค้ดต่อไปนี้และลบโค้ดดังกล่าว:

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

1. ค้นหาโค้ดนี้ทั้งหมด:

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

แทนที่ด้วย:

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

1. ค้นหาโค้ด {% 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 %}

โค้ดควรมีลักษณะดังนี้:

{% 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. คลิกที่ “บันทึก”

เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า

คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก ... > แก้ไขเนื้อหาธีมเริ่มต้น
3. ในกล่องฟิลเตอร์ ให้พิมพ์ unavailable เพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”
4. แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย Make a selection
5. คลิกที่ “บันทึก”

Narrative

ขั้นตอนสำหรับ Narrative

ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการปรับแต่งกับ Narrative:

แก้ไขไฟล์ JavaScript ของธีม

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
3. ในไดเรกทอรีชิ้นงาน ให้คลิก custom.js
4. เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของไฟล์:

(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. คลิกที่ “บันทึก”

แก้ไขเทมเพลตหน้าสินค้าของคุณ

วิธีแก้ไขเทมเพลตหน้าสินค้าของคุณ:

1. ในไดเรกทอรีส่วน ให้คลิก product-template.liquid
2. ค้นหาโค้ดต่อไปนี้:

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

แทนที่ด้วย:

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

1. ค้นหาโค้ด {% 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 %}

โค้ดควรมีลักษณะดังนี้:

{% 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. คลิกที่ “บันทึก”

เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า

คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก ... > แก้ไขเนื้อหาธีมเริ่มต้น
3. ในกล่องฟิลเตอร์ ให้พิมพ์ unavailable เพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”
4. แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย Make a selection
5. คลิกที่ “บันทึก”

Simple

ขั้นตอนสำหรับ Simple

ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการปรับแต่งกับธีม Simple:

แก้ไขไฟล์ JavaScript ของธีม

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid
4. ค้นหาโค้ด initProductVariant: function() { และค้นหาโค้ดต่อไปนี้ด้านล่างโค้ดดังกล่าว:

// 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;
    }
  }
}

โค้ดควรมีลักษณะดังนี้:

// 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. คลิกที่ “บันทึก”

แก้ไขเทมเพลตหน้าสินค้าของคุณ

วิธีแก้ไขเทมเพลตหน้าสินค้าของคุณ:

1. ในไดเรกทอรีส่วน ให้คลิก product-template.liquid
2. ค้นหาโค้ดต่อไปนี้:

{% assign current_variant = product.selected_or_first_available_variant %}

แทนที่ด้วย:

{% assign current_variant = product.selected_variant %}

1. ค้นหาโค้ดต่อไปนี้และลบโค้ดดังกล่าว:

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

1. ค้นหาโค้ด {% 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 %}

โค้ดควรมีลักษณะดังนี้:

{% 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. คลิกที่ “บันทึก”

เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า

คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก ... > แก้ไขเนื้อหาธีมเริ่มต้น
3. ในกล่องฟิลเตอร์ ให้พิมพ์ unavailable เพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”
4. แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย Make a selection
5. คลิกที่ “บันทึก”

Supply

ขั้นตอนสำหรับ Supply

ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการปรับแต่งกับ Supply:

แก้ไขไฟล์ JavaScript ของธีม

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid
4. ค้นหาโค้ด initProductVariant: function() { และค้นหาโค้ดต่อไปนี้ด้านล่างโค้ดดังกล่าว:

// 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;
    }
  }
}

โค้ดควรมีลักษณะดังนี้:

// 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. คลิกที่ “บันทึก”

แก้ไขเทมเพลตหน้าสินค้าของคุณ

วิธีแก้ไขเทมเพลตหน้าสินค้าของคุณ:

1. ในไดเรกทอรีส่วน ให้คลิก product-template.liquid
2. ค้นหาโค้ดต่อไปนี้:

{% assign variant = product.selected_or_first_available_variant %}

แทนที่ด้วย:

{% assign variant = product.selected_variant %}

1. ค้นหาโค้ดต่อไปนี้และลบโค้ดดังกล่าว:

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

1. ค้นหาโค้ดนี้ทั้งหมด:

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

แทนที่ด้วย:

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

1. ค้นหาโค้ด {% 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 %}

โค้ดควรมีลักษณะดังนี้:

{% 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. คลิกที่ “บันทึก”

เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า

คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก ... > แก้ไขเนื้อหาธีมเริ่มต้น
3. ในกล่องฟิลเตอร์ ให้พิมพ์ unavailable เพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”
4. แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย Make a selection
5. คลิกที่ “บันทึก”

Venture

ขั้นตอนสำหรับธีม Venture

ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการปรับแต่งกับธีม Venture:

แก้ไขไฟล์ JavaScript ของธีม

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
3. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js หรือ theme.js.liquid
4. เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของไฟล์:

(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. ค้นหาโค้ดต่อไปนี้:

this.currentVariant = this._getVariantFromOptions();

แทนที่ด้วย:

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

1. ค้นหาโค้ด _updatePrice: function(variant) แทนที่โค้ดต่อไปนี้:

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

ด้วย:

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

1. คลิกที่ “บันทึก”

แก้ไขเทมเพลตหน้าสินค้าของคุณ

วิธีแก้ไขเทมเพลตหน้าสินค้าของคุณ:

1. ในไดเรกทอรีส่วน ให้คลิก product-template.liquid
2. ค้นหาโค้ดต่อไปนี้:

{% assign current_variant = product.selected_or_first_available_variant %}

แทนที่ด้วย:

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

1. ค้นหาโค้ดต่อไปนี้และลบโค้ดดังกล่าว:

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

หากคุณไม่พบโค้ดด้านบน ให้ค้นหาโค้ดนี้และลบโค้ดดังกล่าว:

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

1. ค้นหาโค้ดนี้ทั้งหมด:

{% unless current_variant.available %}

แทนที่ด้วย:

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

1. ค้นหาโค้ดต่อไปนี้:

{% 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 %}

แทนที่ด้วย:

{% 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 %} วางโค้ดข้างต้นลงในบรรทัดเหนือบรรทัดของโค้ดนี้:

{% 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 %}

โค้ดควรมีลักษณะดังนี้:

{% 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. คลิกที่ “บันทึก”

เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า

คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก ... > แก้ไขเนื้อหาธีมเริ่มต้น
3. ในกล่องฟิลเตอร์ ให้พิมพ์ unavailable เพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”
4. แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย Make a selection
5. คลิกที่ “บันทึก”

ขั้นตอนต่างๆ สำหรับธีมที่ไม่แบ่งส่วน

เพิ่มการแจ้งเตือนไปยังเมนูดรอปดาวน์ของตัวเลือกสินค้า

วิธีเพิ่มการแจ้งเตือนไปยังเมนูดรอปดาวน์ตัวเลือกสินค้าของคุณ:

1. ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่
2. ตั้งชื่อส่วนย่อย pick-an-option ใหม่ของคุณ

1. ในไฟล์ส่วนย่อยใหม่ของคุณ ให้วางโค้ดนี้ที่โฮสต์โดย GitHub
2. คลิกที่ “บันทึก”
3. ในไดเรกทอรีเลย์เอาต์ ให้คลิก theme.liquid
4. ค้นหาแท็กปิด </body> ใกล้กับด้านล่างของไฟล์ ในบรรทัดใหม่ด้านบนแท็กปิด </body> ให้วางโค้ดต่อไปนี้:

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

1. คลิกที่ “บันทึก”

2. ค้นหาไฟล์ที่มีแบบฟอร์มเพิ่มลงในตะกร้าสินค้า ซึ่งจะมีการระบุที่มา action ที่ตั้งไว้เป็น /cart/add โดยจะต้องเป็นหนึ่งในสี่ไฟล์เหล่านี้:

   • เทมเพลต product.liquid ใต้เทมเพลต
   • เลย์เอาต์ theme.liquid ใต้เลย์เอาต์
   • ส่วนย่อย product.liquid ใต้ส่วนย่อย
   • ส่วนย่อย single-product.liquid ใต้ส่วนย่อย

3. ค้นหาโค้ดนี้ภายในแบบฟอร์ม:

<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>

หรือ

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

แทนที่ด้วย:

<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. ค้นหาและแทนที่โค้ดต่อไปนี้:
   • Minimal, Pop หรือ Supply: หากคุณใช้ธีม Minimal, Pop หรือ Supply ให้ค้นหาโค้ดนี้ทั้งหมด:

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

แทนที่ด้วย:

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

• ธีมของ Shopify อื่นๆ: หากคุณใช้ธีมอื่นๆ ของ Shopify ให้ค้นหาโค้ดนี้:

{% assign current_variant = product.selected_or_first_available_variant %}

แทนที่ด้วย:

{% assign current_variant = product.selected_variant %}

1. คลิกที่ “บันทึก”

เปลี่ยนการตั้งค่าภาษาของปุ่มเพิ่มลงในตะกร้าสินค้า

คุณสามารถเปลี่ยนการตั้งค่าภาษาสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าเพื่อไม่ให้สินค้าแสดงข้อความ “ไม่พร้อมใช้งาน” ก่อนทำการเลือก

1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก ... > แก้ไขเนื้อหาธีมเริ่มต้น
3. ในกล่องฟิลเตอร์ ให้พิมพ์ unavailable เพื่อแสดง การแปล “ที่ไม่สามารถแปลได้”
4. แทนที่ข้อความ “ไม่พร้อมใช้งาน” ด้วย Make a selection
5. คลิกที่ “บันทึก”