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 Support für Themes.

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 nach dem Code initVariantSelectors. Unter diesem Code findest du den folgenden Code:

// 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');

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.

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:

   liquid {% assign current_variant = product.selected_or_first_available_variant %}

   Ersetze ihn mit:

   liquid {% assign current_variant = product.selected_variant %}

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

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

4. Suche den Code {% schema %}. Füge darüber den folgenden Code in einer eigenen Zeile ein:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Der Code sollte etwa so aussehen: ```liquid {% if current_variant == blank %} {% 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. Finde 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. Finde 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. Finde 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. Finde 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:

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

   Ersetze ihn mit:

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

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

   liquid {% 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:

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

4. Suche den folgenden Code:

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

   Ersetze ihn mit:

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

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

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

   Ersetze ihn mit:

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

Hinweis

Einige Versionen von Debut 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.

1. Suche den folgenden Code:

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

   Ersetze ihn mit:

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

2. Suche den folgenden Code:

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

   Ersetze ihn mit:

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

3. Suche den Code {% schema %}. Füge darüber den folgenden Code in einer eigenen Zeile ein:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Der Code sollte etwa so aussehen: ```liquid {% if current_variant == blank %} {% 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 {{%- 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</p><p>assign money_price = price | money -%}}

      Ersetze ihn mit:

      liquid {{%- 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</p><p>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 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 nach dem Code initProductVariant: function() {. Unter diesem Code findest du den folgenden Code:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

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:

   liquid {% assign variant = product.selected_or_first_available_variant %}

   Ersetze ihn mit:

   liquid {% assign variant = product.selected_variant %}

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

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

4. Suche alle Vorkommen dieses Codes:

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

   Ersetze sie durch:

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

5. Suche den Code {% schema %}. Füge darüber den folgenden Code in einer eigenen Zeile ein:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Der Code sollte etwa so aussehen: ```liquid {% if current_variant == blank %} {% 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:

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

   Ersetze ihn mit:

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

3. Suche den Code {% schema %}. Füge darüber den folgenden Code in einer eigenen Zeile ein:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Der Code sollte etwa so aussehen: ```liquid {% if current_variant == blank %} {% 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 nach dem Code initProductVariant: function() {. Unter diesem Code findest du den folgenden Code:

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

   liquid {% assign current_variant = product.selected_or_first_available_variant %}

   Ersetze ihn mit:

   liquid {% assign current_variant = product.selected_variant %}

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

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

4. Suche den Code {% schema %}. Füge darüber den folgenden Code in einer eigenen Zeile ein:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Der Code sollte etwa so aussehen: ```liquid {% if current_variant == blank %} {% 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 nach dem Code initProductVariant: function() {. Unter diesem Code findest du den folgenden Code:

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

   liquid {% assign variant = product.selected_or_first_available_variant %}

   Ersetze ihn mit:

   liquid {% assign variant = product.selected_variant %}

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

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

4. Suche alle Vorkommen dieses Codes:

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

   Ersetze ihn mit:

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

5. Suche den Code {% schema %}. Füge darüber den folgenden Code in einer eigenen Zeile ein:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Der Code sollte etwa so aussehen: ```liquid {% if current_variant == blank %} {% 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();

Ersetze ihn mit:

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

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

   liquid {% assign current_variant = product.selected_or_first_available_variant %}

   Ersetze ihn mit:

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

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

   liquid {% 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:

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

4. Suche alle Vorkommen dieses Codes:

   liquid {% unless current_variant.available %}

   Ersetze ihn mit:

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

5. Suche den folgenden Code:

   liquid {% 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:

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

6. Suche den Code {% schema %}. Füge darüber den folgenden Code in einer eigenen Zeile ein:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Der Code sollte etwa so aussehen: ```liquid {% if current_variant == blank %} {% 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. Finde das abschließende </body> Tag am Ende der Datei. Füge auf einer neuen Zeile direkt über dem abschließenden </body> Tag den folgenden Code ein:

   liquid {% render 'pick-an-option' %}

   

7. Klicke auf Speichern.

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

1. Suche diesen Code im Formular:

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

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

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

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

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

Ersetze sie durch:

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

Weitere kostenlose Shopify-Themes

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

liquid {% assign current_variant = product.selected_or_first_available_variant %}

Ersetze ihn mit:

liquid {% 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.