Laat klanten een optie kiezen

Let op

Vintage thema's zijn niet beschikbaar in de Theme Store. Deze thema's hebben niet de functies die in de Online Store 2.0-thema's van Shopify zijn opgenomen en de gratis vintage thema's van Shopify krijgen alleen nog updates als dit voor de beveiliging nodig is.

Opmerking

Als je een gratis thema van Shopify gebruikt, kun je mogelijk contact opnemen met Shopify Support voor hulp bij deze tutorial. Hiervoor is 15 minuten ontwerptijd nodig. Zie Ondersteuning voor thema's voor meer informatie.

Opmerking

Deze aanpassing is voor vintage thema's van Shopify en is niet van toepassing op Online Store 2.0-thema's.

• Ontdek de architectuurversie van je thema
• Ontdek aanpassingen aan Online Store 2.0-thema

Wanneer klanten een productpagina in je webshop bezoeken, wordt standaard de eerste beschikbare variant geselecteerd. Met deze aanpassing deactiveer je het automatisch selecteren van de eerste beschikbare variant. Op die manier wordt de klant gevraagd om handmatig een variant te selecteren voordat deze wordt weergegeven.

Opmerking

Omdat je met deze aanpassing voorkomt dat een variant standaard wordt geselecteerd, geeft je thema mogelijk geen productprijs weer totdat de klant een variant selecteert. Dit is verwacht gedrag, omdat producten met varianten geen uitgelichte prijs hebben. De weergegeven prijs is afhankelijk van de geselecteerde variant.

Thema's met en zonder secties

Opmerking

de stappen in deze tutorial verschillen al naar gelang of je een thema met secties of zonder secties gebruikt. In een thema met secties kun je verslepen om de pagina-indeling van je homepage te bepalen en in een thema zonder secties kan dat niet.

Ga naar de pagina Code bewerken van je thema om erachter te komen of je thema secties ondersteunt. Gebruik een thema met secties als de directory Secties bestanden bevat. Thema's zonder secties werden gebruikt voor oktober 2016 en de directory Secties van deze thema's bevat geen bestanden.

Als je een sectiethema gebruikt, klik op de knop Sectiethema's en volg de instructies. Als je een ouder, niet-gesegmenteerd thema gebruikt, klik op de knop Thema's zonder secties en volg de instructies.

Stappen voor thema's met secties

Je thema selecteren

De stappen voor deze aanpassing variëren naargelang je thema. Klik op de knop voor je thema voordat je de onderstaande instructies volgt:

Boundless

Stappen voor Boundless

Volg deze stappen om de aanpassing toe te passen op Boundless:

Bewerk het JavaScript-bestand van je thema

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
3. Klik in de directory Assets op theme.js of theme.js.liquid.
4. Zoek de code initVariantSelectors. Zoek hieronder de volgende code:

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

Voeg de volgende code toe op een nieuwe regel hieronder:

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

Het ziet er als volgt uit:

// 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. Zoek de volgende coderegel:

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

Er zijn twee gevallen van deze coderegel, beide gevonden in de productVariantCallback functie. Vervang alleen de tweede instantie door:

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

1. Klik op Opslaan.

Opmerking

Sommige versies van Boundless bevatten geen coderegel die in deze stap vervangen moet worden. Ga verder met de volgende stap als je de code niet kunt vinden.

Bewerk je productpaginatemplate

Om je productpaginatemplate te bewerken:

1. Klik in de directory Secties op product-template.liquid.
2. Zoek de volgende code:

{% assign current_variant = product.selected_or_first_available_variant %}

Vervang door:

{% assign current_variant = product.selected_variant %}

1. Zoek de volgende code en verwijder deze:

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

1. Zoek de code {% schema %}. Plak de volgende code in een nieuwe regel daarboven:

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

Het ziet er als volgt uit:

{% 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 op Opslaan.

De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen

Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als 'Niet beschikbaar' voordat er een selectie wordt gemaakt.

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
3. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.
4. Vervang de tekst Niet beschikbaar om Make a selection.
5. Klik op Opslaan.

Debut

Stappen voor Debut

Volg deze stappen om de aanpassing toe te passen op Debut:

Bewerk het JavaScript-bestand van je thema

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
3. Klik in de directory Assets op theme.js of theme.js.liquid.
4. Voeg de volgende code toe aan het eind van het bestand:

(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. Zoek de code _updatePrice: function(variant). Vervang de volgende code:

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

met:

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

Als je de bovenstaande code niet kunt vinden, zoek dan de volgende code:

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

Vervang door:

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

1. Zoek de code this.currentVariant = variant;

Voeg hieronder de volgende code toe:

this._updatePaymentButton(variant);

Het resultaat zou er als volgt uit moeten zien:

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

1. Zoek de code _updateImages: function(variant). Vervang de volgende code:

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

met:

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

1. Zoek hieronder de volgende code:

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

Vervang door:

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

1. Zoek de code _updateSKU: function(variant). Vervang de volgende code:

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

met:

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

1. Zoek de code _initVariants: function() {. Vervang de volgende code:

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

met:

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

Opmerking

Deze code hoeft alleen vervangen te worden in Debut-versie 17.5.0 en hoger.

1. Zoek de volgende code:

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

Voeg de volgende code toe op een nieuwe regel, onder de bovenstaande 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');
  }
},

Het ziet er als volgt uit:

_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 op Opslaan.

Bewerk je productpaginatemplate

Om je productpaginatemplate te bewerken:

1. Klik in de directory Secties op product-template.liquid.
2. Zoek de volgende code:

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

Vervang door:

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

1. Zoek de volgende code en verwijder deze:

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

Als je de bovenstaande code niet kunt vinden, zoek je de volgende code en verwijder deze:

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

1. Zoek de volgende code:

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

Vervang door:

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

Als je de bovenstaande code niet kunt vinden, zoek je de volgende code:

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

Vervang door:

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

Opmerking

Sommige versies van Debut bevatten geen coderegel om te vervangen in deze stap. Ga verder met de volgende stap als je de code niet kunt vinden.

1. Zoek de volgende code:

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

Vervang door:

{% 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. Zoek de volgende code:

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

Vervang door:

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

1. Zoek de code {% schema %}. Plak de volgende code in een nieuwe regel daarboven:

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

Het ziet er als volgt uit:

{% 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 op Opslaan.

Het productprijsfragment bewerken

Om je productprijs-fragment te wijzigen:

1. Klik op product-price.liquid in de directory Fragmenten.
2. Zoek de volgende code:

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

Vervang door:

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

Opmerking

Sommige versies van Debut bevatten geen code om te vervangen in deze stap. Ga verder met de volgende stap als je de code niet kunt vinden.

De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen

Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als 'Niet beschikbaar' voordat er een selectie wordt gemaakt.

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
3. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.
4. Vervang de tekst Niet beschikbaar om Make a selection.
5. Klik op Opslaan.

Minimal

Stappen voor Minimal

Volg deze stappen om de aanpassing toe te passen op Minimal:

Bewerk het JavaScript-bestand van je thema

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
3. Klik in de directory Assets op theme.js of theme.js.liquid.
4. Zoek de code initProductVariant: function() {. Zoek hieronder de volgende code:

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

Voeg de volgende code toe op een nieuwe regel hieronder:

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

Het ziet er als volgt uit:

// 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 op Opslaan.

Bewerk je productpaginatemplate

Om je productpaginatemplate te bewerken:

1. Klik in de directory Secties op product-template.liquid.
2. Zoek de volgende code:

{% assign variant = product.selected_or_first_available_variant %}

Vervang door:

{% assign variant = product.selected_variant %}

1. Zoek de volgende code en verwijder deze:

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

1. Zoek alle keren dat deze code voorkomt:

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

Vervang dit door:

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

1. Zoek de code {% schema %}. Plak de volgende code in een nieuwe regel daarboven:

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

Het ziet er als volgt uit:

{% 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 op Opslaan.

De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen

Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als 'Niet beschikbaar' voordat er een selectie wordt gemaakt.

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
3. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.
4. Vervang de tekst Niet beschikbaar om Make a selection.
5. Klik op Opslaan.

Narrative

Stappen voor Narrative

Volg deze stappen om de aanpassing toe te passen op Narrative:

Bewerk het JavaScript-bestand van je thema

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
3. Klik in de directory Assets op custom.js.
4. Voeg de volgende code toe aan het eind van het bestand:

(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 op Opslaan.

Bewerk je productpaginatemplate

Om je productpaginatemplate te bewerken:

1. Klik in de directory Secties op product-template.liquid.
2. Zoek de volgende code:

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

Vervang door:

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

1. Zoek de code {% schema %}. Plak de volgende code in een nieuwe regel daarboven:

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

Het ziet er als volgt uit:

{% 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 op Opslaan.

De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen

Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als 'Niet beschikbaar' voordat er een selectie wordt gemaakt.

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
3. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.
4. Vervang de tekst Niet beschikbaar om Make a selection.
5. Klik op Opslaan.

Simple

Stappen voor Simple

Volg deze stappen om de aanpassing toe te passen op Simple:

Bewerk het JavaScript-bestand van je thema

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
3. Klik in de directory Assets op theme.js of theme.js.liquid.
4. Zoek de code initProductVariant: function() {. Zoek hieronder de volgende code:

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

Voeg de volgende code toe op een nieuwe regel hieronder:

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

Het ziet er als volgt uit:

// 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 op Opslaan.

Bewerk je productpaginatemplate

Om je productpaginatemplate te bewerken:

1. Klik in de directory Secties op product-template.liquid.
2. Zoek de volgende code:

{% assign current_variant = product.selected_or_first_available_variant %}

Vervang door:

{% assign current_variant = product.selected_variant %}

1. Zoek de volgende code en verwijder deze:

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

1. Zoek de code {% schema %}. Plak de volgende code in een nieuwe regel daarboven:

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

Het ziet er als volgt uit:

{% 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 op Opslaan.

De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen

Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als 'Niet beschikbaar' voordat er een selectie wordt gemaakt.

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
3. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.
4. Vervang de tekst Niet beschikbaar om Make a selection.
5. Klik op Opslaan.

Supply

Stappen voor Supply

Volg deze stappen om de aanpassing toe te passen op Supply:

Bewerk het JavaScript-bestand van je thema

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
3. Klik in de directory Assets op theme.js of theme.js.liquid.
4. Zoek de code initProductVariant: function() {. Zoek hieronder de volgende code:

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

Voeg de volgende code toe op een nieuwe regel hieronder:

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

Het ziet er als volgt uit:

// 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 op Opslaan.

Bewerk je productpaginatemplate

Om je productpaginatemplate te bewerken:

1. Klik in de directory Secties op product-template.liquid.
2. Zoek de volgende code:

{% assign variant = product.selected_or_first_available_variant %}

Vervang door:

{% assign variant = product.selected_variant %}

1. Zoek de volgende code en verwijder deze:

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

1. Zoek alle keren dat deze code voorkomt:

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

Vervang door:

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

1. Zoek de code {% schema %}. Plak de volgende code in een nieuwe regel daarboven:

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

Het ziet er als volgt uit:

{% 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 op Opslaan.

De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen

Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als 'Niet beschikbaar' voordat er een selectie wordt gemaakt.

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
3. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.
4. Vervang de tekst Niet beschikbaar om Make a selection.
5. Klik op Opslaan.

Venture

Stappen voor Venture

Volg deze stappen om de aanpassing toe te passen op Venture:

Bewerk het JavaScript-bestand van je thema

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
3. Klik in de directory Assets op theme.js of theme.js.liquid.
4. Voeg de volgende code toe aan het eind van het bestand:

(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. Zoek de volgende code:

this.currentVariant = this._getVariantFromOptions();

Vervang door:

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

1. Zoek de code _updatePrice: function(variant). Vervang de volgende code:

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

met:

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

1. Klik op Opslaan.

Bewerk je productpaginatemplate

Om je productpaginatemplate te bewerken:

1. Klik in de directory Secties op product-template.liquid.
2. Zoek de volgende code:

{% assign current_variant = product.selected_or_first_available_variant %}

Vervang door:

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

1. Zoek de volgende code en verwijder deze:

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

Als je de bovenstaande code niet kunt vinden, zoek deze code en verwijder deze:

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

1. Zoek alle keren dat deze code voorkomt:

{% unless current_variant.available %}

Vervang door:

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

1. Zoek de volgende code:

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

Vervang door:

{% 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. Zoek de code {% schema %}. Plak de volgende code in een nieuwe regel daarboven:

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

Het ziet er als volgt uit:

{% 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 op Opslaan.

De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen

Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als 'Niet beschikbaar' voordat er een selectie wordt gemaakt.

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
3. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.
4. Vervang de tekst Niet beschikbaar om Make a selection.
5. Klik op Opslaan.

Stappen voor thema's zonder secties

Voeg termen toe aan je variantmenu's

Prompts toevoegen aan je vervolgkeuzelijsten voor varianten:

1. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.
2. Benoem je nieuwe fragment pick-an-option.

1. Plak deze code die wordt gehost op GitHub in het nieuwe fragmentbestand.
2. Klik op Opslaan.
3. Klik in de directory Opmaak op theme.liquid.
4. Zoek de sluitende tag </body> onderaan het bestand. Plak de volgende code op een nieuwe regel boven de sluitende tag </body>:

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

1. Klik op Opslaan.

2. Zoek het bestand met het formulier Aan winkelwagen toevoegen. Dit bevat het attribuut action dat is ingesteld op /cart/add. Dit zou in een van deze vier bestanden moeten staan:

   • het template product.liquid onder Templates
   • de opmaak theme.liquid onder Opmaak
   • het fragment product.liquid onder Fragmenten
   • het fragment single-product.liquid onder Fragmenten

3. Zoek deze code in het formulier:

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

of

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

Vervang door:

<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. Zoek en vervang de volgende code:
   • Minimal, Pop of Supply: Als je Minimal, Pop of Supply gebruikt, zoek dan alle instanties van deze code:

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

Vervang dit door:

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

• Andere gratis Shopify-thema's: Als je een ander Shopify-thema gebruikt, zoek dan deze code:

{% assign current_variant = product.selected_or_first_available_variant %}

Vervang door:

{% assign current_variant = product.selected_variant %}

1. Klik op Opslaan.

De taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen

Je kunt de taalinstellingen van de knop Toevoegen aan winkelwagen wijzigen zodat producten niet worden weergegeven als 'Niet beschikbaar' voordat er een selectie wordt gemaakt.

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken en klik op ... > Content van standaardthema bewerken.
3. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.
4. Vervang de tekst Niet beschikbaar om Make a selection.
5. Klik op Opslaan.