Skjul udsolgte varianter

Du kan forhindre, at dine kunder vælger udsolgte varianter, ved at fjerne eller deaktivere disse varianter på produktsiden.

Begrænsninger

De tilpasninger, der er angivet på denne side, virker ikke i følgende tilfælde:

  • Dine produkter har mere end én produktmulighed
  • Du bruger Express-temaet og har indstillet produktsiden til at vise produkter i overlejring

Temaer med og uden sektioner

Bemærk: Trinnene i denne vejledning er forskellige, afhængigt af om du bruger et tema med sektioner eller uden sektioner. Med et tema med sektioner kan du trække og slippe for at arrangere startsidens layout – det kan du ikke med et tema uden sektioner.

Du kan finde ud af, om dit tema understøtter sektioner, ved at gå til temaets side Rediger kode. Hvis der er filer i mappen Sektioner, bruger du et tema med sektioner. Temaer uden sektioner blev udgivet før oktober 2016 og har ikke filer i mappen Sektioner.

Hvis du bruger et tema med afsnit, skal du klikke på knappen Temaer med afsnit og følge instruktionerne. Hvis du bruger et ældre tema uden afsnit, skal du klikke på knappen Temaer uden afsnit og følge instruktionerne.

Trin for temaer med afsnit

Vælg dit tema

Trinnene til denne tilpasning varierer afhængigt af dit tema. Klik på knappen for dit tema, inden du følger vejledningen nedenfor:

Trin for temaer uden sektioner

Skjul udsolgte varianter

Hvis du bruger et tema uden sektioner, kan du følge disse trin for at skjule udsolgte varianter på produktsiden.

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, og klik på knappen for at åbne handlingsmenuen. Klik derefter på Rediger kode.
  3. Klik på Opret et nyt kodestykke i mappen Kodestykker.
  4. Navngiv dit nye kodestykke remove-sold-out:
    Add new snippet
  5. Indsæt følgende kode i din nye fil med kodestykket:
{% 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. Klik på Gem.
  2. I mappen Layout skal du klikke på theme.liquid.
  3. Indsæt følgende kode tæt på slutningen af filen lige før det afsluttende </body>-tag:
{% render 'remove-sold-out' %}
  1. Klik på Gem.

Deaktiver udsolgte varianter

Hvis du bruger et tema uden sektioner, kan du følge disse trin til at deaktivere udsolgte varianter. Varianterne vises stadig på produktsiden, men de kan ikke vælges.

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, og klik på knappen for at åbne handlingsmenuen. Klik derefter på Rediger kode.
  3. Klik på Opret et nyt kodestykke i mappen Kodestykker.
  4. Navngiv dit nye kodestykke disable-sold-out:
    Add new snippet
  5. Indsæt følgende kode i din nye fil med kodestykket:
{% 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. Klik på Gem.
  2. I mappen Layout skal du klikke på theme.liquid.
  3. Indsæt følgende kode tæt på slutningen af filen lige før det afsluttende </body>-tag:
{% render 'disable-sold-out' %}
  1. Klik på Gem.

Er du klar til at begynde at sælge med Shopify?

Prøv det gratis