Skjul utsolgte varianter

Denne siden ble skrevet ut den Mar 23, 2023. Gå til https://help.shopify.com/nb/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/hide-sold-out-variants for nyeste versjon.

Du kan forhindre kunder fra å velge utsolgte varianter ved å fjerne eller deaktivere disse variantene på produktsiden.

Begrensninger

Tilpasningene som er beskrevet på denne siden fungerer ikke for følgende tilfeller:

  • Produktene dine har mer enn ett produktalternativ
  • Du bruker Express-temaet og har produktsiden satt til å vise produkter i et overlegg

Seksjonerte og ikke-seksjonerte temaer

Velg tema

Trinnene for denne tilpasningen varierer avhengig av valgt tema. Klikk på knappen for temaet ditt før du følger anvisningene nedenfor:

Boundless

Trinnene for denne tilpasningen varierer avhengig av om du vil skjule utsolgte varianter fullstendig, eller bare deaktivere dem. Klikk på knappen for preferansen din før du følger instruksjonene under:

Skjul utsolgte varianter

Følg disse trinnene for å bruke tilpasningen for Boundless:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Deaktiver utsolgte varianter

Følg disse trinnene for å bruke tilpasningen for Boundless:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Brooklyn

Trinnene for denne tilpasningen varierer avhengig av om du vil skjule utsolgte varianter fullstendig, eller bare deaktivere dem. Klikk på knappen for preferansen din før du følger instruksjonene under:

Skjul utsolgte varianter

Følg disse trinnene for å bruke tilpasningen for Brooklyn:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Deaktiver utsolgte varianter

Følg disse trinnene for å bruke tilpasningen for Brooklyn:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Debut

Trinnene for denne tilpasningen varierer avhengig av om du vil skjule utsolgte varianter fullstendig, eller bare deaktivere dem. Klikk på knappen for preferansen din før du følger instruksjonene under:

Skjul utsolgte varianter

Følg disse trinnene for å bruke tilpasningen for Debut:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Deaktiver utsolgte varianter

Følg disse trinnene for å bruke tilpasningen for Debut:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Express

Trinnene for denne tilpasningen varierer avhengig av om du vil skjule utsolgte varianter fullstendig, eller bare deaktivere dem. Klikk på knappen for preferansen din før du følger instruksjonene under:

Skjul utsolgte varianter

Følg disse trinnene for å bruke tilpasningen i Express:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Oppsett-katalogen klikker du på theme.liquid.

  2. Finn koden </body>. Lim inn følgende kode på en egen linje etter koden over:

<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. Klikk på Lagre.

Deaktiver utsolgte varianter

Følg disse trinnene for å bruke tilpasningen i Express:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

<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. Klikk på Lagre.

Minimal

Trinnene for denne tilpasningen varierer avhengig av om du vil skjule utsolgte varianter fullstendig, eller bare deaktivere dem. Klikk på knappen for preferansen din før du følger instruksjonene under:

Skjul utsolgte varianter

Følg disse stegene for å bruke tilpasningen for Minimal:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Deaktiver utsolgte varianter

Følg disse stegene for å bruke tilpasningen for Minimal:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Narrative

Trinnene for denne tilpasningen varierer avhengig av om du vil skjule utsolgte varianter fullstendig, eller bare deaktivere dem. Klikk på knappen for preferansen din før du følger instruksjonene under:

Skjul utsolgte varianter

Følg disse stegene for å bruke tilpasningen for Narrative:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på custom.js.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Deaktiver utsolgte varianter

Følg disse stegene for å bruke tilpasningen for Narrative:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Simple

Trinnene for denne tilpasningen varierer avhengig av om du vil skjule utsolgte varianter fullstendig, eller bare deaktivere dem. Klikk på knappen for preferansen din før du følger instruksjonene under:

Skjul utsolgte varianter

Følg disse stegene for å bruke tilpasningen for Simple

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Deaktiver utsolgte varianter

Følg disse stegene for å bruke tilpasningen for Simple

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Supply

Trinnene for denne tilpasningen varierer avhengig av om du vil skjule utsolgte varianter fullstendig, eller bare deaktivere dem. Klikk på knappen for preferansen din før du følger instruksjonene under:

Skjul utsolgte varianter

Følg disse stegene for å bruke tilpasningen for Supply:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Deaktiver utsolgte varianter

Følg disse stegene for å bruke tilpasningen for Supply:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Venture

Trinnene for denne tilpasningen varierer avhengig av om du vil skjule utsolgte varianter fullstendig, eller bare deaktivere dem. Klikk på knappen for preferansen din før du følger instruksjonene under:

Skjul utsolgte varianter

Følg disse stegene for å bruke tilpasningen for Venture:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Deaktiver utsolgte varianter

Følg disse stegene for å bruke tilpasningen for Venture:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.

  2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Skjul utsolgte varianter

Hvis du bruker et ukategorisert tema, kan du følge disse trinnene for å skjule utsolgte varianter på produktsiden.

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.

  2. Gi den nye kodebiten navnet remove-sold-out:

Legg til ny kodebit

  1. I den nye kodebitfilen limer du inn følgende kode: 
{% 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. Klikk på Lagre.

  2. I Oppsett-katalogen klikker du på theme.liquid.

  3. Nesten på slutten av filen, rett før </body>-taggen, limer du inn følgende kode:

{% render 'remove-sold-out' %}
  1. Klikk på Lagre.

Deaktiver utsolgte varianter

Hvis du bruker et ukategorisert tema, kan du følge disse trinnene for å deaktivere utsolgte varianter. Variantene vises fortsatt på produktsiden, men de kan ikke velges.

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. Fra Shopify-appen trykker du på Butikk.

  2. I Salgskanal-seksjonen trykker du på Nettbutikk.

  3. Trykk på Redigere temaer.

  4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

  1. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.

  2. Gi den nye kodebiten navnet disable-sold-out:

  3. I den nye kodebitfilen limer du inn følgende kode:

{% 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. Klikk på Lagre.

  2. I Oppsett-katalogen klikker du på theme.liquid.

  3. Nesten på slutten av filen, rett før </body>-taggen, limer du inn følgende kode:

{% render 'disable-sold-out' %}

  1. Klikk på Lagre.

Er du klar til å begynne å selge med Shopify?

Prøv det gratis