매진된 이형 상품 숨기기

주의

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

참고 사항

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

참고 사항

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

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

제품 페이지에서 해당 이형 상품을 제거하거나 비활성화하여 고객이 매진된 이형 상품을 선택하지 못하도록 할 수 있습니다.

제한 사항

이 페이지에 설명된 사용자 지정은 다음 경우에는 작동하지 않습니다.

• 제품에 두 가지 이상의 제품 옵션이 있는 경우
• Express 테마를 사용하며 오버레이에 제품을 표시하도록 제품 페이지가 설정된 경우

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

참고 사항

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

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

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

---

Sectioned themes

테마 선택

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

Boundless

Boundless

이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다. 기본 설정 버튼을 먼저 클릭하고 다음 지침을 따릅니다.

Hide

매진된 이형 상품 숨기기

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Disable

매진된 이형 상품 비활성화

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Brooklyn

Brooklyn

이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다. 기본 설정 버튼을 먼저 클릭하고 다음 지침을 따릅니다.

Hide

매진된 이형 상품 숨기기

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const radioButtons = section.querySelector('.single-option-radio');
            let variantOptions;

            if (radioButtons) {
              variantOptions = section.querySelectorAll('.single-option-radio input');
            } else {
              variantOptions = section.querySelectorAll('.single-option-selector__radio option');
            }

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    if (radioButtons) {
                      option.nextElementSibling.remove();
                    }

                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const radioButtons = section.querySelector('.single-option-radio');
            let variantOptions;

            if (radioButtons) {
              variantOptions = section.querySelectorAll('.single-option-radio input');
            } else {
              variantOptions = section.querySelectorAll('.single-option-selector__radio option');
            }

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    if (radioButtons) {
                      option.nextElementSibling.remove();
                    }

                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const radioButtons = section.querySelector('.single-option-radio');
            let variantOptions;

            if (radioButtons) {
              variantOptions = section.querySelectorAll('.single-option-radio input');
            } else {
              variantOptions = section.querySelectorAll('.single-option-selector__radio option');
            }

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    if (radioButtons) {
                      option.nextElementSibling.remove();
                    }

                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Disable

매진된 이형 상품 비활성화

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const radioButtons = section.querySelector('.single-option-radio');
            let variantOptions;

            if (radioButtons) {
              variantOptions = section.querySelectorAll('.single-option-radio input');
            } else {
              variantOptions = section.querySelectorAll('.single-option-selector__radio option');
            }

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    if (radioButtons) {
                      option.nextElementSibling.option.setAttribute('disabled', 'disabled');
                    }

                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const radioButtons = section.querySelector('.single-option-radio');
            let variantOptions;

            if (radioButtons) {
              variantOptions = section.querySelectorAll('.single-option-radio input');
            } else {
              variantOptions = section.querySelectorAll('.single-option-selector__radio option');
            }

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    if (radioButtons) {
                      option.nextElementSibling.option.setAttribute('disabled', 'disabled');
                    }

                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const radioButtons = section.querySelector('.single-option-radio');
            let variantOptions;

            if (radioButtons) {
              variantOptions = section.querySelectorAll('.single-option-radio input');
            } else {
              variantOptions = section.querySelectorAll('.single-option-selector__radio option');
            }

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    if (radioButtons) {
                      option.nextElementSibling.option.setAttribute('disabled', 'disabled');
                    }

                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Debut

Debut

이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다. 기본 설정 버튼을 먼저 클릭하고 다음 지침을 따릅니다.

Hide

매진된 이형 상품 숨기기

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Disable

매진된 이형 상품 비활성화

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Express

Express

이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다. 기본 설정 버튼을 먼저 클릭하고 다음 지침을 따릅니다.

Hide

매진된 이형 상품 숨기기

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 레이아웃 디렉토리에서 theme.liquid을(를) 클릭합니다.
4. </body> 코드를 찾습니다. 아래의 코드를 해당 코드 위의 행에 붙여넣습니다.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const productJson = document.querySelectorAll('[data-product-json]');

    if (productJson.length > 0) {
      for (let i = 0; i < productJson.length; i++) {
        const current = productJson[i];
        const section = current.closest('[data-section-id]');
        const currentJson = JSON.parse(current.text);

        if (currentJson.options.length === 1) {
          const unavailableVariants = [];

          for (let j = 0; j < currentJson.variants.length; j++) {
            const variant = currentJson.variants[j];

            if (!variant.available) {
              unavailableVariants.push(variant);
            }
          }

          if (unavailableVariants.length > 0) {
            const mutationCallback = function() {
              const variantOptions = section.querySelectorAll('.form__input--select option');

              if (variantOptions.length > 0) {
                for (let k = 0; k < unavailableVariants.length; k++) {
                  const unavailableVariant = unavailableVariants[k];

                  for (let l = 0; l < variantOptions.length; l++) {
                    const option = variantOptions[l];

                    if (unavailableVariant.title === option.value) {
                      option.remove();
                    }
                  }
                }

                if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                  observer.disconnect();
                }
              }
            }

            const observer = new MutationObserver(mutationCallback);
            const addToCartForm = document.querySelector('form[action*="/cart/add"]');

            mutationCallback();

            if (window.MutationObserver && addToCartForm.length) {
              const config = { childList: true, subtree: true };

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }

              observer.observe(addToCartForm, config);
            }
          }
        }
      }
    }
  });
</script>

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 레이아웃 디렉토리에서 theme.liquid을(를) 클릭합니다.
6. </body> 코드를 찾습니다. 아래의 코드를 해당 코드 위의 행에 붙여넣습니다.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const productJson = document.querySelectorAll('[data-product-json]');

    if (productJson.length > 0) {
      for (let i = 0; i < productJson.length; i++) {
        const current = productJson[i];
        const section = current.closest('[data-section-id]');
        const currentJson = JSON.parse(current.text);

        if (currentJson.options.length === 1) {
          const unavailableVariants = [];

          for (let j = 0; j < currentJson.variants.length; j++) {
            const variant = currentJson.variants[j];

            if (!variant.available) {
              unavailableVariants.push(variant);
            }
          }

          if (unavailableVariants.length > 0) {
            const mutationCallback = function() {
              const variantOptions = section.querySelectorAll('.form__input--select option');

              if (variantOptions.length > 0) {
                for (let k = 0; k < unavailableVariants.length; k++) {
                  const unavailableVariant = unavailableVariants[k];

                  for (let l = 0; l < variantOptions.length; l++) {
                    const option = variantOptions[l];

                    if (unavailableVariant.title === option.value) {
                      option.remove();
                    }
                  }
                }

                if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                  observer.disconnect();
                }
              }
            }

            const observer = new MutationObserver(mutationCallback);
            const addToCartForm = document.querySelector('form[action*="/cart/add"]');

            mutationCallback();

            if (window.MutationObserver && addToCartForm.length) {
              const config = { childList: true, subtree: true };

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }

              observer.observe(addToCartForm, config);
            }
          }
        }
      }
    }
  });
</script>

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 레이아웃 디렉토리에서 theme.liquid을(를) 클릭합니다.
6. </body> 코드를 찾습니다. 아래의 코드를 해당 코드 위의 행에 붙여넣습니다.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const productJson = document.querySelectorAll('[data-product-json]');

    if (productJson.length > 0) {
      for (let i = 0; i < productJson.length; i++) {
        const current = productJson[i];
        const section = current.closest('[data-section-id]');
        const currentJson = JSON.parse(current.text);

        if (currentJson.options.length === 1) {
          const unavailableVariants = [];

          for (let j = 0; j < currentJson.variants.length; j++) {
            const variant = currentJson.variants[j];

            if (!variant.available) {
              unavailableVariants.push(variant);
            }
          }

          if (unavailableVariants.length > 0) {
            const mutationCallback = function() {
              const variantOptions = section.querySelectorAll('.form__input--select option');

              if (variantOptions.length > 0) {
                for (let k = 0; k < unavailableVariants.length; k++) {
                  const unavailableVariant = unavailableVariants[k];

                  for (let l = 0; l < variantOptions.length; l++) {
                    const option = variantOptions[l];

                    if (unavailableVariant.title === option.value) {
                      option.remove();
                    }
                  }
                }

                if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                  observer.disconnect();
                }
              }
            }

            const observer = new MutationObserver(mutationCallback);
            const addToCartForm = document.querySelector('form[action*="/cart/add"]');

            mutationCallback();

            if (window.MutationObserver && addToCartForm.length) {
              const config = { childList: true, subtree: true };

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }

              observer.observe(addToCartForm, config);
            }
          }
        }
      }
    }
  });
</script>

1. 저장을 클릭합니다.

Disable

매진된 이형 상품 비활성화

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const productJson = document.querySelectorAll('[data-product-json]');

    if (productJson.length > 0) {
      for (let i = 0; i < productJson.length; i++) {
        const current = productJson[i];
        const section = current.closest('[data-section-id]');
        const currentJson = JSON.parse(current.text);

        if (currentJson.options.length === 1) {
          const unavailableVariants = [];

          for (let j = 0; j < currentJson.variants.length; j++) {
            const variant = currentJson.variants[j];

            if (!variant.available) {
              unavailableVariants.push(variant);
            }
          }

          if (unavailableVariants.length > 0) {
            const mutationCallback = function() {
              const variantOptions = section.querySelectorAll('.form__input--select option');

              if (variantOptions.length > 0) {
                for (let k = 0; k < unavailableVariants.length; k++) {
                  const unavailableVariant = unavailableVariants[k];

                  for (let l = 0; l < variantOptions.length; l++) {
                    const option = variantOptions[l];

                    if (unavailableVariant.title === option.value) {
                      option.setAttribute('disabled', 'disabled');
                    }
                  }
                }

                if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                  observer.disconnect();
                }
              }
            }

            const observer = new MutationObserver(mutationCallback);
            const addToCartForm = document.querySelector('form[action*="/cart/add"]');

            mutationCallback();

            if (window.MutationObserver && addToCartForm.length) {
              const config = { childList: true, subtree: true };

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }

              observer.observe(addToCartForm, config);
            }
          }
        }
      }
    }
  });
</script>

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const productJson = document.querySelectorAll('[data-product-json]');

    if (productJson.length > 0) {
      for (let i = 0; i < productJson.length; i++) {
        const current = productJson[i];
        const section = current.closest('[data-section-id]');
        const currentJson = JSON.parse(current.text);

        if (currentJson.options.length === 1) {
          const unavailableVariants = [];

          for (let j = 0; j < currentJson.variants.length; j++) {
            const variant = currentJson.variants[j];

            if (!variant.available) {
              unavailableVariants.push(variant);
            }
          }

          if (unavailableVariants.length > 0) {
            const mutationCallback = function() {
              const variantOptions = section.querySelectorAll('.form__input--select option');

              if (variantOptions.length > 0) {
                for (let k = 0; k < unavailableVariants.length; k++) {
                  const unavailableVariant = unavailableVariants[k];

                  for (let l = 0; l < variantOptions.length; l++) {
                    const option = variantOptions[l];

                    if (unavailableVariant.title === option.value) {
                      option.setAttribute('disabled', 'disabled');
                    }
                  }
                }

                if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                  observer.disconnect();
                }
              }
            }

            const observer = new MutationObserver(mutationCallback);
            const addToCartForm = document.querySelector('form[action*="/cart/add"]');

            mutationCallback();

            if (window.MutationObserver && addToCartForm.length) {
              const config = { childList: true, subtree: true };

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }

              observer.observe(addToCartForm, config);
            }
          }
        }
      }
    }
  });
</script>

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const productJson = document.querySelectorAll('[data-product-json]');

    if (productJson.length > 0) {
      for (let i = 0; i < productJson.length; i++) {
        const current = productJson[i];
        const section = current.closest('[data-section-id]');
        const currentJson = JSON.parse(current.text);

        if (currentJson.options.length === 1) {
          const unavailableVariants = [];

          for (let j = 0; j < currentJson.variants.length; j++) {
            const variant = currentJson.variants[j];

            if (!variant.available) {
              unavailableVariants.push(variant);
            }
          }

          if (unavailableVariants.length > 0) {
            const mutationCallback = function() {
              const variantOptions = section.querySelectorAll('.form__input--select option');

              if (variantOptions.length > 0) {
                for (let k = 0; k < unavailableVariants.length; k++) {
                  const unavailableVariant = unavailableVariants[k];

                  for (let l = 0; l < variantOptions.length; l++) {
                    const option = variantOptions[l];

                    if (unavailableVariant.title === option.value) {
                      option.setAttribute('disabled', 'disabled');
                    }
                  }
                }

                if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                  observer.disconnect();
                }
              }
            }

            const observer = new MutationObserver(mutationCallback);
            const addToCartForm = document.querySelector('form[action*="/cart/add"]');

            mutationCallback();

            if (window.MutationObserver && addToCartForm.length) {
              const config = { childList: true, subtree: true };

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }

              observer.observe(addToCartForm, config);
            }
          }
        }
      }
    }
  });
</script>

1. 저장을 클릭합니다.

Minimal

Minimal

이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다. 기본 설정 버튼을 먼저 클릭하고 다음 지침을 따릅니다.

Hide

매진된 이형 상품 숨기기

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Disable

매진된 이형 상품 비활성화

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Narrative

Narrative

이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다. 기본 설정 버튼을 먼저 클릭하고 다음 지침을 따릅니다.

Hide

매진된 이형 상품 숨기기

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 custom.js을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[data-product-json]');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const section = current.closest('[data-section-id]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 custom.js을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[data-product-json]');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const section = current.closest('[data-section-id]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 custom.js을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[data-product-json]');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const section = current.closest('[data-section-id]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Disable

매진된 이형 상품 비활성화

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[data-product-json]');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const section = current.closest('[data-section-id]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[data-product-json]');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const section = current.closest('[data-section-id]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[data-product-json]');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const section = current.closest('[data-section-id]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Simple

Simple

이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다. 기본 설정 버튼을 먼저 클릭하고 다음 지침을 따릅니다.

Hide

매진된 이형 상품 숨기기

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Disable

매진된 이형 상품 비활성화

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Supply

Supply

이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다. 기본 설정 버튼을 먼저 클릭하고 다음 지침을 따릅니다.

Hide

매진된 이형 상품 숨기기

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Disable

매진된 이형 상품 비활성화

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Venture

Venture

이 사용자 지정 단계는 매진된 이형 상품을 완전히 숨길지 아니면 단순히 비활성화할지 여부에 따라 달라집니다. 기본 설정 버튼을 먼저 클릭하고 다음 지침을 따릅니다.

Hide

매진된 이형 상품 숨기기

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Disable

매진된 이형 상품 비활성화

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
4. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 자산 디렉토리에서 theme.js 또는 theme.js.liquid을(를) 클릭합니다.
6. 파일 맨 아래에 다음 코드를 붙여넣습니다.

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

1. 저장을 클릭합니다.

Non-sectioned themes

매진된 이형 상품 숨기기

섹션 구분되지 않은 테마를 사용하는 경우 다음 단계를 수행하여 제품 페이지에서 매된진 이형 상품을 숨길 수 있습니다.

단계:

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
4. 새로운 코드 조각 이름 지정 remove-sold-out:

   

5. 새 코드 조각 파일에 다음 코드를 붙여 넣습니다.

{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.remove();
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}

1. 저장을 클릭합니다.
2. 레이아웃 디렉토리에서 theme.liquid을(를) 클릭합니다.
3. 파일 끝부분 근처에서 </body> 태그 바로 앞에 다음 코드를 붙여넣습니다.

{% render 'remove-sold-out' %}

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
6. 새로운 코드 조각 이름 지정 remove-sold-out:

   

7. 새 코드 조각 파일에 다음 코드를 붙여 넣습니다.

{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.remove();
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}

1. 저장을 클릭합니다.
2. 레이아웃 디렉토리에서 theme.liquid을(를) 클릭합니다.
3. 파일 끝부분 근처에서 </body> 태그 바로 앞에 다음 코드를 붙여넣습니다.

{% render 'remove-sold-out' %}

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
6. 새로운 코드 조각 이름 지정 remove-sold-out:

   

7. 새 코드 조각 파일에 다음 코드를 붙여 넣습니다.

{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.remove();
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}

1. 저장을 클릭합니다.
2. 레이아웃 디렉토리에서 theme.liquid을(를) 클릭합니다.
3. 파일 끝부분 근처에서 </body> 태그 바로 앞에 다음 코드를 붙여넣습니다.

{% render 'remove-sold-out' %}

1. 저장을 클릭합니다.

매진된 이형 상품 비활성화

섹션 구분되지 않은 테마를 사용하는 경우 다음 단계를 수행하여 매진된 이형 상품을 비활성화할 수 있습니다. 이형 상품은 여전히 제품 페이지에 표시되지만 선택할 수 없습니다.

단계:

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
4. 새로운 코드 조각 이름 지정 disable-sold-out:

   

5. 새 코드 조각 파일에 다음 코드를 붙여 넣습니다.

{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.setAttribute('disabled', '');
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}

1. 저장을 클릭합니다.
2. 레이아웃 디렉토리에서 theme.liquid을(를) 클릭합니다.
3. 파일 끝부분 근처에서 </body> 태그 바로 앞에 다음 코드를 붙여넣습니다.

{% render 'disable-sold-out' %}

1. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
6. 새로운 코드 조각 이름 지정 disable-sold-out:

   

7. 새 코드 조각 파일에 다음 코드를 붙여 넣습니다.

{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.setAttribute('disabled', '');
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}

1. 저장을 클릭합니다.
2. 레이아웃 디렉토리에서 theme.liquid을(를) 클릭합니다.
3. 파일 끝부분 근처에서 </body> 태그 바로 앞에 다음 코드를 붙여넣습니다.

{% render 'disable-sold-out' %}

1. 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
6. 새로운 코드 조각 이름 지정 disable-sold-out:

   

7. 새 코드 조각 파일에 다음 코드를 붙여 넣습니다.

{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.setAttribute('disabled', '');
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}

1. 저장을 클릭합니다.
2. 레이아웃 디렉토리에서 theme.liquid을(를) 클릭합니다.
3. 파일 끝부분 근처에서 </body> 태그 바로 앞에 다음 코드를 붙여넣습니다.

{% render 'disable-sold-out' %}

1. 저장을 클릭합니다.