Kunden zur Auswahl einer Option auffordern

Achtung

Vintage-Themes sind nicht im Theme Store verfügbar. Diese Themes verfügen nicht über die Funktionen, die in den Onlineshop 2.0-Themes von Shopify enthalten sind, und 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. Weitere Informationen dazu findest du unter Theme-Support.

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

Hinweis

Da diese Anpassung verhindert, dass eine Variante standardmäßig ausgewählt wird, zeigt dein Theme möglicherweise erst dann einen Produktpreis an, wenn der Kunde eine Variante ausgewählt hat. Das ist ein voraussichtliches Verhalten, da Produkte mit Varianten keinen übergreifenden Preis haben. Der angezeigte Preis hängt von der ausgewählten Variante ab.

Themes mit und ohne Abschnitte

Hinweis

Die Schritte für dieses Tutorial unterscheiden sich je nach dem, ob du ein Theme mit Abschnitten oder eines ohne Abschnitte verwendest. Ein Theme mit Abschnitten ermöglicht es dir, das Layout deiner Startseite mittels Drag & Drop anzuordnen, während dies bei einem Theme ohne Abschnitte nicht der Fall ist.

Gehe auf die Seite Code bearbeiten deines Themes, um dort herauszufinden, ob dein Theme Abschnitte unterstützt oder nicht. Wenn sich Dateien im Verzeichnis Sections (Abschnitte) befinden, verwende ein unterteiltes Theme. Nicht unterteilte Themen wurden vor dem Oktober 2016 veröffentlicht und enthalten keine Dateien im Verzeichnis Sections (Abschnitte).

Wenn Sie ein unterteiltes Theme verwenden, klicken Sie auf die Schaltfläche Unterteilte Themes und folgen Sie den Anweisungen. Wenn Sie ein älteres, nicht unterteiltes Theme verwenden, klicken Sie auf die Schaltfläche Nicht unterteilte Themes und folgen Sie 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 = '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;
    }
  }
}

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 = 'an';
    };

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

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

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

1. 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 }}] = "{{ product.options[forloop.index0] }}";
      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 }}] = "{{ product.options[forloop.index0] }}";
      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 vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.

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 das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.
4. Ersetze den Text Nicht verfügbar mit Make a selection.
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 = 'an';
      };

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

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

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

1. 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 }}] = "{{ product.options[forloop.index0] }}";
      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 }}] = "{{ product.options[forloop.index0] }}";
      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 vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.

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 das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.
4. Ersetze den Text Nicht verfügbar mit Make a selection.
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 = '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;
    }
  }
}

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 = 'an';
    };

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

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

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

1. 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 }}] = "{{ product.options[forloop.index0] }}";
      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 }}] = "{{ product.options[forloop.index0] }}";
      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 vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.

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 das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.
4. Ersetze den Text Nicht verfügbar mit Make a selection.
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 = 'an';
      };

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

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

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

1. 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 }}] = "{{ product.options[forloop.index0] }}";
      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 }}] = "{{ product.options[forloop.index0] }}";
      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 vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.

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 das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.
4. Ersetze den Text Nicht verfügbar mit Make a selection.
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 = '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;
    }
  }
}

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 = 'an';
    };

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

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

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

1. 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 }}] = "{{ product.options[forloop.index0] }}";
      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 }}] = "{{ product.options[forloop.index0] }}";
      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 vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.

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 das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.
4. Ersetze den Text Nicht verfügbar mit Make a selection.
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 = '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;
    }
  }
}

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 = 'an';
    };

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

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

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

1. 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 }}] = "{{ product.options[forloop.index0] }}";
      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 }}] = "{{ product.options[forloop.index0] }}";
      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 vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.

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 das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.
4. Ersetze den Text Nicht verfügbar mit Make a selection.
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 = 'an';
      };

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

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

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

1. 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 }}] = "{{ product.options[forloop.index0] }}";
      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 }}] = "{{ product.options[forloop.index0] }}";
      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 vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.

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 das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.
4. Ersetze den Text Nicht verfügbar mit Make a selection.
5. Klicke auf Speichern.

Schritte für Themes ohne Abschnitte

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

So fügst du den Dropdown-Menüs deiner Variante Aufforderungen hinzu:

1. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.
2. Benenne dein neues Snippet pick-an-option.

1. Füge this code hosted on GitHub in deine neue Snippet-Datei ein.
2. Klicke auf Speichern.
3. Klicke in der Übersicht Layout auf theme.liquid .
4. 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

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

Ersetze ihn mit:

<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

1. Suche und ersetze den folgenden Code:
   • Minimal, Pop oder Supply: 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 sie durch:

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

• Andere kostenlose Shopify-Themes: Wenn du ein anderes Shopify-Theme verwendest, dann suche diesen Code:

{% assign current_variant = product.selected_or_first_available_variant %}

Ersetze ihn mit:

{% assign current_variant = product.selected_variant %}

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 vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.

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 das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.
4. Ersetze den Text Nicht verfügbar mit Make a selection.
5. Klicke auf Speichern.