Liquid, JavaScript, Themes
Hallo,
ich benötige Unterstützung bei der Einbindung von Size Swatches für meinen Online-Shop.
Wir benutzen das Theme "Streamline" und haben bereits Color Swatches aktiviert. Wir möchten jedoch ebenfalls Size Swatches in der Kategorieseite haben.
Zur Zeit sieht es so aus:
Das Ziel ist es, unter den Farben die vorhandenen Größen angezeigt zu bekommen.
Unser Ziel:
Die vorhandenen Farben UND Größen anzeigen
Ich hoffe uns kann jemand weiterhelfen!
Store: hoodboyzrheine.myshopify.com
Passwort: hoodboyz!
Gelöst! Zur Lösung
Erfolg.
Hut ab, dass du es bis dahin gebracht hast! Machst du das im live Theme oder in in einer Testkopie zuerst? Und du möchtest sowas ähnliches wie das hier erreichen? Im Quellcode dieser Page siehst du wie das ungefähr aussehen soll.
Das Problem hier ist, dass das von vielen Faktoren abhängt und im Backend viele ständig bewegende Teile im Spiel sind, wie z. B. das Backend Bestand Modul (current_variant.inventory_quantity
) oder wer den Bestand verwaltet (current_variant.inventory_management
). Das wird mehrere Code Snippets geteilt über mehrere Liquid Dateien verlangen (abgesehen davon welches Theme das ist). Ich habe ein paar Entwickler Anleitungen und Leitfäden gefunden die dich ggf. in die richtige Wege leiten können und ich rate hier ggf. einen Experten zu konsultieren - wir haben hier einige die vielleicht verfügbar sind wenn nicht allzu ausgelastet. Und wenn das ein Shopify Theme dann kann unser Theme Team das ggf. anschauen basierend auf unserer Design Richtlinie.
Du kannst gerne schauen, ob du die notwendigen Code Snippets aus den folgenden Anleitung entnehmen kannst:
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hey @Hoodboyz
Du brauchst also Size Swatches und weitere Optionen auf der Produktseite anzeigen, ist das richtig? Das würde die Kundenerfahrung viel verbessern, da hast du recht, v. a. wenn hier auf Kleiderprodukte zu schließen ist, habe ich das richtig verstanden?
Native im System sind 3 Optionen maximal möglich aber die good News ist, dass das mit Apps möglich ist, deinen Kunden eine tolle Product Configurator Erfahrung anzubieten. Diese Apps demonstriere ich jetzt unten und du müßtest die App wählen die am besten zu deinen Produkten und deren Anforderungen passt:
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Vielen Dank für die Antwort. Ich bin nicht auf der Suche nach einer Product Options APP.
Ich suche nur eine Möglichkeit, wie ich im Code (Liquid) Size Swatches bei der Kategorieseite einfügen kann, ohne eine App zu installieren.
Siehe Bild.
I have now edited it into the code and it works. It looks like this.
Now I would like to add a little circle behind the sizes. Could you help me how i can add it into the code?
Also "L" is not in stock, but it doesn't get lower opacity to show that it is not available.
/* -- Collection size swatches -- */
span.size-values {
background-color: $colorSplash;
color: set-accent-text-color($colorSplash);
padding: 4px 10px;
margin-right: 2px;
}
span.size-values.soldout {background-color: lighten($colorSplash, 20%);}
@include at-query($max, $small) {
span.size-values {
padding: 2px 4px;
margin-right: 1px;
}
span.size-values.soldout {
opacity:0.3;
display:none;
}
}
/* -- end size swatches -- */
<span style="display:block; margin-top:5px">
{% unless sold_out %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
{% assign downcased_option = option.name | downcase %}
{% if downcased_option contains 'Größe' or downcased_option contains 'größe' %}
{% assign is_size = true %}
{% for value in option.values %}
{% assign variant_avialable = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_avialable = false %}
{% endunless %}
{% endif %}
<span class="size-values {% unless variant_avialable %}soldout{% endunless %} text-center">{{ value | escape }}</span>
{% endfor %}
{% endif %}
{% endfor %}
{% endunless %}
{% endunless %}
</span>
Erfolg.
Hut ab, dass du es bis dahin gebracht hast! Machst du das im live Theme oder in in einer Testkopie zuerst? Und du möchtest sowas ähnliches wie das hier erreichen? Im Quellcode dieser Page siehst du wie das ungefähr aussehen soll.
Das Problem hier ist, dass das von vielen Faktoren abhängt und im Backend viele ständig bewegende Teile im Spiel sind, wie z. B. das Backend Bestand Modul (current_variant.inventory_quantity
) oder wer den Bestand verwaltet (current_variant.inventory_management
). Das wird mehrere Code Snippets geteilt über mehrere Liquid Dateien verlangen (abgesehen davon welches Theme das ist). Ich habe ein paar Entwickler Anleitungen und Leitfäden gefunden die dich ggf. in die richtige Wege leiten können und ich rate hier ggf. einen Experten zu konsultieren - wir haben hier einige die vielleicht verfügbar sind wenn nicht allzu ausgelastet. Und wenn das ein Shopify Theme dann kann unser Theme Team das ggf. anschauen basierend auf unserer Design Richtlinie.
Du kannst gerne schauen, ob du die notwendigen Code Snippets aus den folgenden Anleitung entnehmen kannst:
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024