Shopify-Themes, Liquid, Logos und ähnliche Themen
Hallo
ich benutzte das Theme Dawn und möchte nun auf der Produktseite Bilder neben dem Produktbild haben und nicht da drunter ( ich kann keine Bilder hier hochladen , hoffe also es ist verständlich wie ich das meine )
ist das mit dem Theme Dawn machbar ?
Viele Dank schon mal
Gelöst! Zur Lösung
Erfolg.
hm ich finde die Dateien nicht
ich werde mir mal lieber die Page builder genauer anschauen
vielen dank für deine Antwort
Hey @robocrom
Danke für die Frage und ohne einen Link zu einem konkreten Beispiel werde ich hier ein paar generelle Vorschläge hier abgeben die einen Eingriff in das Code des Dawn verlangen würden.
Man kann es auch mit einer unserer Page-Builder Apps erreichen mit dem man tolle Produktseiten bauen kann die das Shopping Erlebnis deiner Kunden so richtig verbessern können. Wenn du interesse in einer unserer Page-Builder Apps hast dann siehe sie hier.
Wenn du es selber auf deiner XXXXseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du die hier eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Ä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!
Es wäre möglich, das Layout der Produktseite in Shopify's Dawn-Theme anzupassen, um Bilder neben dem Hauptproduktbild anzuzeigen, anstatt darunter. Um dies zu erreichen, muss man einige Anpassungen am Theme-Code vornehmen indem du zu "Online-Shop"- > "Themes" -> "Aktionen" -> "Duplizieren" -> "Code bearbeiten" gehst.
Im Code-Editor suche nach der Datei "product.template.liquid
" im Verzeichnis "Sections
". In der Datei suche den entsprechenden Code-Abschnitt, der die Produktbilder anzeigt, der ungefähr wie folgt aussieht:
<div class="product__media-list grid grid--1-col grid--2-col-tablet">
{%- for media in product.media -%}
<div class="product__media-item">
{%- render 'media', media: media, product: product -%}
</div>
{%- endfor -%}
</div>
Um die Bilder nebeneinander anzuzeigen, muss man die CSS-Class "grid--1-col grid--2-col-tablet
" ändern oder eine neue CSS-Class hinzufügen oder die vorhandene Klasse anpassen, um die gewünschte Anordnung zu erreichen. Zum Beispiel:
<div class="product__media-list grid grid--2-col grid--3-col-tablet">
{%- for media in product.media -%}
<div class="product__media-item">
{%- render 'media', media: media, product: product -%}
</div>
{%- endfor -%}
</div>
Hier haben wir die Class "grid--1-col
" zu "grid--2-col
" geändert, um zwei Bilder nebeneinander auf mobilen Geräten anzuzeigen. Die Class "grid--2-col-tablet
" wurde zu "grid--3-col-tablet
" geändert, um drei Bilder nebeneinander auf Tablets anzuzeigen. Man kann die Anzahl der Spalten entsprechend deinen Anforderungen anpassen.
Denke daran, wie oben bereits erwähnt, dass die Anpassungen am Theme-Code zu unerwarteten Ergebnissen führen kann. Daher ist es ratsam, vor der Durchführung von Änderungen ein Backup des Themes zu erstellen oder die Änderungen in einer Kopie des Themes vorher zu testen.
Bei weiteren Fragen dazu kann ich, wie gesagt, gerne einen Experten empfehlen! 😉
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
Erfolg.
hm ich finde die Dateien nicht
ich werde mir mal lieber die Page builder genauer anschauen
vielen dank für deine Antwort
Absolut gerne geschehen und ich hoffe die Page Builder App wird das für euch elegant lösen!
VG,
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
Mit dem Lernpfad der Shopify Academy und dem Verified Skills-Badge Expanding Your Sho...
By Shopify Feb 7, 2025Den Verkauf im Großhandel steigern: In der Shopify Academy lernst du, wie das geht, zum...
By Shopify Feb 3, 2025Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024