Yêu cầu khách hàng chọn một tùy chọn

Lưu ý

Nếu bạn sử dụng chủ đề miễn phí từ Shopify, bạn có thể liên hệ với Bộ phận hỗ trợ của Shopify để được trợ giúp về hướng dẫn này. Thời gian thiết kế yêu cầu 15 phút. Để tìm hiểu thêm, tham khảo Support cho themes.

Lưu ý

Tùy chỉnh này áp dụng cho chủ đề Shopify cổ điển và không áp dụng cho chủ đề Online Store 2.0.

• Khám phá phiên bản cấu trúc của chủ đề
• Khám phá nội dung tùy chỉnh của chủ đề Online Store 2.0

Khi khách hàng truy cập trang sản phẩm trong cửa hàng trực tuyến của bạn, mẫu mã có sẵn đầu tiên sẽ được chọn theo mặc định. Bạn có thể sử dụng tùy chỉnh này để tắt tính năng tự động chọn mẫu mã có sẵn đầu tiên. Như vậy, khách hàng sẽ được nhắc chọn mẫu mã theo cách thủ công trước khi hiển thị mẫu mã. )

Lưu ý

Do tùy chỉnh này không cho phép chọn mẫu mã theo mặc định, chủ đề của bạn có thể không hiển thị giá sản phẩm cho đến khi khách hàng chọn mẫu mã. Đây là hành vi dự kiến vì sản phẩm có mẫu mã không có giá nổi bật. Giá hiển thị được quyết định bằng mẫu mã được chọn.

Chủ đề có phân mục và không phân mục

Lưu ý

Các bước hướng dẫn này khác nhau tùy thuộc vào việc bạn sử dụng chủ đề có phân mục hay không phân mục. Chủ đề có phân mục cho phép bạn kéo và thả để sắp xếp bố cục trang chủ còn chủ đề không phân mục thì không.

Để tìm hiểu xem chủ đề của bạn có hỗ trợ phân mục không, vào trang Edit code (Chỉnh sửa mã) của chủ đề. Nếu có tệp trong thư mục Sections thì bạn đang sử dụng chủ đề có phân mục. Chủ đề không phân mục được phát hành trước tháng 10 năm 2016 và không có tệp trong thư mục Sections.

Nếu bạn đang sử dụng chủ đề có phân mục, nhấp vào nút Chủ đề có phân mục và làm theo hướng dẫn. Nếu bạn đang sử dụng chủ đề cũ và không phân mục, nhấp vào nút Chủ đề không phân mục và làm theo hướng dẫn.

Sectioned themes

Chọn chủ đề

Có nhiều bước tùy chỉnh khác nhau phụ thuộc vào chủ đề bạn chọn. Nhấp vào nút chủ đề của bạn trước khi thực hiện theo hướng dẫn dưới đây:

Boundless

Các bước thực hiện dành cho chủ đề Boundless

Hãy thực hiện theo các bước sau để áp dụng nội dung tùy chỉnh cho chủ đề Boundless:

Chỉnh sửa tập tin JavaScript của chủ đề

Để chỉnh sửa tệp JavaScript của chủ đề:

Máy tính để bàn

1. Trong trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.

2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

1. Trong thư mục Assets, nhấp vào theme.js hoặc theme.js.liquid.

2. Tìm mã initVariantSelectors. Bên dưới, tìm mã sau:

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

1. Tìm dòng mã sau:

$(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.

1. Nhấp vào Save (Lưu).

Sửa mẫu trang sản phẩm

Cách chỉnh sửa mẫu trang sản phẩm:

1. Trong thư mục Sections, chạm vào product-template.liquid.

2. Tìm mã sau:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. Tìm và xóa mã sau:

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

1. Tìm mã {% schema %}. Dán mã sau vào chính dòng của nó ở phía trê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 %}

1. Nhấp vào Save (Lưu).

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để các sản phẩm không hiển thị là "Không có" trước khi thao tác lựa chọn được thực hiện.

Máy tính để bàn

1. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

1. Tìm chủ đề bạn muốn chỉnh sửa rồi nhấp vào Thao tác > Chỉnh sửa nội dung chủ đề mặc định.

2. Trong hộp Lọc, bắt đầu nhập unavailable để hiển thị bản dịch của từ "Unavailable".

3. Thay thế từ Unavailable thành Make a selection.

4. Nhấp vào Save (Lưu).

Debut

Các bước thực hiện dành cho chủ đề Khai trương

Hãy thực hiện theo các bước sau để áp dụng nội dung tùy chỉnh cho chủ đề Khai trương:

Chỉnh sửa tập tin JavaScript của chủ đề

Để chỉnh sửa tệp JavaScript của chủ đề:

Máy tính để bàn

1. Trong trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.

2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

1. Trong thư mục Assets, nhấp vào theme.js hoặc theme.js.liquid.

2. Thêm mã sau vào cuối tệp:

(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. Tìm mã _updatePrice: function(variant). Thay mã sau:

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

1. Tìm mã this.currentVariant = variant;

this._updatePaymentButton(variant);

The result should look something like this:

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

1. Tìm mã _updateImages: function(variant). Thay mã sau:

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

with:

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

1. Ngay bên dưới, tìm mã sau:

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

Replace it with:

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

1. Tìm mã _updateSKU: function(variant). Thay mã sau:

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

with:

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

1. Tìm mã _initVariants: function() {. Thay mã sau:

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.

1. Tìm mã sau:

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

1. Nhấp vào Save (Lưu).

Sửa mẫu trang sản phẩm

Cách chỉnh sửa mẫu trang sản phẩm:

1. Trong thư mục Sections, chạm vào product-template.liquid.

2. Tìm mã sau:

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

1. Tìm và xóa mã sau:

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

1. Tìm mã sau:

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

1. Tìm mã sau:

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

1. Tìm mã sau:

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

1. Tìm mã {% schema %}. Dán mã sau vào chính dòng của nó ở phía trê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 %}

1. Nhấp vào Save (Lưu).

Sửa đoạn mã giá sản phẩm

Để sửa đoạn mã giá sản phẩm:

1. Trong thư mục Snippets (Đoạn mã), nhấp vào product-price.liquid.

2. Tìm mã sau:

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

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để các sản phẩm không hiển thị là "Không có" trước khi thao tác lựa chọn được thực hiện.

Máy tính để bàn

1. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

1. Tìm chủ đề bạn muốn chỉnh sửa rồi nhấp vào Thao tác > Chỉnh sửa nội dung chủ đề mặc định.

2. Trong hộp Lọc, bắt đầu nhập unavailable để hiển thị bản dịch của từ "Unavailable".

3. Thay thế từ Unavailable thành Make a selection.

4. Nhấp vào Save (Lưu).

Minimal

Các bước thực hiện dành cho chủ đề Minimal

Hãy thực hiện theo các bước sau để áp dụng nội dung tùy chỉnh cho chủ đề Minimal:

Chỉnh sửa tập tin JavaScript của chủ đề

Để chỉnh sửa tệp JavaScript của chủ đề:

Máy tính để bàn

1. Trong trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.

2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

1. Trong thư mục Assets, nhấp vào theme.js hoặc theme.js.liquid.

2. Tìm mã initProductVariant: function() {. Bên dưới, tìm mã sau:

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

1. Nhấp vào Save (Lưu).

Chỉnh sửa mẫu trang sản phẩm:

Cách chỉnh sửa mẫu trang sản phẩm:

1. Trong thư mục Sections, chạm vào product-template.liquid.

2. Tìm mã sau:

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign variant = product.selected_variant %}

1. Tìm và xóa mã sau:

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

1. Tìm tất cả các lần xuất hiện của mã sau:

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

1. Tìm mã {% schema %}. Dán mã sau vào chính dòng của nó ở phía trê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 %}

1. Nhấp vào Save (Lưu).

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để các sản phẩm không hiển thị là "Không có" trước khi thao tác lựa chọn được thực hiện.

Máy tính để bàn

1. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

1. Tìm chủ đề bạn muốn chỉnh sửa rồi nhấp vào Thao tác > Chỉnh sửa nội dung chủ đề mặc định.

2. Trong hộp Lọc, bắt đầu nhập unavailable để hiển thị bản dịch của từ "Unavailable".

3. Thay thế từ Unavailable thành Make a selection.

4. Nhấp vào Save (Lưu).

Narrative

Các bước thực hiện dành cho chủ đề Narrative

Hãy thực hiện theo các bước sau để áp dụng nội dung tùy chỉnh cho chủ đề Narrative:

Chỉnh sửa tập tin JavaScript của chủ đề

Để chỉnh sửa tệp JavaScript của chủ đề:

Máy tính để bàn

1. Trong trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.

2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

1. Trong thư mục Assets, nhấp vào custom.js.

2. Thêm mã sau vào cuối tệp:

(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. Nhấp vào Save (Lưu).

Sửa mẫu trang sản phẩm

Cách chỉnh sửa mẫu trang sản phẩm:

1. Trong thư mục Sections, chạm vào product-template.liquid.

2. Tìm mã sau:

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

1. Tìm mã {% schema %}. Dán mã sau vào chính dòng của nó ở phía trê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 %}

1. Nhấp vào Save (Lưu).

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để các sản phẩm không hiển thị là "Không có" trước khi thao tác lựa chọn được thực hiện.

Máy tính để bàn

1. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

1. Tìm chủ đề bạn muốn chỉnh sửa rồi nhấp vào Thao tác > Chỉnh sửa nội dung chủ đề mặc định.

2. Trong hộp Lọc, bắt đầu nhập unavailable để hiển thị bản dịch của từ "Unavailable".

3. Thay thế từ Unavailable thành Make a selection.

4. Nhấp vào Save (Lưu).

Simple

Các bước thực hiện dành cho chủ đề Simple

Hãy thực hiện theo các bước sau để áp dụng nội dung tùy chỉnh cho chủ đề Simple:

Chỉnh sửa tập tin JavaScript của chủ đề

Để chỉnh sửa tệp JavaScript của chủ đề:

Máy tính để bàn

1. Trong trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.

2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

1. Trong thư mục Assets, nhấp vào theme.js hoặc theme.js.liquid.

2. Tìm mã initProductVariant: function() {. Bên dưới, tìm mã sau:

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

1. Nhấp vào Save (Lưu).

Sửa mẫu trang sản phẩm

Cách chỉnh sửa mẫu trang sản phẩm:

1. Trong thư mục Sections, chạm vào product-template.liquid.

2. Tìm mã sau:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. Tìm và xóa mã sau:

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

1. Tìm mã {% schema %}. Dán mã sau vào chính dòng của nó ở phía trê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 %}

1. Nhấp vào Save (Lưu).

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để các sản phẩm không hiển thị là "Không có" trước khi thao tác lựa chọn được thực hiện.

Máy tính để bàn

1. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

1. Tìm chủ đề bạn muốn chỉnh sửa rồi nhấp vào Thao tác > Chỉnh sửa nội dung chủ đề mặc định.

2. Trong hộp Lọc, bắt đầu nhập unavailable để hiển thị bản dịch của từ "Unavailable".

3. Thay thế từ Unavailable thành Make a selection.

4. Nhấp vào Save (Lưu).

Supply

Các bước thực hiện dành cho chủ đề Cung ứng

Hãy thực hiện theo các bước sau để áp dụng nội dung tùy chỉnh cho chủ đề Supply:

Chỉnh sửa tập tin JavaScript của chủ đề

Để chỉnh sửa tệp JavaScript của chủ đề:

Máy tính để bàn

1. Trong trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.

2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

1. Trong thư mục Assets, nhấp vào theme.js hoặc theme.js.liquid.

2. Tìm mã initProductVariant: function() {. Bên dưới, tìm mã sau:

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

1. Nhấp vào Save (Lưu).

Sửa mẫu trang sản phẩm

Cách chỉnh sửa mẫu trang sản phẩm:

1. Trong thư mục Sections, chạm vào product-template.liquid.

2. Tìm mã sau:

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign variant = product.selected_variant %}

1. Tìm và xóa mã sau:

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

1. Tìm tất cả các lần xuất hiện của mã sau:

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

1. Tìm mã {% schema %}. Dán mã sau vào chính dòng của nó ở phía trê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 %}

1. Nhấp vào Save (Lưu).

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để các sản phẩm không hiển thị là "Không có" trước khi thao tác lựa chọn được thực hiện.

Máy tính để bàn

1. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

1. Tìm chủ đề bạn muốn chỉnh sửa rồi nhấp vào Thao tác > Chỉnh sửa nội dung chủ đề mặc định.

2. Trong hộp Lọc, bắt đầu nhập unavailable để hiển thị bản dịch của từ "Unavailable".

3. Thay thế từ Unavailable thành Make a selection.

4. Nhấp vào Save (Lưu).

Venture

Các bước thực hiện dành cho chủ đề Venture

Hãy thực hiện theo các bước sau để áp dụng nội dung tùy chỉnh cho chủ đề Venture:

Chỉnh sửa tập tin JavaScript của chủ đề

Để chỉnh sửa tệp JavaScript của chủ đề:

Máy tính để bàn

1. Trong trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.

2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.

2. Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.

3. Chạm vào Manage themes (Quản lý chủ đề).

4. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.

1. Trong thư mục Assets, nhấp vào theme.js hoặc theme.js.liquid.

2. Thêm mã sau vào cuối tệp:

(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. Tìm mã sau:

this.currentVariant = this._getVariantFromOptions();

Replace it with:

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

1. Tìm mã _updatePrice: function(variant). Thay mã sau:

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

1. Nhấp vào Save (Lưu).

Sửa mẫu trang sản phẩm

Cách chỉnh sửa mẫu trang sản phẩm:

1. Trong thư mục Sections, chạm vào product-template.liquid.

2. Tìm mã sau:

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

1. Tìm và xóa mã sau:

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

1. Tìm tất cả các lần xuất hiện của mã sau:

{% unless current_variant.available %}

Replace it with:

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

1. Tìm mã sau:

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

1. Tìm mã {% schema %}. Dán mã sau vào chính dòng của nó ở phía trê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 %}

1. Nhấp vào Save (Lưu).

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để các sản phẩm không hiển thị là "Không có" trước khi thao tác lựa chọn được thực hiện.

Máy tính để bàn

1. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

1. Tìm chủ đề bạn muốn chỉnh sửa rồi nhấp vào Thao tác > Chỉnh sửa nội dung chủ đề mặc định.

2. Trong hộp Lọc, bắt đầu nhập unavailable để hiển thị bản dịch của từ "Unavailable".

3. Thay thế từ Unavailable thành Make a selection.

4. Nhấp vào Save (Lưu).

Non-sectioned themes

Thêm lời nhắc vào menu thả xuống mẫu mã

Để thêm lời nhắc vào menu thả xuống mẫu mã:

1. Trong thư mục Đoạn mã, nhấp vào Thêm đoạn mã mới.

2. Đặt tên cho đoạn mã mới pick-an-option.

3. Trong tập tin của đoạn mã mới, dán mã lưu trữ trên GitHub.

4. Nhấp vào Save (Lưu).

5. Trong thư mục Layout, nhấp vào theme.liquid.

6. Tìm thẻ có kết thúc là </body> ở gần phía dưới cùng của tập tin. Trên dòng mới nằm ngay phía trên thẻ có kết thúc là </body>, dán vào mã sau:

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

1. Nhấp vào Save (Lưu).

2. Tìm tập tin chứa biểu mẫu "add to cart" (thêm vào giỏ hàng). Tập tin này sẽ có thuộc tính action được đặt thành /cart/add.

3. Tìm mã sau trong biểu mẫu:

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

1. Tìm và thay thế mã sau:

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

1. Nhấp vào Save (Lưu).

Thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng

Bạn có thể thay đổi cài đặt ngôn ngữ cho nút Thêm vào giỏ hàng để các sản phẩm không hiển thị là "Không có" trước khi thao tác lựa chọn được thực hiện.

Máy tính để bàn

1. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.

iPhone

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

Android

1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Nhấn vào Manage themes (Quản lý chủ đề).

1. Tìm chủ đề bạn muốn chỉnh sửa rồi nhấp vào Thao tác > Chỉnh sửa nội dung chủ đề mặc định.

2. Trong hộp Lọc, bắt đầu nhập unavailable để hiển thị bản dịch của từ "Unavailable".

3. Thay thế từ Unavailable thành Make a selection.

4. Nhấp vào Save (Lưu).