Produktkonfigurator /Qualitätsauswahl

[Heiopei]

Hallo Zusammen,

Folgendes Anliegen:

Ich möchte z.B. ein T-Shirt anbieten welches verschiedene Größen und Farben hat. Soweit so gut.

Allerdings möchte ich auch das Shirt z.B. in Basic und Premium etc. Qualität anbieten. Das Premium Shirt ist bereits als Produkt komplett im System. Möchte auf der Tshirt-Seite nicht 2 Shirts haben die sich nur in der Qualität unterscheiden.

Also der Kunde geht auf das gewünschte Shirt und siet z.B. die Basic Variante mit allen Größen und Farben.

ER soll aber auch auswählen können, welche Qualität das Produkt hat.

Je nachdem was er aussucht, sollte ich der Prei / Beschreibung etc. verändern.

Gibt es eine App hierzur?

Vielen Dank

[Gabe]

Hey @Heiopei 

Danke für die Frage und meine erste Frage dazu wäre ob deine Theme und die Plattform das nicht können, und wenn nein, hast du Apps ausprobiert hast die das können, und wenn ja, waren sie nicht zufriedenstellend und warum?

Ganz unten biete ich eine Liste Apps die die vielleicht in die richtige Richtung bringen aber weitere Tipps wären die folgenden. 

Du kannst das ggf. ueber die Varianten loesen. Man kann Varianten für jedes Produkt erstellen, um verschiedene Optionen anzubieten, wie z.B. Größe, Farbe oder Qualität. Fuege in der Variante dann die Optionen hinzu, die du anbieten möchtest, wie z.B. Größe und Farbe. Füge anschließend die verschiedenen Qualitätsstufen als Optionen hinzu.

Sobald du die Varianten erstellt hast, kannst du die Preise und Beschreibungen für jede Variante separat festlegen. Wenn der Kunde dann eine Variante auswählt, wird der Preis automatisch aktualisiert und die entsprechende Beschreibung angezeigt.

Eine weitere Möglichkeit wäre, eine App zu verwenden, die es ermöglicht, mehrere Produkte in einem zu verkaufen. Mit einer App wie "Bundles" kann man Produkte kombinieren und dem Kunden die Möglichkeit geben, die Qualität auszuwählen. Die App aktualisiert automatisch den Preis und die Beschreibung auf der Produktseite basierend auf den vom Kunden ausgewählten Optionen. Sie managt auch den individuellen Bestand der gebündelten Produkte.

In beiden Fällen ist es wichtig, sicherzustellen, dass die Varianten und Produkte gut organisiert sind, damit der Kunde eine klare Vorstellung davon hat, was er/sie auswählt und was er/sie kauft.

Man kann auch einen sog. Produkt Router zeigen wo der Kunde seine Angaben zuerst einträgt bevor man einen Vorschlag bekommt. 

Das kannst du beispielsweise mit unseren Product Options Apps machen und hier wäre das beste mal durch ein paar Demos zu klicken und zu sagen ob da etwas in Frage für euch käme. 

Siehe ein paar Demos solcher Apps hier:

• Product Personalizer
• Shoppad
• Selbe mit etwas conditional logic
• Customily
• Globo App
• Globo App all options
• Themedev App
• Custom products app
• Advanced product options
• Dynamic product options
• Hulkapps App

Solche Apps findest du auch unter der Suche "Product customizer" oder "Product builder" im App Store und zwei Apps die ich kenne die sehr beliebt sind, sind die Product Customizer App von Zakeke, Inkybay, und die Box Builder App von BoxUp. Mir scheint die Letztere die in deinem Beispiel zu sein, wie man auf deren Demo Seite sehen kann.

Dann gibt es auch eine "Product Quiz Builder" App wo man fragen stellen kann und die Produkte werden dann je nach Kunden Antworten angezeigt, ist das richtig? Vieles kommt darauf an was du für Produkte verkaufst (konnte ich deiner Frage nicht entnehmen) und was du für Fragen deinen Kunden stellen möchtest denn Beauty Produkte sind ja grundlegend anders als beispielsweise Sportbekleidung und somit auch die Quiz Fragen die man stellen muss. Ich habe hier ein paar Beispiele gefunden die dir gefallen könnten und vielleicht ist das was dabei:

• https://camillebeckman.com/pages/camille-beckman-quiz 
• https://teelixir.com/pages/product-recommendations
• https://www.betterwayhealth.com/ 
• https://evolveskateboardsusa.com/pages/board-quiz
• https://demo.quizkitapp.com/pages/skincare-quiz-4 
• https://siesta-pillows.myshopify.com/tools/perfect-product-finder/perfect-pillow-finder#/
• Siehe weitere solche App Demos hier: https://apps.shopify.com/search?q=quiz

Alles Apps bieten mehrere Vorlagen der Quizze an, je nachdem was man braucht.

Frontend Apps die man nicht mehr braucht rate ich während der Probezeit zu entfernen, wenn man sie nicht behalten will. Auf diese Weise werden mögliche Gebühren für Apps vermieden.
Einige Frontend Apps können auch das Theme Code ändern und die Page Loading Speeds verlangsamen und man sollte überprüfen, ob die App zusätzliche Schritte zur Deinstallation erfordert, bevor man die App aus dem Shop entfernt. Solche Apps (oder Code Änderungen) können ein Theme auch aus den Theme Updates ausschließen wenn das Theme Code geändert wird. Siehe dazu bitte die App Dokumentation (https://bit.ly/3oCC5qc).

[Heiopei]

Erstmal vielen Lieben Dank für die Antwort.

Ich habe bereits das eine oder Andere ausprobiert.

Zu der Frage: bietet das nicht das Theme an?

Grundsätzlich ja. Also ich habe alles was ich brauche. Farbauswahl, Größe, Preis etc.

Aber ich habe nichts gefunden, was mir hilft.

Ggf. habe ich mich auch ein wenig missverständlich ausgedrückt.

Also das Szenario: 

Shop hat nur 3 Produkte....3 weiße Shirts.

Wenn ich meine Shop-Seite aufrufe und auf Produkte klicke, sehe ich 3 weiße Shirts.

1x Basic 1x Premium 1x Super Duper 😂

Ich möchte, wie bei Amazon, nur 1 Shirt sehen. Wenn ich darauf klicke, sehe ich von dem Basic Shirt die Beschreibung des Materials, mögliche Farben, Bilder und Preis.

Auf dieser Page (wieder wie bei Amazon) möchte ich eine Auswahl haben, Basic / Premium / Super Duper, Wenn ich also auf Premium wechsel, sollen neue Mockups geladen werden, eine neue Beschreibung (da anderes Material) etc.

Also bei 3 T-Shirts soll es nur 1 Produktseite geben (da diese absolut identisch sind nur andere Farben und anderes Material.

Wichtig hierbei, er soll sich ja alle Daten aus den jeweiligen Produkten ziehen (hier ist ja alles hinterlegt, Preis, Mockups, Größen und Farben. Die meisten Apps die ich gerade probiert habe, wäre alles per Hand einzutragen.

Ich habe die 3 Produkte ja bereits angelegt. Es soll nur 1 Seite geben mit den Auswahlmöglichkeiten der anderen Produkte. 

Das geht doch bestimmt.... 🙂

[Gabe]

@Heiopei 

Hmm, das einzige was mir dazu einfällt wäre eine Custom Development im Code was eigentlich in Shopify recht gut geht, vor allem mit einem unserer Experten und unserer FED (frontend development) Dokumentation.

Du könntest im product.liquid einen Code am Anfang der Datei hinzufügen, um eine Variable wie "selected_variant" zu initialisieren:

{% assign selected_variant = product.selected_or_first_available_variant %}

Dann einen IF-Statement und For-Loop Code wie den folgenden unter dem Abschnitt "Produktbilder" ergänzen, um die Varianten-Auswahl anzuzeigen:

{% if product.options.size > 1 %}
  <div class="variant-select">
    {% for option in product.options %}
      {% assign option_index = forloop.index0 %}
      <label for="product-select-option-{{ option_index }}">{{ option }}</label>
      <select id="product-select-option-{{ option_index }}" name="option-{{ option_index }}">
        {% for value in option.values %}
          {% assign selected = '' %}
          {% if option_index == 0 %}
            {% if product.variants[forloop.index0].id == selected_variant.id %}
              {% assign selected = 'selected' %}
            {% endif %}
          {% else %}
            {% assign index = product.variants | map: "options" | map: option | map: "first" | find: value %}
            {% if index == forloop.index0 %}
              {% assign selected = 'selected' %}
            {% endif %}
          {% endif %}
          <option value="{{ value | escape }}" {{ selected }}>{{ value }}</option>
        {% endfor %}
      </select>
    {% endfor %}
  </div>
{% endif %}

Dieser HTML Code zeigt eine Dropdown-Liste für jede Varianten-Option (z.B. Farbe und Größe) an, die der Kunde auswählen kann. Füge den folgenden Code unter dem Abschnitt "Produktbeschreibung" hinzu, um die Details der ausgewählten Variante anzuzeigen:

<div class="product-info">
  <h1>{{ product.title }}</h1>
  <h2>{{ selected_variant.title }}</h2>
  <p>{{ selected_variant.description }}</p>
  <p>Preis: {{ selected_variant.price | money }}</p>
  <p>Mockups: {{ selected_variant.images | size }}</p>
  <p>Größen: {{ selected_variant.option1 }}</p>
  <p>Farben: {{ selected_variant.option2 }}</p>
</div>

Dieser Code zeigt den Produktnamen, den Variantentitel, die Variantenbeschreibung, den Preis, die Anzahl der Mockups und die verfügbaren Größen und Farben für die ausgewählte Variante an.

Mit diesem Code kann beispielsweise der Kunden eine Variante auswählen und die Details dieser Variante angezeigt bekommen, einschließlich Material, Farben, Größen, Bilder und Preis.

Wenn du es selber auf deiner Page programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!