Kunden zur Auswahl einer Option auffordern

Achtung

Vintage-Themes sind nicht im Theme Store verfügbar. Vintage-Themes verfügen nicht über die Funktionen, die in den Onlineshop 2.0-Themes von Shopify enthalten sind. Kostenlose Shopify-Vintage-Theme erhalten nur sicherheitsbezogene Aktualisierungen.

Hinweis

Wenn du ein kostenloses Theme von Shopify verwendest, kannst du dich an den Shopify Support wenden, um Hilfe zu diesem Tutorial zu erhalten. Die Designzeit beträgt 15 Minuten. Erhalte mehr Informationen zur Shopify-Designrichtlinie.

Hinweis

Diese Anpassung ist für Vintage-Shopify-Themes und gilt nicht für Online Store 2.0-Themes.

• Finde die Architekturversion deines Themes heraus
• Entdecke die Anpassungsmöglichkeiten für Online Store 2.0-Themes

Wenn ein Kunde eine Produktseite in deinem Onlineshop besucht, wird standardmäßig die erste verfügbare Variante ausgewählt. Du kannst die Anpassung Kunden zur Auswahl einer Option auffordern verwenden, um die automatische Auswahl der ersten verfügbaren Variante zu deaktivieren. Auf diese Weise wird der Kunde aufgefordert, eine Variante manuell auszuwählen, bevor eine Variante angezeigt wird.

Wenn du die Option Kunden zur Auswahl einer Option auffordern verwendest, wird in deinem Theme möglicherweise erst ein Produktpreis angezeigt, nachdem dein Kunde eine Variante ausgewählt hat. Produkte mit Varianten haben keinen Angebotspreis. Der angezeigte Preis wird durch die ausgewählte Variante bestimmt.

Themes mit und ohne Abschnitte

Hinweis

Die Schritte für dieses Tutorial unterscheiden sich je nachdem, ob du ein Theme mit Abschnitten oder ein Theme ohne Abschnitte verwendest. Bei einem Theme mit Abschnitten kannst du das Layout deiner Startseite per Drag-&-Drop anpassen, bei einem Theme ohne Abschnitte ist das nicht möglich.

Gehe auf die Seite Code bearbeiten deines Themes, um dort herauszufinden, ob dein Theme Abschnitte unterstützt oder nicht. Wenn in der Übersicht Abschnitte Dateien vorhanden sind, verwendest du ein Theme mit Abschnitten. Themes ohne Abschnitte wurden vor Oktober 2016 veröffentlicht und enthalten keine Dateien im Verzeichnis Abschnitte.

Wenn du ein Theme mit Abschnitten verwendest, klicke auf die Schaltfläche Themes mit Abschnitten und folge den Anweisungen. Wenn du ein älteres, Theme ohne Abschnitte verwendest, klicke auf die Schaltfläche Themes ohne Abschnitte und folge den Anweisungen.

Schritte für Themes mit Abschnitten

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:

Boundless

Schritte für Boundless

Befolge diese Schritte, um die Anpassung auf Boundless anzuwenden:

Bearbeitee die JavaScript-Datei deines Themes

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

3. Klicke in der Übersicht Assets auf theme.js oder theme.js.liquid.

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

Füge den folgenden Code in einer neuen Zeile darunter hinzu:

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 = &#x27;an&#x27;;
};

const select = document.querySelectorAll(&#x27;.single-option-selector&#x27;)[i];
const options = select.querySelectorAll(&#x27;option&#x27;);

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

  select.add(option, select.firstChild);
  select.selectedIndex = 0;
}
  }
}

Der Code sollte etwa so aussehen:

// 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 = &#x27;an&#x27;;
};

const select = document.querySelectorAll(&#x27;.single-option-selector&#x27;)[i];
const options = select.querySelectorAll(&#x27;option&#x27;);

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

  select.add(option, select.firstChild);
  select.selectedIndex = 0;
}
  }
}

1. Suche die folgende Codezeile:

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

Es gibt zwei Instanzen dieser Codezeile, die beide in der Funktion productVariantCallback enthalten sind. Ersetze nur die zweite Instanz durch:

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

1. Klicke auf Speichern.

Hinweis

Einige Versionen von Boundless enthalten die Codezeile nicht, die in diesem Schritt ersetzt werden soll. Wenn du den Code nicht finden kannst, fahre mit dem nächsten Schritt fort.

Die Vorlage deiner Produktseite bearbeiten

So bearbeitest du die Vorlage deiner Produktseite:

1. Klicke in der Übersicht Abschnitte auf product-template.liquid.
2. Suche den folgenden Code:

{% assign current_variant = product.selected_or_first_available_variant %}

Ersetze ihn mit:

{% assign current_variant = product.selected_variant %}

1. Suche nach dem folgenden Code und lösche ihn:

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

1. 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 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}

Der Code sollte etwa so aussehen:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

{% for option in product.options -%}
  var optionObj = {};
  optionObj[{{ forloop.index0 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}
{% schema %}

1. Klicke auf Speichern.

Ändere die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen

Du kannst die Spracheinstellungen für die Schaltfläche In den Warenkorb ändern, sodass Produkte nicht als Nicht verfügbar angezeigt werden, bevor ein Kunde ein Produkt auswählt.

Schritte:

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, und klicke auf ... > Standard-Theme-Inhalt bearbeiten.

3. Gib in der Suchleiste Artikel filtern den Text Nicht verfügbar ein, bis die Auswahl Nicht verfügbar angezeigt wird.

4. Ersetze den Text Nicht verfügbar durch Triff eine Auswahl.

5. Klicke auf Speichern.

Debut

Schritte für Debut

Befolge diese Schritte, um die Anpassung auf Debut anzuwenden:

Bearbeitee die JavaScript-Datei deines Themes

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

3. Klicke in der Übersicht Assets auf theme.js oder theme.js.liquid.

4. 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 = &#x27;an&#x27;;
  };

  const select = document.querySelectorAll(&#x27;.single-option-selector&#x27;)[i];
  const options = select.querySelectorAll(&#x27;option&#x27;);

  if (options.length &#x3E; 1) {
    let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

    select.add(option, select.firstChild);
    select.selectedIndex = 0;
  }
}
  }
})();

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

mit:

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

Wenn du den oben aufgeführten Code nicht finden kannst, suche nach dem folgenden Code:

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

Ersetze ihn mit:

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

1. Suche nach dem Code this.currentVariant = variant;

Füge unten den folgenden Code hinzu:

this._updatePaymentButton(variant);

Das Ergebnis sollte etwa so aussehen:

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

1. Suche den Code _updateImages: function(variant). Ersetze den folgenden Code:

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

mit:

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

1. Suche direkt darunter nach dem folgenden Code:

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

Ersetze ihn mit:

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

1. Suche den Code _updateSKU: function(variant). Ersetze den folgenden Code:

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

mit:

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

1. Suche den Code _initVariants: function() {. Ersetze den folgenden Code:

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

mit:

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

Hinweis

Dieser Code muss nur in der Debut-Version 17.5.0 und höher ersetzt werden.

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

Füge den folgenden Code in einer neuen Zeile unter dem oben aufgeführten Code hinzu:

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

Der Code sollte etwa so aussehen:

_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. Klicke auf Speichern.

Die Vorlage deiner Produktseite bearbeiten

So bearbeitest du die Vorlage deiner Produktseite:

1. Klicke in der Übersicht Abschnitte auf product-template.liquid.
2. Suche den folgenden Code:

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

Ersetze ihn mit:

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

1. Suche nach dem folgenden Code und lösche ihn:

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

Wenn du den oben aufgeführten Code nicht finden kannst, suche nach dem folgenden Code und lösche ihn:

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

1. Suche den folgenden Code:

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

Ersetze ihn mit:

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

Wenn du den oben aufgeführten Code nicht finden kannst, suche nach dem folgenden Code:

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

Ersetze ihn mit:

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

Hinweis

Einige Versionen von Debut enthalten nicht die Codezeile, die in diesem Schritt ersetzt werden soll. Wenn du den Code nicht finden kannst, fahre mit dem nächsten Schritt fort.

1. Suche den folgenden Code:

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

Ersetze ihn mit:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% elsif current_variant.available %}
  {{ 'products.product.add_to_cart' | t }}
{% else %}
  {{ 'products.product.sold_out' | t }}
{% endif %}

1. Suche den folgenden Code:

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

Ersetze ihn mit:

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

1. 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 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}

Der Code sollte etwa so aussehen:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

{% for option in product.options -%}
  var optionObj = {};
  optionObj[{{ forloop.index0 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}
{% schema %}

1. Klicke auf Speichern.

Dein Produktpreis-Snippet bearbeiten

Um dein Produktpreis-Snippet zu bearbeiten:

1. Klicke im Verzeichnis Snippets auf product-price.liquid.
2. 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
-%}

Ersetze ihn mit:

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

Hinweis

Einige Versionen von Debut enthalten nicht den Code, der in diesem Schritt ersetzt werden soll. Wenn du den Code nicht finden kannst, fahre mit dem nächsten Schritt fort.

Ändere die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen

Du kannst die Spracheinstellungen für die Schaltfläche In den Warenkorb ändern, sodass Produkte nicht als Nicht verfügbar angezeigt werden, bevor ein Kunde ein Produkt auswählt.

Schritte:

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, und klicke auf ... > Standard-Theme-Inhalt bearbeiten.

3. Gib in der Suchleiste Artikel filtern den Text Nicht verfügbar ein, bis die Auswahl Nicht verfügbar angezeigt wird.

4. Ersetze den Text Nicht verfügbar durch Triff eine Auswahl.

5. Klicke auf Speichern.

Minimal

Schritte für Minimal

Befolge diese Schritte, um die Anpassung auf Minimal anzuwenden:

Bearbeitee die JavaScript-Datei deines Themes

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

3. Klicke in der Übersicht Assets auf theme.js oder theme.js.liquid.

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

Füge den folgenden Code in einer neuen Zeile darunter hinzu:

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 = &#x27;an&#x27;;
};

const select = document.querySelectorAll(&#x27;.single-option-selector&#x27;)[i];
const options = select.querySelectorAll(&#x27;option&#x27;);

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

  select.add(option, select.firstChild);
  select.selectedIndex = 0;
}
  }
}

Der Code sollte etwa so aussehen:

// 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 = &#x27;an&#x27;;
};

const select = document.querySelectorAll(&#x27;.single-option-selector&#x27;)[i];
const options = select.querySelectorAll(&#x27;option&#x27;);

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

  select.add(option, select.firstChild);
  select.selectedIndex = 0;
}
  }
}

1. Klicke auf Speichern.

Die Vorlage deiner Produktseite bearbeiten

So bearbeitest du die Vorlage deiner Produktseite:

1. Klicke in der Übersicht Abschnitte auf product-template.liquid.
2. Suche den folgenden Code:

{% assign variant = product.selected_or_first_available_variant %}

Ersetze ihn mit:

{% assign variant = product.selected_variant %}

1. Suche nach dem folgenden Code und lösche ihn:

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

1. Suche alle Vorkommen dieses Codes:

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

Ersetze sie durch:

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

1. 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 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}

Der Code sollte etwa so aussehen:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

{% for option in product.options -%}
  var optionObj = {};
  optionObj[{{ forloop.index0 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}
{% schema %}

1. Klicke auf Speichern.

Ändere die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen

Du kannst die Spracheinstellungen für die Schaltfläche In den Warenkorb ändern, sodass Produkte nicht als Nicht verfügbar angezeigt werden, bevor ein Kunde ein Produkt auswählt.

Schritte:

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, und klicke auf ... > Standard-Theme-Inhalt bearbeiten.

3. Gib in der Suchleiste Artikel filtern den Text Nicht verfügbar ein, bis die Auswahl Nicht verfügbar angezeigt wird.

4. Ersetze den Text Nicht verfügbar durch Triff eine Auswahl.

5. Klicke auf Speichern.

Narrative

Schritte für Narrative

Befolge diese Schritte, um die Anpassung auf Narrative anzuwenden:

Bearbeitee die JavaScript-Datei deines Themes

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

3. Klicke im Verzeichnis Assets auf custom.js.

4. 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 = &#x27;an&#x27;;
  };

  const select = document.querySelectorAll(&#x27;.single-option-selector&#x27;)[i];
  const options = select.querySelectorAll(&#x27;option&#x27;);

  if (options.length &#x3E; 1) {
    let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

    select.add(option, select.firstChild);
    select.selectedIndex = 0;
  }
}
  }
})();

1. Klicke auf Speichern.

Die Vorlage deiner Produktseite bearbeiten

So bearbeitest du die Vorlage deiner Produktseite:

1. Klicke in der Übersicht Abschnitte auf product-template.liquid.
2. Suche den folgenden Code:

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

Ersetze ihn mit:

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

1. 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 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}

Der Code sollte etwa so aussehen:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

{% for option in product.options -%}
  var optionObj = {};
  optionObj[{{ forloop.index0 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}
{% schema %}

1. Klicke auf Speichern.

Ändere die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen

Du kannst die Spracheinstellungen für die Schaltfläche In den Warenkorb ändern, sodass Produkte nicht als Nicht verfügbar angezeigt werden, bevor ein Kunde ein Produkt auswählt.

Schritte:

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, und klicke auf ... > Standard-Theme-Inhalt bearbeiten.

3. Gib in der Suchleiste Artikel filtern den Text Nicht verfügbar ein, bis die Auswahl Nicht verfügbar angezeigt wird.

4. Ersetze den Text Nicht verfügbar durch Triff eine Auswahl.

5. Klicke auf Speichern.

Simple

Schritte für Simple

Befolge diese Schritte, um die Anpassung auf Simple anzuwenden:

Bearbeitee die JavaScript-Datei deines Themes

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

3. Klicke in der Übersicht Assets auf theme.js oder theme.js.liquid.

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

Füge den folgenden Code in einer neuen Zeile darunter hinzu:

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 = &#x27;an&#x27;;
};

const select = document.querySelectorAll(&#x27;.single-option-selector&#x27;)[i];
const options = select.querySelectorAll(&#x27;option&#x27;);

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

  select.add(option, select.firstChild);
  select.selectedIndex = 0;
}
  }
}

Der Code sollte etwa so aussehen:

// 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 = &#x27;an&#x27;;
};

const select = document.querySelectorAll(&#x27;.single-option-selector&#x27;)[i];
const options = select.querySelectorAll(&#x27;option&#x27;);

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

  select.add(option, select.firstChild);
  select.selectedIndex = 0;
}
  }
}

1. Klicke auf Speichern.

Die Vorlage deiner Produktseite bearbeiten

So bearbeitest du die Vorlage deiner Produktseite:

1. Klicke in der Übersicht Abschnitte auf product-template.liquid.
2. Suche den folgenden Code:

{% assign current_variant = product.selected_or_first_available_variant %}

Ersetze ihn mit:

{% assign current_variant = product.selected_variant %}

1. Suche nach dem folgenden Code und lösche ihn:

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

1. 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 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}

Der Code sollte etwa so aussehen:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

{% for option in product.options -%}
  var optionObj = {};
  optionObj[{{ forloop.index0 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}
{% schema %}

1. Klicke auf Speichern.

Ändere die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen

Du kannst die Spracheinstellungen für die Schaltfläche In den Warenkorb ändern, sodass Produkte nicht als Nicht verfügbar angezeigt werden, bevor ein Kunde ein Produkt auswählt.

Schritte:

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, und klicke auf ... > Standard-Theme-Inhalt bearbeiten.

3. Gib in der Suchleiste Artikel filtern den Text Nicht verfügbar ein, bis die Auswahl Nicht verfügbar angezeigt wird.

4. Ersetze den Text Nicht verfügbar durch Triff eine Auswahl.

5. Klicke auf Speichern.

Supply

Schritte für Supply

Befolge diese Schritte, um die Anpassung auf Supply anzuwenden:

Bearbeitee die JavaScript-Datei deines Themes

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

3. Klicke in der Übersicht Assets auf theme.js oder theme.js.liquid.

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

Füge den folgenden Code in einer neuen Zeile darunter hinzu:

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 = &#x27;an&#x27;;
};

const select = document.querySelectorAll(&#x27;.single-option-selector&#x27;)[i];
const options = select.querySelectorAll(&#x27;option&#x27;);

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

  select.add(option, select.firstChild);
  select.selectedIndex = 0;
}
  }
}

Der Code sollte etwa so aussehen:

// 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 = &#x27;an&#x27;;
};

const select = document.querySelectorAll(&#x27;.single-option-selector&#x27;)[i];
const options = select.querySelectorAll(&#x27;option&#x27;);

if (options.length &#x3E; 1) {
  let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

  select.add(option, select.firstChild);
  select.selectedIndex = 0;
}
  }
}

1. Klicke auf Speichern.

Die Vorlage deiner Produktseite bearbeiten

So bearbeitest du die Vorlage deiner Produktseite:

1. Klicke in der Übersicht Abschnitte auf product-template.liquid.
2. Suche den folgenden Code:

{% assign variant = product.selected_or_first_available_variant %}

Ersetze ihn mit:

{% assign variant = product.selected_variant %}

1. Suche nach dem folgenden Code und lösche ihn:

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

1. Suche alle Vorkommen dieses Codes:

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

Ersetze ihn mit:

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

1. 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 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}

Der Code sollte etwa so aussehen:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

{% for option in product.options -%}
  var optionObj = {};
  optionObj[{{ forloop.index0 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}
{% schema %}

1. Klicke auf Speichern.

Ändere die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen

Du kannst die Spracheinstellungen für die Schaltfläche In den Warenkorb ändern, sodass Produkte nicht als Nicht verfügbar angezeigt werden, bevor ein Kunde ein Produkt auswählt.

Schritte:

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, und klicke auf ... > Standard-Theme-Inhalt bearbeiten.

3. Gib in der Suchleiste Artikel filtern den Text Nicht verfügbar ein, bis die Auswahl Nicht verfügbar angezeigt wird.

4. Ersetze den Text Nicht verfügbar durch Triff eine Auswahl.

5. Klicke auf Speichern.

Venture

Schritte für Venture

Befolge diese Schritte, um die Anpassung auf Venture anzuwenden:

Bearbeitee die JavaScript-Datei deines Themes

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

3. Klicke in der Übersicht Assets auf theme.js oder theme.js.liquid.

4. 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 = &#x27;an&#x27;;
  };

  const select = document.querySelectorAll(&#x27;.single-option-selector&#x27;)[i];
  const options = select.querySelectorAll(&#x27;option&#x27;);

  if (options.length &#x3E; 1) {
    let option = new Option(&#x27;Pick &#x27; + indef + &#x27; &#x27; + productOptions[i][i], &#x27;&#x27;);

    select.add(option, select.firstChild);
    select.selectedIndex = 0;
  }
}
  }
})();

1. Suche den folgenden Code:

this.currentVariant = this._getVariantFromOptions();

Ersetze ihn mit:

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

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

mit:

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

1. Klicke auf Speichern.

Die Vorlage deiner Produktseite bearbeiten

So bearbeitest du die Vorlage deiner Produktseite:

1. Klicke in der Übersicht Abschnitte auf product-template.liquid.
2. Suche den folgenden Code:

{% assign current_variant = product.selected_or_first_available_variant %}

Ersetze ihn mit:

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

1. Suche nach dem folgenden Code und lösche ihn:

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

Wenn du den oben aufgeführten Code nicht finden kannst, suche nach diesem Code und lösche ihn:

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

1. Suche alle Vorkommen dieses Codes:

{% unless current_variant.available %}

Ersetze ihn mit:

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

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

Ersetze ihn mit:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% else %}
  {% unless current_variant.available or product.variants.size == 1 and variant.available %}
    {{ 'products.product.sold_out' | t }}
  {% else %}
    {{ 'products.product.add_to_cart' | t }}
  {% endunless %}
{% endif %}

1. 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 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}

Der Code sollte etwa so aussehen:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

{% for option in product.options -%}
  var optionObj = {};
  optionObj[{{ forloop.index0 }}] = &#x22;{{ product.options[forloop.index0] }}&#x22;;
  productOptions.push(optionObj);
{%- endfor %}
  </script>
{% endif %}
{% schema %}

1. Klicke auf Speichern.

Ändere die Spracheinstellungen für die Schaltfläche Zum Warenkorb hinzufügen

Du kannst die Spracheinstellungen für die Schaltfläche In den Warenkorb ändern, sodass Produkte nicht als Nicht verfügbar angezeigt werden, bevor ein Kunde ein Produkt auswählt.

Schritte:

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, und klicke auf ... > Standard-Theme-Inhalt bearbeiten.

3. Gib in der Suchleiste Artikel filtern den Text Nicht verfügbar ein, bis die Auswahl Nicht verfügbar angezeigt wird.

4. Ersetze den Text Nicht verfügbar durch Triff eine Auswahl.

5. Klicke auf Speichern.

Schritte für Themes ohne Abschnitte

Den Dropdown-Menüs deiner Variante Aufforderungen hinzufügen

1. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.
2. Benenne dein neues Snippet pick-an-option.
3. Füge this code hosted on GitHub in deine neue Snippet-Datei ein.
4. Klicke auf Speichern.
5. Klicke in der Übersicht Layout auf theme.liquid .
6. 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' %}

1. Klicke auf Speichern.

2. Suche die Datei, die das Formular "Zum Warenkorb hinzufügen" enthält. Es wird ein action Attribut haben, das auf /cart/add festgelegt ist. Es sollte in einer dieser vier Dateien sein:

   • die product.liquid Vorlage unter Vorlagen
   • das theme.liquid Layout unter Layout
   • das product.liquid Snippet unter Snippets
   • das single-product.liquid Snippet unter Snippets

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

Oder suche diesen Code im Formular:

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

Ersetze den Code durch den folgenden Code-Block:

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

Wenn du Minimal, Pop oder Supply verwendest, dann suche alle Instanzen, in denen dieser Code vorkommt:

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

Ersetze den Code durch den folgenden Code-Block:

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

Wenn du ein anderes Shopify-Vintage-Theme verwendest, dann suche diesen Code:

{% assign current_variant = product.selected_or_first_available_variant %}

Ersetze den Code durch den folgenden Code-Block:

{% 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 In den Warenkorb ändern, sodass Produkte nicht als Nicht verfügbar angezeigt werden, bevor ein Kunde ein Produkt auswählt.

Schritte:

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, und klicke auf ... > Standard-Theme-Inhalt bearbeiten.

3. Gib in der Suchleiste Artikel filtern den Text Nicht verfügbar ein, bis die Auswahl Nicht verfügbar angezeigt wird.

4. Ersetze den Text Nicht verfügbar durch Triff eine Auswahl.

5. Klicke auf Speichern.