Få dine kunder til at vælge en valgmulighed

Bemærk

Hvis du bruger et gratis tema fra Shopify, kan du muligvis kontakte Shopify Support for at få hjælp til denne vejledning. Det kræver 15 minutters designtid. Få mere at vide under Support til temaer.

Bemærk

Denne tilpasning er for ældre Shopify-temaer og gælder ikke for Online Store 2.0-temaer.

• Find dit temas arkitekturversion
• Se Online Store 2.0-tematilpasninger

Når en kunde besøger en produktside i din webshop, vælges den første tilgængelige variant som standard. Du kan bruge denne tilpasning til at deaktivere det automatiske valg af den første tilgængelige variant. På denne måde vil kunden blive bedt om at vælge en variant manuelt, før der vises en variant. )

Bemærk: Da denne tilpasning forhindrer, at varianter vælges som standard, vil dit tema muligvis ikke vise en produktpris, før kunden har foretaget sit valg. Dette er forventet adfærd, da produkter med varianter ikke har en tilgængelig pris. Den viste pris afgøres af kundens valg af variant.

Temaer med og uden sektioner

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

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

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

Sectioned themes

Vælg dit tema

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

Boundless

Trin for Boundless

Følg disse trin for at anvende tilpasningen til Boundless:

Rediger dit temas JavaScript-fil

Sådan ændrer du dit temas JavaScript-profil:

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

iPhone

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

Android

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

1. Klik på theme.js eller theme.js.liquid i mappen Aktiver.

2. Find koden initVariantSelectors. Find 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. Find følgende linje kode:

$(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. Klik på Gem.

Rediger din produktsideskabelon

Sådan redigerer du din produktsideskabelon:

1. Klik på product-template.liquid i mappen Afsnit.

2. Find følgende kode:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. Find følgende kode, og slet den:

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

1. Find koden {% schema %}. Indsæt følgende kode på en separat linje over dette:

{% 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. Klik på Gem.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indkøbskurven, så produkterne ikke vises som "Ikke tilgængelig", før et valg foretages.

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

iPhone

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

Android

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

1. Find det tema, du vil redigere, og klik derefter på Handlinger > Rediger standardtemaindhold.

2. I feltet Filtrer skal du begynde at skrive unavailable for at vise oversættelsen "Ikke tilgængelig".

3. Erstat teksten Ikke tilgængelig med Make a selection.

4. Klik på Gem.

Debut

Trin for Debut

Følg disse trin for at anvende tilpasningen til Debut:

Rediger dit temas JavaScript-fil

Sådan ændrer du dit temas JavaScript-profil:

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

iPhone

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

Android

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

1. Klik på theme.js eller theme.js.liquid i mappen Aktiver.

2. Tilføj 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. Find koden _updatePrice: function(variant). Udskift 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. Find koden this.currentVariant = variant;

this._updatePaymentButton(variant);

The result should look something like this:

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

1. Find koden _updateImages: function(variant). Udskift følgende kode:

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

with:

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

1. Find følgende kode lige herunder:

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

Replace it with:

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

1. Find koden _updateSKU: function(variant). Udskift følgende kode:

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

with:

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

1. Find koden _initVariants: function() {. Udskift 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. Find 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. Klik på Gem.

Rediger din produktsideskabelon

Sådan redigerer du din produktsideskabelon:

1. Klik på product-template.liquid i mappen Afsnit.

2. Find 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. Find følgende kode, og slet 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. Find 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. Find 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. Find 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. Find koden {% schema %}. Indsæt følgende kode på en separat linje over dette:

{% 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. Klik på Gem.

Rediger dit produktpriskodestykke

Sådan redigerer du kodestykket for produktprisen:

1. Klik på product-price.liquid i mappen Kodestykker.

2. Find 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.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indkøbskurven, så produkterne ikke vises som "Ikke tilgængelig", før et valg foretages.

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

iPhone

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

Android

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

1. Find det tema, du vil redigere, og klik derefter på Handlinger > Rediger standardtemaindhold.

2. I feltet Filtrer skal du begynde at skrive unavailable for at vise oversættelsen "Ikke tilgængelig".

3. Erstat teksten Ikke tilgængelig med Make a selection.

4. Klik på Gem.

Minimal

Trin for Minimal

Følg disse trin for at anvende tilpasningen til Minimal:

Rediger dit temas JavaScript-fil

Sådan ændrer du dit temas JavaScript-profil:

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

iPhone

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

Android

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

1. Klik på theme.js eller theme.js.liquid i mappen Aktiver.

2. Find koden initProductVariant: function() {. Find 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. Klik på Gem.

Rediger din produktsideskabelon:

Sådan redigerer du din produktsideskabelon:

1. Klik på product-template.liquid i mappen Afsnit.

2. Find følgende kode:

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign variant = product.selected_variant %}

1. Find følgende kode, og slet den:

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

1. Find alle forekomster af denne 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 %}

1. Find koden {% schema %}. Indsæt følgende kode på en separat linje over dette:

{% 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. Klik på Gem.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indkøbskurven, så produkterne ikke vises som "Ikke tilgængelig", før et valg foretages.

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

iPhone

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

Android

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

1. Find det tema, du vil redigere, og klik derefter på Handlinger > Rediger standardtemaindhold.

2. I feltet Filtrer skal du begynde at skrive unavailable for at vise oversættelsen "Ikke tilgængelig".

3. Erstat teksten Ikke tilgængelig med Make a selection.

4. Klik på Gem.

Narrative

Trin for Narrative

Følg disse trin for at anvende tilpasningen til Narrative:

Rediger dit temas JavaScript-fil

Sådan ændrer du dit temas JavaScript-profil:

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

iPhone

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

Android

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

1. Klik på custom.js i mappen Aktiver.

2. Tilføj 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. Klik på Gem.

Rediger din produktsideskabelon

Sådan redigerer du din produktsideskabelon:

1. Klik på product-template.liquid i mappen Afsnit.

2. Find 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. Find koden {% schema %}. Indsæt følgende kode på en separat linje over dette:

{% 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. Klik på Gem.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indkøbskurven, så produkterne ikke vises som "Ikke tilgængelig", før et valg foretages.

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

iPhone

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

Android

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

1. Find det tema, du vil redigere, og klik derefter på Handlinger > Rediger standardtemaindhold.

2. I feltet Filtrer skal du begynde at skrive unavailable for at vise oversættelsen "Ikke tilgængelig".

3. Erstat teksten Ikke tilgængelig med Make a selection.

4. Klik på Gem.

Simple

Trin for Simple

Følg disse trin for at anvende tilpasningen til Simple:

Rediger dit temas JavaScript-fil

Sådan ændrer du dit temas JavaScript-profil:

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

iPhone

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

Android

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

1. Klik på theme.js eller theme.js.liquid i mappen Aktiver.

2. Find koden initProductVariant: function() {. Find 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. Klik på Gem.

Rediger din produktsideskabelon

Sådan redigerer du din produktsideskabelon:

1. Klik på product-template.liquid i mappen Afsnit.

2. Find følgende kode:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. Find følgende kode, og slet den:

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

1. Find koden {% schema %}. Indsæt følgende kode på en separat linje over dette:

{% 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. Klik på Gem.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indkøbskurven, så produkterne ikke vises som "Ikke tilgængelig", før et valg foretages.

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

iPhone

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

Android

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

1. Find det tema, du vil redigere, og klik derefter på Handlinger > Rediger standardtemaindhold.

2. I feltet Filtrer skal du begynde at skrive unavailable for at vise oversættelsen "Ikke tilgængelig".

3. Erstat teksten Ikke tilgængelig med Make a selection.

4. Klik på Gem.

Supply

Trin for Supply

Følg disse trin for at anvende tilpasningen til Supply:

Rediger dit temas JavaScript-fil

Sådan ændrer du dit temas JavaScript-profil:

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

iPhone

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

Android

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

1. Klik på theme.js eller theme.js.liquid i mappen Aktiver.

2. Find koden initProductVariant: function() {. Find 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. Klik på Gem.

Rediger din produktsideskabelon

Sådan redigerer du din produktsideskabelon:

1. Klik på product-template.liquid i mappen Afsnit.

2. Find følgende kode:

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign variant = product.selected_variant %}

1. Find følgende kode, og slet den:

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

1. Find alle forekomster af denne kode:

{% 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. Find koden {% schema %}. Indsæt følgende kode på en separat linje over dette:

{% 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. Klik på Gem.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indkøbskurven, så produkterne ikke vises som "Ikke tilgængelig", før et valg foretages.

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

iPhone

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

Android

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

1. Find det tema, du vil redigere, og klik derefter på Handlinger > Rediger standardtemaindhold.

2. I feltet Filtrer skal du begynde at skrive unavailable for at vise oversættelsen "Ikke tilgængelig".

3. Erstat teksten Ikke tilgængelig med Make a selection.

4. Klik på Gem.

Venture

Trin for Venture

Følg disse trin for at anvende tilpasningen til Venture:

Rediger dit temas JavaScript-fil

Sådan ændrer du dit temas JavaScript-profil:

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

iPhone

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

Android

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

1. Klik på theme.js eller theme.js.liquid i mappen Aktiver.

2. Tilføj 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. Find følgende kode:

this.currentVariant = this._getVariantFromOptions();

Replace it with:

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

1. Find koden _updatePrice: function(variant). Udskift 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. Klik på Gem.

Rediger din produktsideskabelon

Sådan redigerer du din produktsideskabelon:

1. Klik på product-template.liquid i mappen Afsnit.

2. Find 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. Find følgende kode, og slet 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. Find alle forekomster af denne kode:

{% unless current_variant.available %}

Replace it with:

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

1. Find 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. Find koden {% schema %}. Indsæt følgende kode på en separat linje over dette:

{% 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. Klik på Gem.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indkøbskurven, så produkterne ikke vises som "Ikke tilgængelig", før et valg foretages.

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

iPhone

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

Android

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

1. Find det tema, du vil redigere, og klik derefter på Handlinger > Rediger standardtemaindhold.

2. I feltet Filtrer skal du begynde at skrive unavailable for at vise oversættelsen "Ikke tilgængelig".

3. Erstat teksten Ikke tilgængelig med Make a selection.

4. Klik på Gem.

Non-sectioned themes

Tilføj prompter i dine variantrullemenuer

Sådan tilføjer du prompter i dine variantrullemenuer:

1. Klik på Opret et nyt kodestykke i mappen Kodestykker.

2. Navngiv dit nye kodestykke pick-an-option.

3. I dit nye kodestykke skal du indsætte denne kode er hosted på GitHub.

4. Klik på Gem.

5. I mappen Layout skal du klikke på theme.liquid.

6. Find det afsluttende </body>-tag tæt på bunden af filen. Indsæt følgende kode på en ny linje lige over det afsluttende </body>-tag:

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

1. Klik på Gem.

2. Find filen, der indeholder Læg i indkøbskurven-formularen. Den vil have en action-attribut, der er indstillet til /cart/add.

3. Find denne kode inde i formularen:

<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. Find og erstat 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. Klik på Gem.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indkøbskurven, så produkterne ikke vises som "Ikke tilgængelig", før et valg foretages.

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

iPhone

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

Android

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.

1. Find det tema, du vil redigere, og klik derefter på Handlinger > Rediger standardtemaindhold.

2. I feltet Filtrer skal du begynde at skrive unavailable for at vise oversættelsen "Ikke tilgængelig".

3. Erstat teksten Ikke tilgængelig med Make a selection.

4. Klik på Gem.