Kunden zur Auswahl einer Option auffordern

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

Sectioned themes

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

Um die JavaScript-Datei deines Themes zu bearbeiten:

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

iPhone

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

Android

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

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

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

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

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

Replace it with:

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

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

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 Zum Warenkorb hinzufügen ändern, sodass Produkte vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

iPhone

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

Android

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

1. Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.

2. Gib in das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.

3. Ersetze den Text Nicht verfügbar mit Make a selection.

4. Klicke auf Speichern.

Debut

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:

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

iPhone

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

Android

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

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

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

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;
} */

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

this._updatePaymentButton(variant);

The result should look something like this:

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

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

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

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

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

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

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

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

Replace it with:

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

If you can't find the code above, then find this code and delete it:

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

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.

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

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

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

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

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

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.

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

iPhone

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

Android

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

1. Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.

2. Gib in das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.

3. Ersetze den Text Nicht verfügbar mit Make a selection.

4. Klicke auf Speichern.

Minimal

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:

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

iPhone

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

Android

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

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

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

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

Replace it with:

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

Replace with:

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

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

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 Zum Warenkorb hinzufügen ändern, sodass Produkte vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

iPhone

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

Android

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

1. Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.

2. Gib in das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.

3. Ersetze den Text Nicht verfügbar mit Make a selection.

4. Klicke auf Speichern.

Narrative

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:

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

iPhone

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

Android

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

1. Klicke im Verzeichnis Assets auf custom.js.

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

Replace it with:

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

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

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 Zum Warenkorb hinzufügen ändern, sodass Produkte vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

iPhone

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

Android

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

1. Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.

2. Gib in das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.

3. Ersetze den Text Nicht verfügbar mit Make a selection.

4. Klicke auf Speichern.

Simple

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:

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

iPhone

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

Android

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

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

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

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

Replace it with:

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

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

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 Zum Warenkorb hinzufügen ändern, sodass Produkte vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

iPhone

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

Android

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

1. Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.

2. Gib in das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.

3. Ersetze den Text Nicht verfügbar mit Make a selection.

4. Klicke auf Speichern.

Supply

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:

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

iPhone

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

Android

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

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

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

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

Replace it with:

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

Replace it with:

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

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

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 Zum Warenkorb hinzufügen ändern, sodass Produkte vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

iPhone

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

Android

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

1. Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.

2. Gib in das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.

3. Ersetze den Text Nicht verfügbar mit Make a selection.

4. Klicke auf Speichern.

Venture

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:

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

iPhone

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

Android

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.

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

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

Replace it with:

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

with:

/* 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 %}

Replace it with:

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

If you can't find the code above, then find this code and delete it:

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

1. Suche alle Vorkommen dieses Codes:

{% unless current_variant.available %}

Replace it with:

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

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

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

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

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 Zum Warenkorb hinzufügen ändern, sodass Produkte vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

iPhone

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

Android

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

1. Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.

2. Gib in das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.

3. Ersetze den Text Nicht verfügbar mit Make a selection.

4. Klicke auf Speichern.

Non-sectioned themes

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.

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.

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>

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>

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

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 Zum Warenkorb hinzufügen ändern, sodass Produkte vor der Auswahl nicht als "Nicht verfügbar" angezeigt werden.

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

iPhone

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

Android

1. Tippe in der Shopify App auf Shop.
2. Tippe unter Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.

1. Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Aktionen > Sprachen bearbeiten.

2. Gib in das Feld Filter unavailable ein, um die "nicht verfügbare" Übersetzung anzuzeigen.

3. Ersetze den Text Nicht verfügbar mit Make a selection.

4. Klicke auf Speichern.