Få kundene til å velge et alternativ

Advarsel

Eldre temaer er ikke tilgjengelige i Theme Store. Disse temaene har ikke funksjonene som er inkludert i 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 det hende du kan kontakte Shopify-brukerstøtte for hjelp med denne veiledningen. Det krever 15 minutters designtid. For å finne ut mer, kan du se _Støtte for temaer–.

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 denne tilpasningen for å deaktivere automatisk valg av den første tilgjengelige varianten. På den måten vil kunden bli bedt om å manuelt velge en variant før noe vises. )

Merk

Fordi denne tilpasningen hindrer en variant fra å bli valgt som standard, kan det være at temaet ditt ikke viser en produktpris før etter at kunden har valgt en variant. Dette er forventet atferd, fordi produkter med varianter ikke har en fremhevet pris. Prisen som vises avgjøres av varianten som er valgt.

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.

Sectioned themes

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

For å redigere temaets JavaScript-fil:

Datamaskin

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.

iPhone

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.

Android

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. 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);

Add the following code on a new line below:

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;
    }
  }
}

It should look something like this:

// 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);

There are *two instances* of this line of code, both found within the `productVariantCallback` function. Replace only the *second* instance with:

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

> Note:
> Some versions of Boundless do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.

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 %}

Replace it with:

{% 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 %}

It should look something like this:

{% 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 Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.

Datamaskin

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

iPhone

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

Android

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

1. Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.

2. I Filter-boksen, begynn å skrive unavailable for å vise oversettelsen for «Utilgjengelig».

3. Erstatt teksten Utilgjengelig med Make a selection.

4. Klikk på Lagre.

Debut

Steg for Debut

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

Rediger temaets JavaScript-fil

For å redigere temaets JavaScript-fil:

Datamaskin

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.

iPhone

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.

Android

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. 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;
}

with:

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

If you can't find the above code, then find the following code:

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

Replace it with:

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

1. Finn koden this.currentVariant = variant;

this._updatePaymentButton(variant);

The result should look something like this:

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

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

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

with:

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;
}

Replace it with:

/* 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;
}

with:

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);
}

with:

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

> Note:
> This code only needs to be replaced in Debut version 17.5.0 and above.

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
    })
  );
},

Add the following code, on a new line, below the above code:

_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');
  }
},

It should look something like this:

_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 -%}

Replace it with:

{%- 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 %}

If you can't find the code above, then find this code and delete it:

{%- 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 -%}

Replace it with:

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

If you can't find the code above, then find this code:

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

Replace it with:

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

> Note:
> Some versions of Debut do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.

1. Finn følgende kode:

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

Replace it with:

{% 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 %}

Replace it with:

<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 %}

It should look something like this:

{% 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
-%}

Replace it with:

{%- 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
-%}

> Note:
> Some versions of Debut do not include the code to be replaced in this step. If you can't find the code, then skip to the next step.

Endre språkinnstillingene for Legg i handlekurv-knappen.

Du kan endre språkinnstillingene for Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.

Datamaskin

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

iPhone

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

Android

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

1. Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.

2. I Filter-boksen, begynn å skrive unavailable for å vise oversettelsen for «Utilgjengelig».

3. Erstatt teksten Utilgjengelig med Make a selection.

4. Klikk på Lagre.

Minimal

Steg for Minimal

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

Rediger temaets JavaScript-fil

For å redigere temaets JavaScript-fil:

Datamaskin

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.

iPhone

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.

Android

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. 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();
}

Add the following code on a new line below:

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;
    }
  }
}

It should look something like this:

// 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 %}

Replace it with:

{% 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 %}

Replace with:

{% 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 %}

It should look something like this:

{% 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 Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.

Datamaskin

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

iPhone

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

Android

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

1. Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.

2. I Filter-boksen, begynn å skrive unavailable for å vise oversettelsen for «Utilgjengelig».

3. Erstatt teksten Utilgjengelig med Make a selection.

4. Klikk på Lagre.

Narrative

Steg for Narrative

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

Rediger temaets JavaScript-fil

For å redigere temaets JavaScript-fil:

Datamaskin

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.

iPhone

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.

Android

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. 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 -%}

Replace it with:

{%- 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 %}

It should look something like this:

{% 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 Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.

Datamaskin

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

iPhone

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

Android

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

1. Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.

2. I Filter-boksen, begynn å skrive unavailable for å vise oversettelsen for «Utilgjengelig».

3. Erstatt teksten Utilgjengelig med Make a selection.

4. Klikk på Lagre.

Simple

Steg for Simple

Følg disse stegene for å bruke tilpasningen for Simple

Rediger temaets JavaScript-fil

For å redigere temaets JavaScript-fil:

Datamaskin

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.

iPhone

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.

Android

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. 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);

Add the following code on a new line below:

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;
    }
  }
}

It should look something like this:

// 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 %}

Replace it with:

{% 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 %}

It should look something like this:

{% 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 Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.

Datamaskin

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

iPhone

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

Android

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

1. Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.

2. I Filter-boksen, begynn å skrive unavailable for å vise oversettelsen for «Utilgjengelig».

3. Erstatt teksten Utilgjengelig med Make a selection.

4. Klikk på Lagre.

Supply

Steg for Supply

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

Rediger temaets JavaScript-fil

For å redigere temaets JavaScript-fil:

Datamaskin

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.

iPhone

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.

Android

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. 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);

Add the following code on a new line below:

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;
    }
  }
}

It should look something like this:

// 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 %}

Replace it with:

{% 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 %}

Replace it with:

{% 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 %}

It should look something like this:

{% 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 Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.

Datamaskin

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

iPhone

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

Android

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

1. Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.

2. I Filter-boksen, begynn å skrive unavailable for å vise oversettelsen for «Utilgjengelig».

3. Erstatt teksten Utilgjengelig med Make a selection.

4. Klikk på Lagre.

Venture

Steg for Venture

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

Rediger temaets JavaScript-fil

For å redigere temaets JavaScript-fil:

Datamaskin

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.

iPhone

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.

Android

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. 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();

Replace it with:

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;
}

with:

/* 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 %}

Replace it with:

{% 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 %}

If you can't find the code above, then find this code and delete it:

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

1. Finn alle forekomster av denne koden:

{% unless current_variant.available %}

Replace it with:

{% 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 %}

Replace it with:

{% 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 %}

It should look something like this:

{% 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 Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.

Datamaskin

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

iPhone

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

Android

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

1. Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.

2. I Filter-boksen, begynn å skrive unavailable for å vise oversettelsen for «Utilgjengelig».

3. Erstatt teksten Utilgjengelig med Make a selection.

4. Klikk på Lagre.

Non-sectioned themes

Legg til beskjeder i variantens rullegardinmenyer

Slik legger du til beskjeder i rullegardinmenyene for varianter:

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.

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>

or

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

Replace it with:

<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>

1. Finn og erstatt følgende kode:

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

Replace with:

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

### Other free Shopify themes
If you use any other Shopify theme, then find this code:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. Klikk på Lagre.

Endre språkinnstillingene for Legg i handlekurv-knappen.

Du kan endre språkinnstillingene for Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.

Datamaskin

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

iPhone

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

Android

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Redigere temaer.

1. Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.

2. I Filter-boksen, begynn å skrive unavailable for å vise oversettelsen for «Utilgjengelig».

3. Erstatt teksten Utilgjengelig med Make a selection.

4. Klikk på Lagre.