FROM CACHE - de_header

Dawn Produktseite anpassen Bilder an die Seite

Gelöst

Dawn Produktseite anpassen Bilder an die Seite

robocrom
Besucher
2 1 0

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 

1 AKZEPTIERTE LÖSUNG
robocrom
Besucher
2 1 0

Erfolg.

hm ich finde die Dateien nicht 

ich werde mir mal lieber die Page builder genauer anschauen 

vielen dank für deine Antwort

Lösung in ursprünglichem Beitrag anzeigen

3 ANTWORTEN 3

Gabe
Shopify Staff
18371 2876 4240

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

robocrom
Besucher
2 1 0

Erfolg.

hm ich finde die Dateien nicht 

ich werde mir mal lieber die Page builder genauer anschauen 

vielen dank für deine Antwort

Gabe
Shopify Staff
18371 2876 4240

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