Vis gjenværende lagerbeholdning av en variant på produktsider

Advarsel

Eldre temaer er ikke tilgjengelige i Theme Store. Eldre temaer har ikke funksjonene fra Shopifys Online Store 2.0-temaer, og Shopifys gratis eldre temaer mottar ikke oppdateringer ut over sikkerhetsrettelser.

Merk

Hvis du bruker et gratis tema fra Shopify, kan du kontakte Shopifys brukerstøtte for å få hjelp med denne veiledningen. Det krever 15 minutter med designtid. Finn ut mer om Shopify Design Policy.

Merk

Denne tilpasningen er for eldre Shopify-temaer, og gjelder ikke for Nettbutikk 2.0-temaer.

• Finn ut temaets arkitekturversjon
• Utforsk Online Store 2.0-tematilpasninger

Du kan legge inn en melding på produktsiden eller seksjonen med utvalgte produkter, som viser antall varer du har på lager når lagerbeholdningen av en produktvariant er lav. Du må aktivere lagersporing for produktet for at denne meldingen skal vises.

Trinnene for denne tilpasningen varierer avhengig av valgt tema. Klikk på knappen for ditt tema og følg instruksjonene.

Tips

Shopifys Supply-tema og Venture-tema inneholder allerede innstillingen Melding for å vise gjenværende antall. Du kan aktivere denne innstillingen fra temaredigeringsprogrammet.

Debut

Steg for Debut

Rediger theme.liquid

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, og klikk på knappen … > Rediger kode.
3. Fra Layout-katalogen åpner du theme.liquid.
4. Finn den avsluttende </head>-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende </head>-taggen:

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

1. Klikk på Lagre.

Rediger product-template.liquid eller featured-product.liquid

1. Fra Seksjoner-katalogen åpner du product-template.liquid eller featured-product.liquid:

   • Åpne product-template.liquid for å legge til denne funksjonen på produktsider.
   • Åpne featured-product.liquid for å legge til denne funksjonen i seksjonen for fremhevede produkter på startsiden.

2. Finn {% form 'product'. Legg til følgende kode over denne taggen:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med {{ current_variant.inventory_quantity }} i <p>-taggene.

1. Nederst i filen legger du til følgende kode:

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

1. Klikk på Lagre.

Rediger theme.js.liquid eller theme.js

Hvilke endringer du må gjøre i disse filene avhenger av hvilken Debut-versjon du bruker.

Versjon 17.8.0 og lavere

1. Åpne theme.js.liquid eller theme.js.
2. Finn theme.Product = (function(). Legg til følgende kode under this.selectors = {:

inventoryHtml: '.inventoryWrapper',

1. I samme fil, finn _updateAddToCart: function(evt) {. Legg til følgende kode rett nedenfor:

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

1. Finn if (variant.available) {. Legg til følgende kode før } else {-uttrykket:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med ${variantStock[variant.id]} i <p>-taggene.

1. Klikk på Lagre.

Versjon 17.9.0 og nyere

1. Åpne theme.js.liquid eller theme.js.
2. Finn theme.Product = (function(). Legg til følgende kode under this.selectors = {:

inventoryHtml: '.inventoryWrapper',

1. I samme fil, finn _setProductState: function(evt) {. Legg til følgende kode rett nedenfor:

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

1. I samme funksjon, finn if (!variant) {. Legg til følgende kode etter den avsluttende }-braketten:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med ${variantStock[variant.id]} i <p>-taggene.

1. Klikk på Lagre.

Brooklyn

Trinn for Brooklyn

Rediger theme.liquid

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, og klikk på knappen … > Rediger kode.
3. Fra Layout-katalogen åpner du theme.liquid.
4. Finn den avsluttende </head>-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende </head>-taggen:

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

1. Klikk på Lagre.

Rediger product-template.liquid eller featured-product.liquid

1. Fra Seksjoner-katalogen åpner du product-template.liquid eller featured-product.liquid:

   • Åpne product-template.liquid for å legge til denne funksjonen på produktsider.
   • Åpne featured-product.liquid for å legge til denne funksjonen i seksjonen for fremhevede produkter på startsiden.

2. Finn {% form 'product'. Legg til følgende kode over denne taggen:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med {{current_variant.inventory_quantity }} i <p>-taggene.

1. Nederst i filen legger du til følgende kode:

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

1. Klikk på Lagre.

Rediger theme.js.liquid eller theme.js

1. Åpne theme.js.liquid eller theme.js.
2. Finn theme.Product = (function(). Legg til følgende kode under this.selectors = {:

inventoryHtml: '.inventoryWrapper',

1. I samme fil, finn if (variant.available) {. Legg til følgende kode før } else {-uttrykket:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med ${variantStock[variant.id]} i <p>-taggene.

1. Klikk på Lagre.

Simple

Steg for Simple

Rediger theme.liquid

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, og klikk på knappen … > Rediger kode.
3. Fra Layout-katalogen åpner du theme.liquid.
4. Finn den avsluttende </head>-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende </head>-taggen:

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

1. Klikk på Lagre.

Rediger product-template.liquid eller featured-product.liquid

1. Fra Seksjoner-katalogen åpner du product-template.liquid eller featured-product.liquid:

   • Åpne product-template.liquid for å legge til denne funksjonen på produktsider.
   • Åpne featured-product.liquid for å legge til denne funksjonen i seksjonen for fremhevede produkter på startsiden.

2. Finn {% form 'product'. Legg til følgende kode over denne taggen:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med {{current_variant.inventory_quantity }} i <p>-taggene.

1. Nederst i filen legger du til følgende kode:

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

1. Klikk på Lagre.

Rediger theme.js.liquid eller theme.js

1. Åpne theme.js.liquid eller theme.js.
2. Finn theme.Product = (function(). Legg til følgende kode under this.selectors = {:

inventoryHtml: '.inventoryWrapper',

1. I samme fil, finn if (variant.available) {. Legg til følgende kode før } else {-uttrykket:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med ${variantStock[variant.id]} i <p>-taggene.

1. Klikk på Lagre.

Minimal

Steg for Minimal

Rediger theme.liquid

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, og klikk på knappen … > Rediger kode.
3. Fra Layout-katalogen åpner du theme.liquid.
4. Finn den avsluttende </head>-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende </head>-taggen:

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

1. Klikk på Lagre.

Rediger product-template.liquid eller featured-product.liquid

1. Fra Seksjoner-katalogen åpner du product-template.liquid eller featured-product.liquid:

   • Åpne product-template.liquid for å legge til denne funksjonen på produktsider.
   • Åpne featured-product.liquid for å legge til denne funksjonen i seksjonen for fremhevede produkter på startsiden.

2. Finn {% form 'product'. Legg til følgende kode over denne taggen:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med {{current_variant.inventory_quantity }} i <p>-taggene.

1. Nederst i filen legger du til følgende kode:

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

1. Klikk på Lagre.

Rediger theme.js.liquid eller theme.js

1. Åpne theme.js.liquid eller theme.js.
2. Finn theme.Product = (function(). Legg til følgende kode under this.selectors = {:

inventoryHtml: '.inventoryWrapper',

1. I samme fil, finn if (variant.available) {. Legg til følgende kode før } else {-uttrykket:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med ${variantStock[variant.id]} i <p>-taggene.

1. Klikk på Lagre.

Boundless

Steg for Boundless

Rediger theme.liquid

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, og klikk på knappen … > Rediger kode.
3. Fra Layout-katalogen åpner du theme.liquid.
4. Finn den avsluttende </head>-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende </head>-taggen:

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

1. Klikk på Lagre.

Rediger product-template.liquid eller featured-product.liquid

1. Fra Seksjoner-katalogen åpner du product-template.liquid eller featured-product.liquid:

   • Åpne product-template.liquid for å legge til denne funksjonen på produktsider.
   • Åpne featured-product.liquid for å legge til denne funksjonen i seksjonen for fremhevede produkter på startsiden.

2. Finn {% form 'product'. Legg til følgende kode over denne taggen:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med {{current_variant.inventory_quantity }} i <p>-taggene.

1. Nederst i filen legger du til følgende kode:

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

1. Klikk på Lagre.

Rediger theme.js.liquid eller theme.js

1. Åpne «theme.js.liquid» *eller *«theme.js».
2. Finn theme.Product = (function(). Legg til følgende kode under var selectors = {:

inventoryHtml: '.inventoryWrapper',

1. I samme fil, finn $(selectors.SKU, this.$container).html(variant.sku);. Legg til følgende kode rett nedenfor:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med ${variantStock[variant.id]} i <p>-taggene.

1. Klikk på Lagre.

Narrative

Steg for Narrative

Rediger theme.liquid

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, og klikk på knappen … > Rediger kode.
3. Fra Layout-katalogen åpner du theme.liquid.
4. Finn den avsluttende </head>-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende </head>-taggen:

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

1. Klikk på Lagre.

Rediger product-template.liquid eller featured-product.liquid

1. Fra Seksjoner-katalogen åpner du product-template.liquid eller featured-product.liquid:

   • Åpne product-template.liquid for å legge til denne funksjonen på produktsider.
   • Åpne featured-product.liquid for å legge til denne funksjonen i seksjonen for fremhevede produkter på startsiden.

2. Finn {% include 'product-form' %}. Legg til følgende kode over denne taggen:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med {{current_variant.inventory_quantity }} i <p>-taggene.

1. Nederst i filen legger du til følgende kode:

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

1. Klikk på Lagre.

Rediger custom.js

1. Åpne custom.js.
2. Nederst i filen legger du til følgende kode:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med ${variantStock[variant.id]} i <p>-taggene.

1. Klikk på Lagre.