Få dine kunder til at vælge en valgmulighed

Advarsel

Ældre temaer er ikke tilgængelige i temabutikken. Ældre temaer har ikke de funktioner, der er inkluderet i Shopifys Online Store 2.0-temaer, og Shopifys gratis ældre temaer modtager ikke opdateringer med undtagelse af sikkerhedsrettelser.

Bemærk

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

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 tilpasningen Få dine kunder til at vælge en valgmulighed for at deaktivere det automatiske valg af den første tilgængelige variant. På denne måde bliver kunden bedt om at vælge en variant manuelt, før der vises en variant.

Hvis du bruger tilpasningen Få dine kunder til at vælge en valgmulighed, vil dit tema muligvis ikke vise en produktpris, før kunden har valgt en variant. Produkter med varianter har ikke en tilgængelig pris, og den pris, der vises, afhænger af den variant, der vælges.

Temaer med og uden sektioner

Bemærk

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

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 sektioner, skal du klikke på knappen Tema med afsnit og følge vejledningen. Hvis du bruger et ældre tema uden afsnit, skal du klikke på knappen Tema uden afsnit og følge vejledningen.

Trin for temaer med afsnit

Vælg dit tema

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

Boundless

Trin for Boundless

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

Rediger dit temas JavaScript-fil

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

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

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

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

Tilføj følgende kode på en ny linje nedenfor:

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 = &#x27;an&#x27;;
};

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

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

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

Den bør se nogenlunde således ud:

// 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 = &#x27;an&#x27;;
};

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

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

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

1. Find følgende linje kode:

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

Der er to forekomster af denne kodelinje, som begge findes i productVariantCallback-funktionen. Erstat kun det andet eksempel med:

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

1. Klik på Gem.

Bemærk

Nogle versioner af Boundless inkluderer ikke den kodelinje, der skal erstattes i dette trin. Hvis du ikke kan finde koden, skal du gå videre til næste trin.

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

Udskift den med:

{% 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 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}

Den bør se nogenlunde således ud:

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

{% for option in product.options -%}
  var optionObj = {};
  optionObj[{{ forloop.index0 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  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 indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

4. Erstat teksten Ikke tilgængelig med Foretag et valg.

5. Klik på Gem.

Debut

Trin for Debut

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

Rediger dit temas JavaScript-fil

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

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

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

4. 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 = &#x27;an&#x27;;
  };

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

  if (options.length &#x3E; 1) {
    let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

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

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 kan finde den ovenstående kode, skal du finde følgende kode:

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

Udskift den med:

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

1. Find koden this.currentVariant = variant;

Tilføj følgende kode nedenfor:

this._updatePaymentButton(variant);

Resultatet bør se nogenlunde således ud:

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

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

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

med:

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

Udskift den med:

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

med:

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

med:

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

Bemærk

Denne kode skal kun erstattes i Debut version 17.5.0 og nyere.

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

Tilføj følgende kode på en ny linje under ovenstående kode:

_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 bør se nogenlunde således ud:

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

Udskift den med:

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

Hvis du ikke kan finde den ovenstående kode, skal du finde denne kode og slette den:

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

Udskift den med:

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

Hvis du ikke kan finde den ovenstående kode, skal du finde følgende kode:

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

Udskift den med:

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

Bemærk

Nogle versioner af Debut inkluderer ikke den kodelinje, der skal erstattes i dette trin. Hvis du ikke kan finde koden, skal du gå videre til næste trin.

1. Find følgende kode:

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

Udskift den 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. Find følgende kode:

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

Udskift den med:

<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 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}

Den bør se nogenlunde således ud:

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

{% for option in product.options -%}
  var optionObj = {};
  optionObj[{{ forloop.index0 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  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
-%}

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

Bemærk

Nogle versioner af Debut inkluderer ikke den kode, der skal erstattes i dette trin. Hvis du ikke kan finde koden, skal du gå videre til næste trin.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

4. Erstat teksten Ikke tilgængelig med Foretag et valg.

5. Klik på Gem.

Minimal

Trin for Minimal

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

Rediger dit temas JavaScript-fil

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

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

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

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

Tilføj følgende kode på en ny linje nedenfor:

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 = &#x27;an&#x27;;
};

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

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

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

Den bør se nogenlunde således ud:

// 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 = &#x27;an&#x27;;
};

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

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

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

Udskift den med:

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

Erstat med:

{% 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 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}

Den bør se nogenlunde således ud:

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

{% for option in product.options -%}
  var optionObj = {};
  optionObj[{{ forloop.index0 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  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 indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

4. Erstat teksten Ikke tilgængelig med Foretag et valg.

5. Klik på Gem.

Narrative

Trin for Narrative

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

Rediger dit temas JavaScript-fil

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

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

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

4. 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 = &#x27;an&#x27;;
  };

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

  if (options.length &#x3E; 1) {
    let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

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

Udskift den med:

{%- 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 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}

Den bør se nogenlunde således ud:

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

{% for option in product.options -%}
  var optionObj = {};
  optionObj[{{ forloop.index0 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  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 indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

4. Erstat teksten Ikke tilgængelig med Foretag et valg.

5. Klik på Gem.

Simple

Trin for Simple

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

Rediger dit temas JavaScript-fil

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

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

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

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

Tilføj følgende kode på en ny linje nedenfor:

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 = &#x27;an&#x27;;
};

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

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

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

Den bør se nogenlunde således ud:

// 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 = &#x27;an&#x27;;
};

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

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

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

Udskift den med:

{% 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 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}

Den bør se nogenlunde således ud:

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

{% for option in product.options -%}
  var optionObj = {};
  optionObj[{{ forloop.index0 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  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 indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

4. Erstat teksten Ikke tilgængelig med Foretag et valg.

5. Klik på Gem.

Supply

Trin for Supply

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

Rediger dit temas JavaScript-fil

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

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

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

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

Tilføj følgende kode på en ny linje nedenfor:

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 = &#x27;an&#x27;;
};

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

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

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

Den bør se nogenlunde således ud:

// 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 = &#x27;an&#x27;;
};

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

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

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

Udskift den med:

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

Udskift den med:

{% 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 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}

Den bør se nogenlunde således ud:

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

{% for option in product.options -%}
  var optionObj = {};
  optionObj[{{ forloop.index0 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  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 indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

4. Erstat teksten Ikke tilgængelig med Foretag et valg.

5. Klik på Gem.

Venture

Trin for Venture

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

Rediger dit temas JavaScript-fil

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

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

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

4. 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 = &#x27;an&#x27;;
  };

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

  if (options.length &#x3E; 1) {
    let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

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

1. Find følgende kode:

this.currentVariant = this._getVariantFromOptions();

Udskift den med:

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

med:

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

Udskift den med:

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

Hvis du ikke kan finde den ovenstående kode, skal du finde denne kode og slette den:

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

1. Find alle forekomster af denne kode:

{% unless current_variant.available %}

Udskift den med:

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

Udskift den 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. 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 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}

Den bør se nogenlunde således ud:

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

{% for option in product.options -%}
  var optionObj = {};
  optionObj[{{ forloop.index0 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  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 indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

4. Erstat teksten Ikke tilgængelig med Foretag et valg.

5. Klik på Gem.

Trin for temaer uden sektioner

Tilføj 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. Den skal være i en af disse fire filer:

   • product.liquid-skabelonen under Skabeloner
   • theme.liquid-layoutet under Layout
   • product.liquid-kodestykket under Kodestykker
   • single-product.liquid-kodestykket under Kodestykker

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>

Du kan også finde denne kode i formularen:

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

Erstat koden med følgende kodeblok:

<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 bruger Minimal, Pop eller Supply, skal du findealle forekomster af denne kode:

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

Erstat koden med følgende kodeblok:

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

Hvis du bruger et andet ældre Shopify-tema, skal du finde denne kode:

{% assign current_variant = product.selected_or_first_available_variant %}

Erstat koden med følgende kodeblok:

{% assign current_variant = product.selected_variant %}

Klik på Gem.

Skift sprogindstillingerne for Læg i indkøbskurven

Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.

Trin:

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

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

3. Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.

4. Erstat teksten Ikke tilgængelig med Foretag et valg.

5. Klik på Gem.