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:
{%- for media in product.media -%}
{%- render 'media', media: media, product: product -%}
{%- endfor -%}
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:
{%- for media in product.media -%}
{%- render 'media', media: media, product: product -%}
{%- endfor -%}
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! 