Få kundene til å velge et alternativ

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

Når en kunde besøker en produktside i nettbutikken, velges den første tilgjengelige varianten som standard. Du kan bruke tilpasningen Få kundene til å velge et alternativ for å deaktivere automatisk valg av den første tilgjengelige varianten. På denne måten blir kunden bedt om å velge en variant manuelt før noe vises.

Hvis du bruker tilpasningen Få kundene til å velge et alternativ, kan det hende at temaet ditt ikke viser en produktpris før kunden har valgt en variant. Produkter med varianter har ikke en fremhevet pris, og prisen som vises, avgjøres av hvilken variant som velges.

Seksjonerte og ikke-seksjonerte temaer

Merk

Trinnene i denne opplæringen varierer avhengig av om du bruker et kategorisert eller et ukategorisert tema. Et kategorisert tema lar deg dra og slippe for å sortere layouten på startsiden, noe du ikke kan gjøre med et ukategorisert tema.

For å finne ut om temaet ditt støtter seksjoner kan du gå til temaets Rediger kode-side. Hvis det er filer i Seksjoner-katalogen, bruker du et tema med seksjoner. Temaer uten seksjoner ble utgitt før oktoper 2016 og har ingen filer i Seksjoner-katalogen.

Hvis du bruker et tema med seksjoner, klikker du på Seksjonerte temaer-knappen og følger anvisningene. Hvis du bruker et eldre tema uten seksjoner, klikker du på Ikke-sesksjonerte temaer knappen og følger anvisningen.

Trinn for kategoriserte 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

Steg for Boundless

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

Rediger temaets JavaScript-fil

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
3. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.
4. Finn koden initVariantSelectors. Finn følgende kode nedenfor:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

Legg til følgende kode på en ny linje under:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Den skal se omtrent slik ut:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Finn følgende kodelinje:

$(selectors.addToCartText).html(theme.strings.soldOut);

Det er to forekomster av denne kodelinjen, begge ligger i productVariantCallback-funksjonen. Erstatt bare den andre forekomsten med:

$(selectors.addToCartText).html('Make a Selection');

1. Klikk på Lagre.

Merk

Noen versjoner av Boundless inkluderer ikke kodelinjen som skal erstattes i dette trinnet. Hvis du ikke finner koden, kan du gå videre til neste steg.

Rediger produktsidemalen

Slik redigerer du produktsidemalen

1. I Deler-katalogen klikker du på product-template.liquid.
2. Finn følgende kode:

{% assign current_variant = product.selected_or_first_available_variant %}

Erstatt det med:

{% assign current_variant = product.selected_variant %}

1. Finn følgende kode og slett den:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Finn koden {% schema %}. Lim inn følgende kode på en egen linje etter koden over:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Den skal se omtrent slik ut:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Klikk på Lagre.

Endre språkinnstillingene for Legg i handlekurv-knappen.

Du kan endre språkinnstillingene for knappen Legg i handlekurv, slik at produkter ikke vises som Utilgjengelig før en kunde har valgt et produkt.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
3. Begynn å skrive unavailable i søkefeltet Filtrer varer for å vise oversettelsen Unavailable.
4. Erstatt teksten Unavailable med Gjør et valg.
5. Klikk på Lagre.

Debut

Steg for Debut

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

Rediger temaets JavaScript-fil

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
3. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.
4. Lim følgende kode nederst i filen:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Finn koden _updatePrice: function(variant). Erstatt følgende kode:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
}

med:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
} */

Hvis du ikke finner koden ovenfor, finner du følgende kode:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

Erstatt det med:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

1. Finn koden this.currentVariant = variant;

Legg til følgende kode under:

this._updatePaymentButton(variant);

Resultatet skal se omtrent slik ut:

this.currentVariant = variant;
this._updatePaymentButton(variant);

1. Finn koden _updateImages: function(variant). Erstatt følgende kode:

var currentVariantImage = this.currentVariant.featured_image || {};

med:

if (this.currentVariant != undefined) {
  var currentVariantImage = this.currentVariant.featured_image || {};
}

1. Rett nedenfor finner du følgende kode:

if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
}

Erstatt det med:

/* if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
} */

1. Finn koden _updateSKU: function(variant). Erstatt følgende kode:

if (variant.sku === this.currentVariant.sku) {
  return;
}

med:

if (this.currentVariant != undefined ) {
  if (variant.sku === this.currentVariant.sku) {
    return;
  }
}

1. Finn koden _initVariants: function() {. Erstatt følgende kode:

if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
}

med:

/* if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */

Merk

Denne koden må bare erstattes i Debut versjon 17.5.0 og nyere.

1. Finn følgende kode:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

Legg til følgende kode på en ny linje under koden ovenfor:

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

Den skal se omtrent slik ut:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

1. Klikk på Lagre.

Rediger produktsidemalen

Slik redigerer du produktsidemalen

1. I Deler-katalogen klikker du på product-template.liquid.
2. Finn følgende kode:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Erstatt det med:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else %}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif %}

1. Finn følgende kode og slett den:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Hvis du ikke finner koden ovenfor, må du finne følgende kode og slette den:

{%- if variant == current_variant %} selected="selected" {%- endif -%}

1. Finn følgende kode:

{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}

Erstatt det med:

{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

Hvis du ikke finner koden ovenfor, må du finne følgende kode:

{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

Erstatt det med:

{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}

Merk

Enkelte versjoner av Debut inneholder ikke kodelinjen som skal skiftes ut i dette trinnet. Hvis du ikke finner koden, kan du gå videre til neste steg.

1. Finn følgende kode:

{% unless current_variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Erstatt det med:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% elsif current_variant.available %}
  {{ 'products.product.add_to_cart' | t }}
{% else %}
  {{ 'products.product.sold_out' | t }}
{% endif %}

1. Finn følgende kode:

{% if section.settings.enable_payment_button %}
  {{ form | payment_button }}
{% endif %}

Erstatt det med:

<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
  {% if section.settings.enable_payment_button %}
    {{ form | payment_button }}
  {% endif %}
</div>

1. Finn koden {% schema %}. Lim inn følgende kode på en egen linje etter koden over:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Den skal se omtrent slik ut:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Klikk på Lagre.

Endre produktpriskodebiten

For å redigere kodebiten for produktpris:

1. I Kodesnutter-katalogen klikker du på product-price.liquid.
2. Finn følgende kode:

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif

  assign money_price = price | money
-%}

Erstatt det med:

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  elsif product.title
    assign compare_at_price = product.compare_at_price
    assign price = product.price
    assign available = product.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif

  assign money_price = price | money
-%}

Merk

Enkelte versjoner av Debut inneholder ikke kodelinjen som skal skiftes ut i dette trinnet. Hvis du ikke finner koden, kan du gå videre til neste steg.

Endre språkinnstillingene for Legg i handlekurv-knappen.

Du kan endre språkinnstillingene for knappen Legg i handlekurv, slik at produkter ikke vises som Utilgjengelig før en kunde har valgt et produkt.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
3. Begynn å skrive unavailable i søkefeltet Filtrer varer for å vise oversettelsen Unavailable.
4. Erstatt teksten Unavailable med Gjør et valg.
5. Klikk på Lagre.

Minimal

Steg for Minimal

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

Rediger temaets JavaScript-fil

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
3. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.
4. Finn koden initProductVariant: function() {. Finn følgende kode nedenfor:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

Legg til følgende kode på en ny linje under:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Den skal se omtrent slik ut:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Klikk på Lagre.

Rediger produktsidemalen

Slik redigerer du produktsidemalen

1. I Deler-katalogen klikker du på product-template.liquid.
2. Finn følgende kode:

{% assign variant = product.selected_or_first_available_variant %}

Erstatt det med:

{% assign variant = product.selected_variant %}

1. Finn følgende kode og slett den:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Finn alle forekomster av denne koden:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Erstatt dem med:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. Finn koden {% schema %}. Lim inn følgende kode på en egen linje etter koden over:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Den skal se omtrent slik ut:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Klikk på Lagre.

Endre språkinnstillingene for Legg i handlekurv-knappen.

Du kan endre språkinnstillingene for knappen Legg i handlekurv, slik at produkter ikke vises som Utilgjengelig før en kunde har valgt et produkt.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
3. Begynn å skrive unavailable i søkefeltet Filtrer varer for å vise oversettelsen Unavailable.
4. Erstatt teksten Unavailable med Gjør et valg.
5. Klikk på Lagre.

Narrative

Steg for Narrative

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

Rediger temaets JavaScript-fil

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
3. I Ressurser-katalogen klikker du på custom.js.
4. Lim følgende kode nederst i filen:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Klikk på Lagre.

Rediger produktsidemalen

Slik redigerer du produktsidemalen

1. I Deler-katalogen klikker du på product-template.liquid.
2. Finn følgende kode:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Erstatt det med:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else -%}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif -%}

1. Finn koden {% schema %}. Lim inn følgende kode på en egen linje etter koden over:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Den skal se omtrent slik ut:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Klikk på Lagre.

Endre språkinnstillingene for Legg i handlekurv-knappen.

Du kan endre språkinnstillingene for knappen Legg i handlekurv, slik at produkter ikke vises som Utilgjengelig før en kunde har valgt et produkt.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
3. Begynn å skrive unavailable i søkefeltet Filtrer varer for å vise oversettelsen Unavailable.
4. Erstatt teksten Unavailable med Gjør et valg.
5. Klikk på Lagre.

Simple

Steg for Simple

Følg disse stegene for å bruke tilpasningen for Simple

Rediger temaets JavaScript-fil

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
3. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.
4. Finn koden initProductVariant: function() {. Finn følgende kode nedenfor:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

Legg til følgende kode på en ny linje under:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Den skal se omtrent slik ut:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Klikk på Lagre.

Rediger produktsidemalen

Slik redigerer du produktsidemalen

1. I Deler-katalogen klikker du på product-template.liquid.
2. Finn følgende kode:

{% assign current_variant = product.selected_or_first_available_variant %}

Erstatt det med:

{% assign current_variant = product.selected_variant %}

1. Finn følgende kode og slett den:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Finn koden {% schema %}. Lim inn følgende kode på en egen linje etter koden over:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Den skal se omtrent slik ut:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Klikk på Lagre.

Endre språkinnstillingene for Legg i handlekurv-knappen.

Du kan endre språkinnstillingene for knappen Legg i handlekurv, slik at produkter ikke vises som Utilgjengelig før en kunde har valgt et produkt.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
3. Begynn å skrive unavailable i søkefeltet Filtrer varer for å vise oversettelsen Unavailable.
4. Erstatt teksten Unavailable med Gjør et valg.
5. Klikk på Lagre.

Supply

Steg for Supply

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

Rediger temaets JavaScript-fil

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
3. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.
4. Finn koden initProductVariant: function() {. Finn følgende kode nedenfor:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

Legg til følgende kode på en ny linje under:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Den skal se omtrent slik ut:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Klikk på Lagre.

Rediger produktsidemalen

Slik redigerer du produktsidemalen

1. I Deler-katalogen klikker du på product-template.liquid.
2. Finn følgende kode:

{% assign variant = product.selected_or_first_available_variant %}

Erstatt det med:

{% assign variant = product.selected_variant %}

1. Finn følgende kode og slett den:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Finn alle forekomster av denne koden:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Erstatt det med:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. Finn koden {% schema %}. Lim inn følgende kode på en egen linje etter koden over:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Den skal se omtrent slik ut:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Klikk på Lagre.

Endre språkinnstillingene for Legg i handlekurv-knappen.

Du kan endre språkinnstillingene for knappen Legg i handlekurv, slik at produkter ikke vises som Utilgjengelig før en kunde har valgt et produkt.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
3. Begynn å skrive unavailable i søkefeltet Filtrer varer for å vise oversettelsen Unavailable.
4. Erstatt teksten Unavailable med Gjør et valg.
5. Klikk på Lagre.

Venture

Steg for Venture

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

Rediger temaets JavaScript-fil

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
3. I Ressurser-katalogen klikker du på theme.js eller theme.js.liquid.
4. Lim følgende kode nederst i filen:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Finn følgende kode:

this.currentVariant = this._getVariantFromOptions();

Erstatt det med:

this.currentVariant = this._getVariantFromOptions() || {};

1. Finn koden _updatePrice: function(variant). Erstatt følgende kode:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

med:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

1. Klikk på Lagre.

Rediger produktsidemalen

Slik redigerer du produktsidemalen

1. I Deler-katalogen klikker du på product-template.liquid.
2. Finn følgende kode:

{% assign current_variant = product.selected_or_first_available_variant %}

Erstatt det med:

{% if product.variants.size > 1 %}
  {% assign current_variant = product.selected_variant %}
{% else %}
  {% assign current_variant = product.first_available_variant %}
{% endif %}

1. Finn følgende kode og slett den:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Hvis du ikke finner koden over, finner du denne koden og sletter den:

{% if variant == current_variant %} selected="selected" {% endif %}

1. Finn alle forekomster av denne koden:

{% unless current_variant.available %}

Erstatt det med:

{% unless current_variant.available or product.variants.size == 1 and variant.available %}

1. Finn følgende kode:

{% unless current_variant.available or product.variants.size == 1 and variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Erstatt det med:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% else %}
  {% unless current_variant.available or product.variants.size == 1 and variant.available %}
    {{ 'products.product.sold_out' | t }}
  {% else %}
    {{ 'products.product.add_to_cart' | t }}
  {% endunless %}
{% endif %}

1. Finn koden {% schema %}. Lim inn følgende kode på en egen linje etter koden over:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Den skal se omtrent slik ut:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Klikk på Lagre.

Endre språkinnstillingene for Legg i handlekurv-knappen.

Du kan endre språkinnstillingene for knappen Legg i handlekurv, slik at produkter ikke vises som Utilgjengelig før en kunde har valgt et produkt.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
3. Begynn å skrive unavailable i søkefeltet Filtrer varer for å vise oversettelsen Unavailable.
4. Erstatt teksten Unavailable med Gjør et valg.
5. Klikk på Lagre.

Trinn for ukategoriserte temaer

Legg til beskjeder i variantens rullegardinmenyer

1. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.
2. Gi den nye kodebiten navnet pick-an-option.
3. I den nye utdragsfilen limer du inn denne koden fra GitHub.
4. Klikk på Lagre.
5. I Oppsett-katalogen klikker du på theme.liquid.
6. Finn den avsluttende </body> taggen nesten nederst i filen. Lim inn følgende kode på en ny linje like over den avsluttende </body>-taggen:

{% render 'pick-an-option' %}

1. Klikk på Lagre.

2. Finn filen som inneholder skjemaet Legg i handlekurv. Skjemaet har en action-attributt satt til /cart/add. Den skal finnes i en av disse fire filene:

   • product.liquid-malen under Maler
   • theme.liquid-oppsett under Oppsett
   • product.liquid-utdraget under Utdrag
   • single-product.liquid-utdraget under Utdrag

3. Finn denne koden i skjemaet:

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Eller finn denne koden i skjemaet:

<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Erstatt koden med følgende kodeblokk:

<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Hvis du bruker Minimal, Pop eller Supply, må du finne alle forekomster av denne koden:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Erstatt koden med følgende kodeblokk:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

Hvis du bruker et annet eldre Shopify-tema, finner du denne koden:

{% assign current_variant = product.selected_or_first_available_variant %}

Erstatt koden med følgende kodeblokk:

{% assign current_variant = product.selected_variant %}

Klikk på Lagre.

Endre språkinnstillingene for Legg i handlekurv-knappen.

Du kan endre språkinnstillingene for knappen Legg i handlekurv, slik at produkter ikke vises som Utilgjengelig før en kunde har valgt et produkt.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
3. Begynn å skrive unavailable i søkefeltet Filtrer varer for å vise oversettelsen Unavailable.
4. Erstatt teksten Unavailable med Gjør et valg.
5. Klikk på Lagre.