제품 페이지에 이형 상품의 남은 재고 표시

주의

테마 스토어에서는 빈티지 테마를 사용할 수 없습니다. 빈티지 테마에는 Shopify Online Store 2.0 테마에 포함된 기능이 없으며, Shopify 무료 빈티지 테마는 보안 수정을 제외한 업데이트가 제공되지 않습니다.

참고 사항

Shopify 무료 테마를 사용하는 경우 Shopify 지원팀에 문의하여 이 튜토리얼에 대한 도움을 받을 수 있습니다. 디자인에는 15분이 소요됩니다. Shopify 디자인 정책에 대해 자세히 알아보세요.

참고 사항

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

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

제품 페이지 또는 추천 제품 섹션에 제품 이형의 재고가 부족할 때 보유하고 있는 품목 수를 표시하는 메시지를 추가할 수 있습니다. 이 메시지를 표시하려면 제품의 재고 추적을 활성화해야 합니다.

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

팁

Shopify의 Supply 테마 및 Venture 테마에는 남은 수량 메시지 표시 설정이 이미 포함되어 있습니다. 테마 편집기에서 이 설정을 활성화할 수 있습니다.

Debut

Debut용 단계

편집 theme.liquid

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
3. 레이아웃 디렉토리에서 theme.liquid를 엽니다.
4. 코드에서 닫는 </head> 태그를 찾습니다. 닫는 </head> 태그 위쪽 새 행에 다음 코드를 붙여넣습니다.

<script>
  var variantStock = {};
</script>

1. 저장을 클릭합니다.

product-template.liquid 편집 또는 featured-product.liquid

1. 섹션 디렉토리에서 product-template.liquid 또는 featured-product.liquid를 엽니다.

   • product-template.liquid를 열어 이 기능을 제품 페이지에 추가합니다.
   • featured-product.liquid를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.

2. {% form 'product'를 찾습니다. 이 태그 위에 다음 코드를 추가합니다.

<div class="inventoryWrapper">
  {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 {{ current_variant.inventory_quantity }}를 포함해야 합니다..

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

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. 저장을 클릭합니다.

theme.js.liquid 편집 또는 theme.js

이 파일에 적용해야 하는 변경 사항은 사용하는 Debut 버전에 따라 다릅니다.

버전 17.8.0 이하

1. theme.js.liquid 또는 theme.js를 엽니다.
2. theme.Product = (function() 코드를 찾습니다. this.selectors = { 아래에 다음 코드를 추가합니다.

inventoryHtml: '.inventoryWrapper',

1. 같은 파일에서 _updateAddToCart: function(evt) {을 찾습니다. 바로 아래에 다음 코드를 추가합니다.

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. if (variant.available) {을 찾습니다. } else { 문 앞에 다음 코드를 추가합니다.

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
      inventoryWrapper.innerHTML = inventoryHtml;
    } else {
      inventoryWrapper.innerHTML = '';
}

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 ${variantStock[variant.id]}를 포함해야 합니다..

1. 저장을 클릭합니다.

버전 17.9.0 이상

1. theme.js.liquid 또는 theme.js를 엽니다.
2. theme.Product = (function() 코드를 찾습니다. this.selectors = { 아래에 다음 코드를 추가합니다.

inventoryHtml: '.inventoryWrapper',

1. 같은 파일에서 _setProductState: function(evt) {을 찾습니다. 바로 아래에 다음 코드를 추가합니다.

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. 같은 기능에서 if (!variant) {를 찾습니다. } 괄호를 닫은 후 다음 코드를 추가합니다.

else {
  if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
    const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
    inventoryWrapper.innerHTML = inventoryHtml;
  } else {
    inventoryWrapper.innerHTML = '';
  }
}

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 ${variantStock[variant.id]}를 포함해야 합니다..

1. 저장을 클릭합니다.

Brooklyn

Brooklyn용 단계

편집 theme.liquid

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
3. 레이아웃 디렉토리에서 theme.liquid를 엽니다.
4. 코드에서 닫는 </head> 태그를 찾습니다. 닫는 </head> 태그 위쪽 새 행에 다음 코드를 붙여넣습니다.

<script>
  var variantStock = {};
</script>

1. 저장을 클릭합니다.

product-template.liquid 편집 또는 featured-product.liquid

1. 섹션 디렉토리에서 product-template.liquid 또는 featured-product.liquid를 엽니다.

   • product-template.liquid를 열어 이 기능을 제품 페이지에 추가합니다.
   • featured-product.liquid를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.

2. {% form 'product'를 찾습니다. 이 태그 위에 다음 코드를 추가합니다.

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 {{current_variant.inventory_quantity }}를 포함해야 합니다..

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

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. 저장을 클릭합니다.

theme.js.liquid 편집 또는 theme.js

1. theme.js.liquid 또는 theme.js를 엽니다.
2. theme.Product = (function() 코드를 찾습니다. this.selectors = { 아래에 다음 코드를 추가합니다.

inventoryHtml: '.inventoryWrapper',

1. 같은 파일에서 if (variant.available) {을 찾습니다. } else { 문 앞에 다음 코드를 추가합니다.

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 ${variantStock[variant.id]}를 포함해야 합니다..

1. 저장을 클릭합니다.

Simple

Simple용 단계

편집 theme.liquid

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
3. 레이아웃 디렉토리에서 theme.liquid를 엽니다.
4. 코드에서 닫는 </head> 태그를 찾습니다. 닫는 </head> 태그 위쪽 새 행에 다음 코드를 붙여넣습니다.

<script>
  var variantStock = {};
</script>

1. 저장을 클릭합니다.

product-template.liquid 편집 또는 featured-product.liquid

1. 섹션 디렉토리에서 product-template.liquid 또는 featured-product.liquid를 엽니다.

   • product-template.liquid를 열어 이 기능을 제품 페이지에 추가합니다.
   • featured-product.liquid를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.

2. {% form 'product'를 찾습니다. 이 태그 위에 다음 코드를 추가합니다.

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 {{current_variant.inventory_quantity }}를 포함해야 합니다..

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

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. 저장을 클릭합니다.

theme.js.liquid 편집 또는 theme.js

1. theme.js.liquid 또는 theme.js를 엽니다.
2. theme.Product = (function() 코드를 찾습니다. this.selectors = { 아래에 다음 코드를 추가합니다.

inventoryHtml: '.inventoryWrapper',

1. 같은 파일에서 if (variant.available) {을 찾습니다. } else { 문 앞에 다음 코드를 추가합니다.

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 ${variantStock[variant.id]}를 포함해야 합니다..

1. 저장을 클릭합니다.

Minimal

Minimal용 단계

편집 theme.liquid

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
3. 레이아웃 디렉토리에서 theme.liquid를 엽니다.
4. 코드에서 닫는 </head> 태그를 찾습니다. 닫는 </head> 태그 위쪽 새 행에 다음 코드를 붙여넣습니다.

<script>
  var variantStock = {};
</script>

1. 저장을 클릭합니다.

product-template.liquid 편집 또는 featured-product.liquid

1. 섹션 디렉토리에서 product-template.liquid 또는 featured-product.liquid를 엽니다.

   • product-template.liquid를 열어 이 기능을 제품 페이지에 추가합니다.
   • featured-product.liquid를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.

2. {% form 'product'를 찾습니다. 이 태그 위에 다음 코드를 추가합니다.

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 {{current_variant.inventory_quantity }}를 포함해야 합니다..

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

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. 저장을 클릭합니다.

theme.js.liquid 편집 또는 theme.js

1. theme.js.liquid 또는 theme.js를 엽니다.
2. theme.Product = (function() 코드를 찾습니다. this.selectors = { 아래에 다음 코드를 추가합니다.

inventoryHtml: '.inventoryWrapper',

1. 같은 파일에서 if (variant.available) {을 찾습니다. } else { 문 앞에 다음 코드를 추가합니다.

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 ${variantStock[variant.id]}를 포함해야 합니다..

1. 저장을 클릭합니다.

Boundless

Boundless용 단계

편집 theme.liquid

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
3. 레이아웃 디렉토리에서 theme.liquid를 엽니다.
4. 코드에서 닫는 </head> 태그를 찾습니다. 닫는 </head> 태그 위쪽 새 행에 다음 코드를 붙여넣습니다.

<script>
  var variantStock = {};
    </script>

1. 저장을 클릭합니다.

product-template.liquid 편집 또는 featured-product.liquid

1. 섹션 디렉토리에서 product-template.liquid 또는 featured-product.liquid를 엽니다.

   • product-template.liquid를 열어 이 기능을 제품 페이지에 추가합니다.
   • featured-product.liquid를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.

2. {% form 'product'를 찾습니다. 이 태그 위에 다음 코드를 추가합니다.

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 {{current_variant.inventory_quantity }}를 포함해야 합니다..

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

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. 저장을 클릭합니다.

theme.js.liquid 편집 또는 theme.js

1. 'theme.js.liquid' * 또는 *'theme.js'를 엽니다.
2. theme.Product = (function() 코드를 찾습니다. var selectors = { 아래에 다음 코드를 추가합니다.

inventoryHtml: '.inventoryWrapper',

1. 같은 파일에서 $(selectors.SKU, this.$container).html(variant.sku);을 찾습니다. 바로 아래에 다음 코드를 추가합니다.

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $('.inventoryWrapper').html(inventoryHtml);
} else {
    $('.inventoryWrapper').html("");
}

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 ${variantStock[variant.id]}를 포함해야 합니다..

1. 저장을 클릭합니다.

Narrative

Narrative용 단계

편집 theme.liquid

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
3. 레이아웃 디렉토리에서 theme.liquid를 엽니다.
4. 코드에서 닫는 </head> 태그를 찾습니다. 닫는 </head> 태그 위쪽 새 행에 다음 코드를 붙여넣습니다.

<script>
      var variantStock = {};
    </script>

1. 저장을 클릭합니다.

product-template.liquid 편집 또는 featured-product.liquid

1. 섹션 디렉토리에서 product-template.liquid 또는 featured-product.liquid를 엽니다.

   • product-template.liquid를 열어 이 기능을 제품 페이지에 추가합니다.
   • featured-product.liquid를 열어 이 기능을 홈페이지의 추천 제품 섹션에 추가합니다.

2. {% include 'product-form' %}를 찾습니다. 이 태그 위에 다음 코드를 추가합니다.

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
      {% endif %}
</div>

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 {{current_variant.inventory_quantity }}를 포함해야 합니다..

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

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. 저장을 클릭합니다.

편집 custom.js

1. custom.js을(를) 엽니다.
2. 파일 맨 아래에 다음 코드를 추가합니다.

var sections = window.theme.sections;
    var inventorySelectorHtml = '.inventoryWrapper';
    var productExtension = {
      init: function() {
          this.on('variant_change_successful', this._updateInventory.bind(this));
          this.on('variant_change_undefined', this._removeInventory.bind(this));
      },
      _removeInventory: function() {
    $(inventorySelectorHtml, this.container).html('');
      },
      _updateInventory: function(event, instance, product, variant) {
    if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      $(inventorySelectorHtml, this.container).html(`<p>Stock: ${variantStock[variant.id]}</p>`);
    } else {
      $(inventorySelectorHtml, this.container).html('');
    }
  }
};
    sections.extend('product-template', productExtension);
    sections.extend('featured-product', productExtension);

위의 코드는 Stock: x를 출력합니다. <p> 태그에 있는 콘텐츠를 조정하여 문구를 변경할 수 있습니다. <p> 태그에 ${variantStock[variant.id]}를 포함해야 합니다..

1. 저장을 클릭합니다.