Laat klanten een optie kiezen
Wanneer klanten een productpagina in je onlinewinkel bezoeken, wordt standaard de eerste beschikbare variant 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. )
Thema's met en zonder 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:
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:
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Klik in de directory Assets op
theme.js
oftheme.js.liquid
.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;
}
}
}
- 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.
- Klik op Opslaan.
Bewerk je productpaginatemplate
Om je productpaginatemplate te bewerken:
Klik in de directory Secties op
product-template.liquid
.Zoek de volgende code:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
- Zoek de volgende code en verwijder deze:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
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 %}
- 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.
- Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.
Typ
unavailable
in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.Vervang de tekst Niet beschikbaar om
Make a selection
.Klik op Opslaan.
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:
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Klik in de directory Assets op
theme.js
oftheme.js.liquid
.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;
}
}
}
})();
-
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;
} */
-
Zoek de code
this.currentVariant = variant;
this._updatePaymentButton(variant);
The result should look something like this:
this.currentVariant = variant;
this._updatePaymentButton(variant);
-
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 || {};
}
- 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;
} */
-
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;
}
}
-
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.
- 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');
}
},
- Klik op Opslaan.
Bewerk je productpaginatemplate
Om je productpaginatemplate te bewerken:
Klik in de directory Secties op
product-template.liquid
.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 %}
- 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 -%}
- 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.
- 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 %}
- 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>
-
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 %}
- Klik op Opslaan.
Het productprijsfragment bewerken
Om je productprijs-fragment te wijzigen:
Klik op
product-price.liquid
in de directory Fragmenten.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.
- Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.
Typ
unavailable
in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.Vervang de tekst Niet beschikbaar om
Make a selection
.Klik op Opslaan.
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:
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Klik in de directory Assets op
theme.js
oftheme.js.liquid
.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;
}
}
}
- Klik op Opslaan.
Bewerk je productpaginatemplate:
Om je productpaginatemplate te bewerken:
Klik in de directory Secties op
product-template.liquid
.Zoek de volgende code:
{% assign variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign variant = product.selected_variant %}
- Zoek de volgende code en verwijder deze:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- 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 %}
-
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 %}
- 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.
- Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.
Typ
unavailable
in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.Vervang de tekst Niet beschikbaar om
Make a selection
.Klik op Opslaan.
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:
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Klik in de directory Assets op
custom.js
.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;
}
}
}
})();
- Klik op Opslaan.
Bewerk je productpaginatemplate
Om je productpaginatemplate te bewerken:
Klik in de directory Secties op
product-template.liquid
.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 -%}
-
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 %}
- 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.
- Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.
Typ
unavailable
in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.Vervang de tekst Niet beschikbaar om
Make a selection
.Klik op Opslaan.
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:
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Klik in de directory Assets op
theme.js
oftheme.js.liquid
.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;
}
}
}
- Klik op Opslaan.
Bewerk je productpaginatemplate
Om je productpaginatemplate te bewerken:
Klik in de directory Secties op
product-template.liquid
.Zoek de volgende code:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
- Zoek de volgende code en verwijder deze:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
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 %}
- 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.
- Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.
Typ
unavailable
in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.Vervang de tekst Niet beschikbaar om
Make a selection
.Klik op Opslaan.
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:
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Klik in de directory Assets op
theme.js
oftheme.js.liquid
.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;
}
}
}
- Klik op Opslaan.
Bewerk je productpaginatemplate
Om je productpaginatemplate te bewerken:
Klik in de directory Secties op
product-template.liquid
.Zoek de volgende code:
{% assign variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign variant = product.selected_variant %}
- Zoek de volgende code en verwijder deze:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- 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 %}
-
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 %}
- 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.
- Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.
Typ
unavailable
in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.Vervang de tekst Niet beschikbaar om
Make a selection
.Klik op Opslaan.
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:
Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Tik in de Shopify-app op Winkel.
Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Klik in de directory Assets op
theme.js
oftheme.js.liquid
.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;
}
}
}
})();
- Zoek de volgende code:
this.currentVariant = this._getVariantFromOptions();
Replace it with:
this.currentVariant = this._getVariantFromOptions() || {};
-
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;
} */
- Klik op Opslaan.
Bewerk je productpaginatemplate
Om je productpaginatemplate te bewerken:
Klik in de directory Secties op
product-template.liquid
.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 %}
- 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 %}
- 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 %}
- 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 %}
-
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 %}
- 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.
- Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.
Typ
unavailable
in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.Vervang de tekst Niet beschikbaar om
Make a selection
.Klik op Opslaan.
Voeg termen toe aan je variantmenu's
Prompts toevoegen aan je vervolgkeuzelijsten voor varianten:
Klik in de directory Fragmenten op Een nieuw fragment toevoegen.
Benoem je nieuwe fragment
pick-an-option
.Plak deze code die wordt gehost op GitHub in het nieuwe fragmentbestand.
Klik op Opslaan.
Klik in de directory Opmaak op
theme.liquid
.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' %}

Klik op Opslaan.
Zoek het bestand met het formulier Aan winkelwagen toevoegen. Dit bevat het attribuut
action
dat is ingesteld op/cart/add
.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>
- 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 themesIf 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 %}
- 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.
- Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
- Tik in de Shopify-app op Winkel.
- Tik in het gedeelte Verkoopkanalen op Blogberichten.
- Tik op Thema's beheren.
Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > Talen bewerken.
Typ
unavailable
in de Filter-sectie om de vertaling van "Niet beschikbaar" weer te geven.Vervang de tekst Niet beschikbaar om
Make a selection
.Klik op Opslaan.