고객이 옵션을 선택하게 합니다

참고 사항

Shopify 무료 테마를 사용하는 경우 Shopify 지원팀에 문의하여 이 튜토리얼에 대한 도움을 받을 수 있습니다. 디자인 시간으로 15분이 필요합니다. 자세히 알아보려면 테마에 대한 지원을 참조하십시오.

참고 사항

이 사용자 지정은 빈티지 Shopify 테마용으로, Online Store 2.0 테마에는 적용되지 않습니다.

• 테마의 아키텍처 버전 알아보기
• Online Store 2.0 테마 사용자 지정 살펴보기

고객이 온라인 스토어의 제품 페이지를 방문하면 기본적으로 사용 가능한 첫 번째 이형 상품이 선택됩니다. 이 사용자 지정을 사용하여 사용 가능한 첫 번째 이형 상품의 자동 선택을 비활성화할 수 있습니다. 이렇게 하면 고객에게 이형 상품이 표시되기 전에 수동으로 이형 상품을 선택하라는 메시지가 표시됩니다. )

참고: 이 사용자 지정으로 인해 기본적으로 이형 상품이 선택되지 않으므로 고객이 이형 상품을 선택할 때까지 테마에 제품 가격이 표시되지 않을 수 있습니다. 이형 상품이 있는 제품에는 추천 가격이 없기 때문에 이는 예상된 동작입니다. 표시되는 가격은 선택된 이형 상품에 따라 결정됩니다.

섹션 지원 및 섹션 미지원 테마

참고 사항

이 튜토리얼의 단계는 섹션 포함 테마인지 섹션 구분되지 않은 테마인지에 따라 다릅니다. 섹션 포함 테마에서는 끌어서 놓기 방식으로 홈페이지 레이아웃을 수정할 수 있으며, 섹션 구분되지 않은 테마에서는 해당 작업을 수행할 수 없습니다.

사용하는 테마에서 섹션을 지원하는지 확인하려면 코드 편집 페이지로 이동합니다. 섹션을 지원하는 테마를 사용하는 경우에는 섹션 디렉토리에서 파일을 찾아볼 수 있습니다. 2016년 10월 이전에 출시된 테마는 섹션을 지원하지 않으며 섹션 디렉토리에 파일이 없습니다.

섹션을 지원하는 테마를 사용하는 경우 섹션 지원 테마 버튼을 클릭한 다음 안내를 따릅니다. 섹션을 지원하지 않는 구형 테마를 사용하는 경우 섹션 미지원 테마 버튼을 클릭한 다음 안내를 따릅니다.

Sectioned themes

테마 선택

이 사용자 지정 단계는 테마에 따라 다릅니다. 테마 버튼을 먼저 클릭하고 다음 지침을 따릅니다.

Boundless

Boundless용 단계

Boundless에 사용자 지정을 적용하려면 다음 단계를 따릅니다.

테마의 JavaScript 파일 편집

테마의 JavaScript 파일을 편집하려면 다음을 수행하십시오.

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

1. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.

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

1. 다음 코드 행을 찾습니다.

$(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. 저장을 클릭합니다.

제품 페이지 템플릿 편집

제품 페이지 템플릿을 편집하려면:

1. 섹션 디렉토리에서 product-template.liquid을(를) 클릭합니다.

2. 다음 코드를 찾습니다.

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

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

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. 저장을 클릭합니다.

카트에 추가 버튼 언어 설정 변경

카트에 추가 버튼 언어 설정을 변경하여 선택을 마치기 전 제품이 "사용할 수 없는" 것으로 표시되지 않도록 할 수 있습니다.

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

1. 편집할 테마를 찾아 작업 > 기본 테마 콘텐츠 편집을 클릭합니다.

2. 필터 상자에서 unavailable 입력을 시작하여 "사용할 수 없음" 번역을 표시합니다.

3. 사용할 수 없음 텍스트를 Make a selection으로 교체합니다.

4. 저장을 클릭합니다.

Debut

Debut용 단계

Debut에 사용자 지정을 적용하려면 다음 단계를 따릅니다.

테마의 JavaScript 파일 편집

테마의 JavaScript 파일을 편집하려면 다음을 수행하십시오.

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

1. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.

2. 파일 맨 아래에 다음 코드를 추가합니다.

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

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. 코드 찾기 this.currentVariant = variant;

this._updatePaymentButton(variant);

The result should look something like this:

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

1. _updateImages: function(variant) 코드를 찾습니다. 다음 코드를

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

with:

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

1. 바로 아래에서 다음 코드를 찾습니다.

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

Replace it with:

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

1. _updateSKU: function(variant) 코드를 찾습니다. 다음 코드를

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

with:

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

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. 다음 코드를 찾습니다.

_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. 저장을 클릭합니다.

제품 페이지 템플릿 편집

제품 페이지 템플릿을 편집하려면:

1. 섹션 디렉토리에서 product-template.liquid을(를) 클릭합니다.

2. 다음 코드를 찾습니다.

{%- 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. 다음 코드를 찾아 삭제합니다.

{% 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. 다음 코드를 찾습니다.

{%- 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. 다음 코드를 찾습니다.

{% 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. 다음 코드를 찾습니다.

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

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

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.

카트에 추가 버튼 언어 설정 변경

카트에 추가 버튼 언어 설정을 변경하여 선택을 마치기 전 제품이 "사용할 수 없는" 것으로 표시되지 않도록 할 수 있습니다.

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

1. 편집할 테마를 찾아 작업 > 기본 테마 콘텐츠 편집을 클릭합니다.

2. 필터 상자에서 unavailable 입력을 시작하여 "사용할 수 없음" 번역을 표시합니다.

3. 사용할 수 없음 텍스트를 Make a selection으로 교체합니다.

4. 저장을 클릭합니다.

Minimal

Minimal용 단계

Minimal에 사용자 지정을 적용하려면 다음 단계를 따릅니다.

테마의 JavaScript 파일 편집

테마의 JavaScript 파일을 편집하려면 다음을 수행하십시오.

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

1. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.

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

1. 저장을 클릭합니다.

제품 페이지 템플릿 편집

제품 페이지 템플릿을 편집하려면:

1. 섹션 디렉토리에서 product-template.liquid을(를) 클릭합니다.

2. 다음 코드를 찾습니다.

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

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

Replace with:

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

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. 저장을 클릭합니다.

카트에 추가 버튼 언어 설정 변경

카트에 추가 버튼 언어 설정을 변경하여 선택을 마치기 전 제품이 "사용할 수 없는" 것으로 표시되지 않도록 할 수 있습니다.

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

1. 편집할 테마를 찾아 작업 > 기본 테마 콘텐츠 편집을 클릭합니다.

2. 필터 상자에서 unavailable 입력을 시작하여 "사용할 수 없음" 번역을 표시합니다.

3. 사용할 수 없음 텍스트를 Make a selection으로 교체합니다.

4. 저장을 클릭합니다.

Narrative

Narrative용 단계

Narrative에 사용자 지정을 적용하려면 다음 단계를 따릅니다.

테마의 JavaScript 파일 편집

테마의 JavaScript 파일을 편집하려면 다음을 수행하십시오.

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

1. 자산 디렉토리에서 custom.js을(를) 클릭합니다.

2. 파일 맨 아래에 다음 코드를 추가합니다.

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

Replace it with:

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

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. 저장을 클릭합니다.

카트에 추가 버튼 언어 설정 변경

카트에 추가 버튼 언어 설정을 변경하여 선택을 마치기 전 제품이 "사용할 수 없는" 것으로 표시되지 않도록 할 수 있습니다.

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

1. 편집할 테마를 찾아 작업 > 기본 테마 콘텐츠 편집을 클릭합니다.

2. 필터 상자에서 unavailable 입력을 시작하여 "사용할 수 없음" 번역을 표시합니다.

3. 사용할 수 없음 텍스트를 Make a selection으로 교체합니다.

4. 저장을 클릭합니다.

Simple

Simple용 단계

Simple에 사용자 지정을 적용하려면 다음 단계를 따릅니다.

테마의 JavaScript 파일 편집

테마의 JavaScript 파일을 편집하려면 다음을 수행하십시오.

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

1. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.

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

1. 저장을 클릭합니다.

제품 페이지 템플릿 편집

제품 페이지 템플릿을 편집하려면:

1. 섹션 디렉토리에서 product-template.liquid을(를) 클릭합니다.

2. 다음 코드를 찾습니다.

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

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

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. 저장을 클릭합니다.

카트에 추가 버튼 언어 설정 변경

카트에 추가 버튼 언어 설정을 변경하여 선택을 마치기 전 제품이 "사용할 수 없는" 것으로 표시되지 않도록 할 수 있습니다.

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

1. 편집할 테마를 찾아 작업 > 기본 테마 콘텐츠 편집을 클릭합니다.

2. 필터 상자에서 unavailable 입력을 시작하여 "사용할 수 없음" 번역을 표시합니다.

3. 사용할 수 없음 텍스트를 Make a selection으로 교체합니다.

4. 저장을 클릭합니다.

Supply

Supply용 단계

Supply에 사용자 지정을 적용하려면 다음 단계를 따릅니다.

테마의 JavaScript 파일 편집

테마의 JavaScript 파일을 편집하려면 다음을 수행하십시오.

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

1. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.

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

1. 저장을 클릭합니다.

제품 페이지 템플릿 편집

제품 페이지 템플릿을 편집하려면:

1. 섹션 디렉토리에서 product-template.liquid을(를) 클릭합니다.

2. 다음 코드를 찾습니다.

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

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

Replace it with:

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

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. 저장을 클릭합니다.

카트에 추가 버튼 언어 설정 변경

카트에 추가 버튼 언어 설정을 변경하여 선택을 마치기 전 제품이 "사용할 수 없는" 것으로 표시되지 않도록 할 수 있습니다.

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

1. 편집할 테마를 찾아 작업 > 기본 테마 콘텐츠 편집을 클릭합니다.

2. 필터 상자에서 unavailable 입력을 시작하여 "사용할 수 없음" 번역을 표시합니다.

3. 사용할 수 없음 텍스트를 Make a selection으로 교체합니다.

4. 저장을 클릭합니다.

Venture

Venture용 단계

Venture에 사용자 지정을 적용하려면 다음 단계를 따릅니다.

테마의 JavaScript 파일 편집

테마의 JavaScript 파일을 편집하려면 다음을 수행하십시오.

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

1. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.

2. 파일 맨 아래에 다음 코드를 추가합니다.

(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();

Replace it with:

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

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

1. 저장을 클릭합니다.

제품 페이지 템플릿 편집

제품 페이지 템플릿을 편집하려면:

1. 섹션 디렉토리에서 product-template.liquid을(를) 클릭합니다.

2. 다음 코드를 찾습니다.

{% 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. 다음 코드를 찾아 삭제합니다.

{% 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. 다음 코드의 모든 항목을 찾습니다.

{% unless current_variant.available %}

Replace it with:

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

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

1. 저장을 클릭합니다.

카트에 추가 버튼 언어 설정 변경

카트에 추가 버튼 언어 설정을 변경하여 선택을 마치기 전 제품이 "사용할 수 없는" 것으로 표시되지 않도록 할 수 있습니다.

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

1. 편집할 테마를 찾아 작업 > 기본 테마 콘텐츠 편집을 클릭합니다.

2. 필터 상자에서 unavailable 입력을 시작하여 "사용할 수 없음" 번역을 표시합니다.

3. 사용할 수 없음 텍스트를 Make a selection으로 교체합니다.

4. 저장을 클릭합니다.

Non-sectioned themes

이형 상품 드롭다운 메뉴에 프롬프트 추가

이형 상품 드롭다운 메뉴에 프롬프트를 추가하려면 다음을 수행하십시오.

1. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.

2. 새 코드 조각 pick-an-option의 이름을 지정합니다.

3. 새 코드 조각 파일에 GitHub에서 호스팅되는 코드입니다를 붙여넣습니다.

4. 저장을 클릭합니다.

5. 레이아웃 디렉토리에서 theme.liquid을(를) 클릭합니다.

6. 파일 아래쪽에서 닫는 </body> 태그를 찾습니다. 닫는 </body> 태그 바로 위쪽 새 행에 다음 코드를 붙여넣습니다.

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

1. 저장을 클릭합니다.

2. 카트에 추가 양식을 포함한 파일을 찾습니다. 해당 파일에는 action 특성이 /cart/add에 설정되어 있습니다.

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>

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. 다음 코드를 찾아 교체합니다.

{% 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. 저장을 클릭합니다.

카트에 추가 버튼 언어 설정 변경

카트에 추가 버튼 언어 설정을 변경하여 선택을 마치기 전 제품이 "사용할 수 없는" 것으로 표시되지 않도록 할 수 있습니다.

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.

1. 편집할 테마를 찾아 작업 > 기본 테마 콘텐츠 편집을 클릭합니다.

2. 필터 상자에서 unavailable 입력을 시작하여 "사용할 수 없음" 번역을 표시합니다.

3. 사용할 수 없음 텍스트를 Make a selection으로 교체합니다.

4. 저장을 클릭합니다.