Laat klanten een optie kiezen

Opmerking

Als je een gratis thema van Shopifygebruikt, kun je mogelijk contact opnemen met Shopify-ondersteuning voor hulp bij deze tutorial. Het vereist 15 minuten ontwerptijd. Voor meer informatie, zie Support voor themes.

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

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

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.

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:

   liquid {% assign current_variant = product.selected_or_first_available_variant %}

   Vervang door:

   liquid {% assign current_variant = product.selected_variant %}

3. Zoek de volgende code en verwijder deze:

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

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

   ''liquid {% if current_variant == blank %} {% endif %} '' Het ziet er als volgt uit: ''liquid {% if current_variant == blank %} {% 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;
}

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 te worden vervangen 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:

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

   Vervang door:

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

3. Zoek de volgende code en verwijder deze:

   liquid {% 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:

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

4. Zoek de volgende code:

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

   Vervang door:

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

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

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

   Vervang door:

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

Opmerking

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

1. Zoek de volgende code:

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

   Vervang door:

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

2. Zoek de volgende code:

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

   Vervang door:

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

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

   ''liquid {% if current_variant == blank %} {% endif %} '' Het ziet er als volgt uit: ''liquid {% if current_variant == blank %} {% 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 {%- 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 -%} ''' toe

      Vervang door:

      ''liquid {%- 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 (beschikbaar) toewijzen compare_at_price = 1999 wijs prijs toe = 1999 toewijzen beschikbaar = true endif

      assign money_price = price | money -%} ''' toe

   Opmerking

   Sommige versies van Debut bevatten geen coderegel die in deze stap vervangen moet worden. 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.

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

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:

   liquid {% assign variant = product.selected_or_first_available_variant %}

   Vervang door:

   liquid {% assign variant = product.selected_variant %}

3. Zoek de volgende code en verwijder deze:

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

4. Zoek alle keren dat deze code voorkomt:

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

   Vervang dit door:

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

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

   ''liquid {% if current_variant == blank %} {% endif %} '' Het ziet er als volgt uit: ''liquid {% if current_variant == blank %} {% 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:

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

   Vervang door:

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

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

   ''liquid {% if current_variant == blank %} {% endif %} '' Het ziet er als volgt uit: ''liquid {% if current_variant == blank %} {% 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);

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:

   liquid {% assign current_variant = product.selected_or_first_available_variant %}

   Vervang door:

   liquid {% assign current_variant = product.selected_variant %}

3. Zoek de volgende code en verwijder deze:

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

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

   ''liquid {% if current_variant == blank %} {% endif %} '' Het ziet er als volgt uit: ''liquid {% if current_variant == blank %} {% 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);

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:

   liquid {% assign variant = product.selected_or_first_available_variant %}

   Vervang door:

   liquid {% assign variant = product.selected_variant %}

3. Zoek de volgende code en verwijder deze:

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

4. Zoek alle keren dat deze code voorkomt:

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

   Vervang door:

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

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

   ''liquid {% if current_variant == blank %} {% endif %} '' Het ziet er als volgt uit: ''liquid {% if current_variant == blank %} {% 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();

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:

   liquid {% assign current_variant = product.selected_or_first_available_variant %}

   Vervang door:

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

3. Zoek de volgende code en verwijder deze:

   liquid {% 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:

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

4. Zoek alle keren dat deze code voorkomt:

   liquid {% unless current_variant.available %}

   Vervang door:

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

5. Zoek de volgende code:

   liquid {% 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:

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

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

   ''liquid {% if current_variant == blank %} {% endif %} '' Het ziet er als volgt uit: ''liquid {% if current_variant == blank %} {% 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 vervolgkeuzemenu's 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>:

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

   

7. Klik op Opslaan.

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

1. Zoek deze code in het formulier:

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

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

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

2. Zoek en vervang de volgende code:

Minimal, Pop, or Supply

Zoek naar alle instanties van deze code als je Minimal, Pop of Supply gebruikt:

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

Vervang dit door:

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

Andere gratis Shopify-thema's

Als je een ander Shopify-thema gebruikt, kun je zoeken op deze code:

liquid {% assign current_variant = product.selected_or_first_available_variant %}

Vervang door:

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