Kunden zur Auswahl einer Option auffordern
Wenn ein Kunde eine Produktseite in deinem Onlineshop besucht, wird standardmäßig die erste verfügbare Variante ausgewählt. Mit dieser Anpassung kannst du die automatische Auswahl der ersten verfügbaren Variante deaktivieren. Auf diese Weise wird der Kunde aufgefordert, eine Variante manuell auszuwählen, bevor eine Variante angezeigt wird. )
Themes mit und ohne Abschnitte
Wähle dein Theme
Die Schritte für diese Anpassung variieren je nach deinem Theme. Klicke auf die Schaltfläche für dein Theme, bevor du die nachstehenden Anweisungen befolgst:
Schritte für Boundless
Befolge diese Schritte, um die Anpassung auf Boundless anzuwenden:
Bearbeitee die JavaScript-Datei deines Themes
Um die JavaScript-Datei deines Themes zu bearbeiten:
Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Tippe in der Shopify App auf Shop.
Tippe unter Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Tippe in der Shopify App auf Shop.
Tippe unter Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Klicke in der Übersicht Assets auf
theme.js
odertheme.js.liquid
.Suche den Code
initVariantSelectors
. Füge darunter den folgenden Code hinzu:
// 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;
}
}
}
- Suche die folgende Codezeile:
$(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.
- Klicke auf Speichern.
Die Vorlage deiner Produktseite bearbeiten
So bearbeitest du die Vorlage deiner Produktseite:
Klicke in der Übersicht Abschnitte auf
product-template.liquid
.Suche den folgenden Code:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
- Suche nach dem folgenden Code und lösche ihn:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Suche den Code
{% schema %}
. Füge darüber den folgenden Code in einer eigenen Zeile ein:
{% 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 %}
- Klicke auf Speichern.
Ändere die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen
Du kannst die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen ändern, sodass Produkte vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.
- Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.
Gib in das Feld Filter
unavailable
ein, um die "nicht verfügbare" Übersetzung anzuzeigen.Ersetze den Text Nicht verfügbar mit
Make a selection
.Klicke auf Speichern.
Schritte für Debut
Befolge diese Schritte, um die Anpassung auf Debut anzuwenden:
Bearbeitee die JavaScript-Datei deines Themes
Um die JavaScript-Datei deines Themes zu bearbeiten:
Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Tippe in der Shopify App auf Shop.
Tippe unter Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Tippe in der Shopify App auf Shop.
Tippe unter Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Klicke in der Übersicht Assets auf
theme.js
odertheme.js.liquid
.Füge den folgenden Code am Ende der Datei hinzu:
(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;
}
}
}
})();
-
Suche den Code
_updatePrice: function(variant)
. Ersetze den folgenden 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;
} */
-
Suche nach dem Code
this.currentVariant = variant;
this._updatePaymentButton(variant);
The result should look something like this:
this.currentVariant = variant;
this._updatePaymentButton(variant);
-
Suche den Code
_updateImages: function(variant)
. Ersetze den folgenden Code:
var currentVariantImage = this.currentVariant.featured_image || {};
with:
if (this.currentVariant != undefined) {
var currentVariantImage = this.currentVariant.featured_image || {};
}
- Suche direkt darunter nach dem folgenden Code:
if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
}
Replace it with:
/* if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
} */
-
Suche den Code
_updateSKU: function(variant)
. Ersetze den folgenden Code:
if (variant.sku === this.currentVariant.sku) {
return;
}
with:
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}
-
Suche den Code
_initVariants: function() {
. Ersetze den folgenden 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.
- Suche den folgenden 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');
}
},
- Klicke auf Speichern.
Die Vorlage deiner Produktseite bearbeiten
So bearbeitest du die Vorlage deiner Produktseite:
Klicke in der Übersicht Abschnitte auf
product-template.liquid
.Suche den folgenden 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 %}
- Suche nach dem folgenden Code und lösche ihn:
{% 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 -%}
- Suche den folgenden 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.
- Suche den folgenden 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 %}
- Suche den folgenden 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>
-
Suche den Code
{% schema %}
. Füge darüber den folgenden Code in einer eigenen Zeile ein:
{% 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 %}
- Klicke auf Speichern.
Dein Produktpreis-Snippet bearbeiten
Um dein Produktpreis-Snippet zu bearbeiten:
Klicke im Verzeichnis Snippets auf
product-price.liquid
.Suche den folgenden 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.
Ändere die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen
Du kannst die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen ändern, sodass Produkte vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.
- Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.
Gib in das Feld Filter
unavailable
ein, um die "nicht verfügbare" Übersetzung anzuzeigen.Ersetze den Text Nicht verfügbar mit
Make a selection
.Klicke auf Speichern.
Schritte für Minimal
Befolge diese Schritte, um die Anpassung auf Minimal anzuwenden:
Bearbeitee die JavaScript-Datei deines Themes
Um die JavaScript-Datei deines Themes zu bearbeiten:
Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Tippe in der Shopify App auf Shop.
Tippe unter Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Tippe in der Shopify App auf Shop.
Tippe unter Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Klicke in der Übersicht Assets auf
theme.js
odertheme.js.liquid
.Suche den Code
initProductVariant: function() {
. Füge darunter den folgenden Code hinzu:
// 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;
}
}
}
- Klicke auf Speichern.
Die Vorlage deiner Produktseite bearbeiten:
So bearbeitest du die Vorlage deiner Produktseite:
Klicke in der Übersicht Abschnitte auf
product-template.liquid
.Suche den folgenden Code:
{% assign variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign variant = product.selected_variant %}
- Suche nach dem folgenden Code und lösche ihn:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Suche alle Vorkommen dieses Codes:
{% 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 %}
-
Suche den Code
{% schema %}
. Füge darüber den folgenden Code in einer eigenen Zeile ein:
{% 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 %}
- Klicke auf Speichern.
Ändere die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen
Du kannst die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen ändern, sodass Produkte vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.
- Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.
Gib in das Feld Filter
unavailable
ein, um die "nicht verfügbare" Übersetzung anzuzeigen.Ersetze den Text Nicht verfügbar mit
Make a selection
.Klicke auf Speichern.
Schritte für Narrative
Befolge diese Schritte, um die Anpassung auf Narrative anzuwenden:
Bearbeitee die JavaScript-Datei deines Themes
Um die JavaScript-Datei deines Themes zu bearbeiten:
Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Tippe in der Shopify App auf Shop.
Tippe unter Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Tippe in der Shopify App auf Shop.
Tippe unter Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Klicke im Verzeichnis Assets auf
custom.js
.Füge den folgenden Code am Ende der Datei hinzu:
(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;
}
}
}
})();
- Klicke auf Speichern.
Die Vorlage deiner Produktseite bearbeiten
So bearbeitest du die Vorlage deiner Produktseite:
Klicke in der Übersicht Abschnitte auf
product-template.liquid
.Suche den folgenden 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 -%}
-
Suche den Code
{% schema %}
. Füge darüber den folgenden Code in einer eigenen Zeile ein:
{% 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 %}
- Klicke auf Speichern.
Ändere die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen
Du kannst die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen ändern, sodass Produkte vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.
- Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.
Gib in das Feld Filter
unavailable
ein, um die "nicht verfügbare" Übersetzung anzuzeigen.Ersetze den Text Nicht verfügbar mit
Make a selection
.Klicke auf Speichern.
Schritte für Simple
Befolge diese Schritte, um die Anpassung auf Simple anzuwenden:
Bearbeitee die JavaScript-Datei deines Themes
Um die JavaScript-Datei deines Themes zu bearbeiten:
Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Tippe in der Shopify App auf Shop.
Tippe unter Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Tippe in der Shopify App auf Shop.
Tippe unter Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Klicke in der Übersicht Assets auf
theme.js
odertheme.js.liquid
.Suche den Code
initProductVariant: function() {
. Füge darunter den folgenden Code hinzu:
// 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;
}
}
}
- Klicke auf Speichern.
Die Vorlage deiner Produktseite bearbeiten
So bearbeitest du die Vorlage deiner Produktseite:
Klicke in der Übersicht Abschnitte auf
product-template.liquid
.Suche den folgenden Code:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
- Suche nach dem folgenden Code und lösche ihn:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Suche den Code
{% schema %}
. Füge darüber den folgenden Code in einer eigenen Zeile ein:
{% 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 %}
- Klicke auf Speichern.
Ändere die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen
Du kannst die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen ändern, sodass Produkte vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.
- Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.
Gib in das Feld Filter
unavailable
ein, um die "nicht verfügbare" Übersetzung anzuzeigen.Ersetze den Text Nicht verfügbar mit
Make a selection
.Klicke auf Speichern.
Schritte für Supply
Befolge diese Schritte, um die Anpassung auf Supply anzuwenden:
Bearbeitee die JavaScript-Datei deines Themes
Um die JavaScript-Datei deines Themes zu bearbeiten:
Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Tippe in der Shopify App auf Shop.
Tippe unter Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Tippe in der Shopify App auf Shop.
Tippe unter Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Klicke in der Übersicht Assets auf
theme.js
odertheme.js.liquid
.Suche den Code
initProductVariant: function() {
. Füge darunter den folgenden Code hinzu:
// 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;
}
}
}
- Klicke auf Speichern.
Die Vorlage deiner Produktseite bearbeiten
So bearbeitest du die Vorlage deiner Produktseite:
Klicke in der Übersicht Abschnitte auf
product-template.liquid
.Suche den folgenden Code:
{% assign variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign variant = product.selected_variant %}
- Suche nach dem folgenden Code und lösche ihn:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Suche alle Vorkommen dieses Codes:
{% 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 %}
-
Suche den Code
{% schema %}
. Füge darüber den folgenden Code in einer eigenen Zeile ein:
{% 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 %}
- Klicke auf Speichern.
Ändere die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen
Du kannst die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen ändern, sodass Produkte vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.
- Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.
Gib in das Feld Filter
unavailable
ein, um die "nicht verfügbare" Übersetzung anzuzeigen.Ersetze den Text Nicht verfügbar mit
Make a selection
.Klicke auf Speichern.
Schritte für Venture
Befolge diese Schritte, um die Anpassung auf Venture anzuwenden:
Bearbeitee die JavaScript-Datei deines Themes
Um die JavaScript-Datei deines Themes zu bearbeiten:
Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Tippe in der Shopify App auf Shop.
Tippe unter Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Tippe in der Shopify App auf Shop.
Tippe unter Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
Klicke in der Übersicht Assets auf
theme.js
odertheme.js.liquid
.Füge den folgenden Code am Ende der Datei hinzu:
(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;
}
}
}
})();
- Suche den folgenden Code:
this.currentVariant = this._getVariantFromOptions();
Replace it with:
this.currentVariant = this._getVariantFromOptions() || {};
-
Suche den Code
_updatePrice: function(variant)
. Ersetze den folgenden 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;
} */
- Klicke auf Speichern.
Die Vorlage deiner Produktseite bearbeiten
So bearbeitest du die Vorlage deiner Produktseite:
Klicke in der Übersicht Abschnitte auf
product-template.liquid
.Suche den folgenden 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 %}
- Suche nach dem folgenden Code und lösche ihn:
{% 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 %}
- Suche alle Vorkommen dieses Codes:
{% unless current_variant.available %}
Replace it with:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
- Suche den folgenden 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 %}
-
Suche den Code
{% schema %}
. Füge darüber den folgenden Code in einer eigenen Zeile ein:
{% 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 %}
- Klicke auf Speichern.
Ändere die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen
Du kannst die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen ändern, sodass Produkte vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.
- Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.
Gib in das Feld Filter
unavailable
ein, um die "nicht verfügbare" Übersetzung anzuzeigen.Ersetze den Text Nicht verfügbar mit
Make a selection
.Klicke auf Speichern.
Den Dropdown-Menüs deiner Variante Aufforderungen hinzufügen
So fügst du den Dropdown-Menüs deiner Variante Aufforderungen hinzu:
Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.
Benenne dein neues Snippet
pick-an-option
.Füge this code hosted on GitHub in deine neue Snippet-Datei ein.
Klicke auf Speichern.
Klicke in der Übersicht Layout auf
theme.liquid
.Suche das abschließende
</body>
-Tag gegen Ende der Datei. Füge in einer neuen Zeile direkt über dem abschließenden</body>
-Tag den folgenden Code ein:
{% render 'pick-an-option' %}

Klicke auf Speichern.
Suche die Datei, die das Formular "Zum Warenkorb hinzufügen" enthält. Es wird ein
action
Attribut haben, das auf/cart/add
festgelegt ist.Suche diesen Code im Formular:
<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>
- Suche und ersetze den folgenden 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 %}
- Klicke auf Speichern.
Ändere die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen
Du kannst die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen ändern, sodass Produkte vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.
- Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
- Tippe in der Shopify App auf Shop.
- Tippe unter Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.
Gib in das Feld Filter
unavailable
ein, um die "nicht verfügbare" Übersetzung anzuzeigen.Ersetze den Text Nicht verfügbar mit
Make a selection
.Klicke auf Speichern.