Laat klanten een optie kiezen

Opmerking

Als je een gratis thema van Shopify gebruikt, kun je mogelijk contact opnemen met de Shopify-ondersteuning 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 onlinewinkel bezoeken, wordt de eerste beschikbare variant standaard geselecteerd. Je kunt deze aanpassing gebruiken om het automatisch selecteren van de eerste beschikbare variant uit te schakelen. Op die manier wordt de klant gevraagd om handmatig een variant te selecteren voordat deze wordt weergegeven.)

Opmerking

omdat met deze aanpassing wordt voorkomen dat een variant standaard wordt geselecteerd, toont je thema mogelijk geen productprijs totdat de klant een variant heeft geselecteerd. Dit is verwacht gedrag, omdat producten met varianten geen uitgelichte prijs hebben. De prijs die wordt weergegeven, wordt bepaald door de variant die is geselecteerd.

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.

Sectioned themes

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

Om het JavaScript-bestand van je thema te wijzigen:

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

2. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

1. Klik in de directory Assets op theme.js of theme.js.liquid.

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

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

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

Replace it with:

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

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

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

iPhone

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

Android

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

1. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.

2. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.

3. Vervang de tekst Niet beschikbaar om Make a selection.

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

Om het JavaScript-bestand van je thema te wijzigen:

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

2. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

1. Klik in de directory Assets op theme.js of theme.js.liquid.

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

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. Zoek de code this.currentVariant = variant;

this._updatePaymentButton(variant);

The result should look something like this:

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

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

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

with:

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

Replace it with:

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

with:

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

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

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

Replace it with:

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

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

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

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

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

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

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

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.

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.

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

iPhone

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

Android

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

1. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.

2. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.

3. Vervang de tekst Niet beschikbaar om Make a selection.

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

Om het JavaScript-bestand van je thema te wijzigen:

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

2. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

1. Klik in de directory Assets op theme.js of theme.js.liquid.

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

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

Replace it with:

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

Replace with:

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

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

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

iPhone

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

Android

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

1. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.

2. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.

3. Vervang de tekst Niet beschikbaar om Make a selection.

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

Om het JavaScript-bestand van je thema te wijzigen:

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

2. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

1. Klik in de directory Assets op custom.js.

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

Replace it with:

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

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

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

iPhone

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

Android

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

1. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.

2. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.

3. Vervang de tekst Niet beschikbaar om Make a selection.

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

Om het JavaScript-bestand van je thema te wijzigen:

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

2. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

1. Klik in de directory Assets op theme.js of theme.js.liquid.

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

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

Replace it with:

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

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

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

iPhone

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

Android

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

1. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.

2. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.

3. Vervang de tekst Niet beschikbaar om Make a selection.

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

Om het JavaScript-bestand van je thema te wijzigen:

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

2. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

1. Klik in de directory Assets op theme.js of theme.js.liquid.

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

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

Replace it with:

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

Replace it with:

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

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

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

iPhone

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

Android

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

1. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.

2. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.

3. Vervang de tekst Niet beschikbaar om Make a selection.

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

Om het JavaScript-bestand van je thema te wijzigen:

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

2. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Code bewerken.

1. Klik in de directory Assets op theme.js of theme.js.liquid.

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

Replace it with:

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

with:

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

Replace it with:

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

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

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

1. Zoek alle keren dat deze code voorkomt:

{% unless current_variant.available %}

Replace it with:

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

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

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

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

iPhone

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

Android

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

1. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.

2. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.

3. Vervang de tekst Niet beschikbaar om Make a selection.

4. Klik op Opslaan.

Non-sectioned themes

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.

3. Plak deze code die wordt gehost op GitHub in het nieuwe fragmentbestand.

4. Klik op Opslaan.

5. Klik in de directory Opmaak op theme.liquid.

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

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>

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

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

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

iPhone

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

Android

1. Tik in de Shopify-app op Winkel.
2. Tik in het gedeelte Verkoopkanalen op Blogberichten.
3. Tik op Thema's beheren.

1. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.

2. Typ unavailable in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.

3. Vervang de tekst Niet beschikbaar om Make a selection.

4. Klik op Opslaan.