Split Showcase nebeneinander im Fabric Theme (2.1.6) – möglich?

Store Design

Topic summary

Ein Nutzer möchte im Fabric Theme (Version 2.1.6) den Split Showcase so anpassen, dass Inhalte (z.B. Bilder) auf Desktop-Geräten nebeneinander in zwei Spalten und auf mobilen Geräten untereinander angezeigt werden.

Problemstellung:

  • Keine direkte Option im Theme-Editor oder passende App gefunden
  • Bisherige Bildanpassungen führen zu unbefriedigenden Ergebnissen
  • Suche nach CSS- oder Code-Snippet-Lösung

Lösungsansatz:
Ein anderer Nutzer (peterphilip) bietet Hilfe an und schlägt eine CSS-Lösung mit Flexbox/Grid und Media Queries vor:

  • Desktop (ab 768px): display: flex für nebeneinander
  • Mobil (bis 767px): display: block für untereinander
  • Hinweis: Genaue CSS-Klasse muss aus dem Theme übernommen werden

Status:
Diskussion verlagert sich in private Nachrichten zur konkreten Umsetzung. Der Hilfesuchende ist an einer Schritt-für-Schritt-Anleitung interessiert.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hallo zusammen,

ich arbeite gerade wieder an meiner Seite und habe eine Frage zum Split Showcase im Fabric Theme (Version 2.1.6).
Ist es möglich, die Inhalte (z. B. Bilder) nebeneinander anzuzeigen – also in zwei Spalten auf der Desktop-Ansicht – und auf mobilen Geräten dann untereinander, der Auflösung wegen?

Ich habe bisher keine Option oder App gefunden, mit der das direkt geht, und auch im Theme-Editor nichts Passendes entdeckt.

Hat das vielleicht schon jemand gelöst oder einen Tipp, wie man das mit CSS oder einem Code-Snippet umsetzen könnte?

Danke schon mal vorab! :folded_hands:

1 Like
2

bild beispiel
bild beispiel1785×796 149 KB

3

Hallo!

Ja, das ist möglich – man kann den Split Showcase so anpassen, dass die Inhalte auf dem Desktop nebeneinander (2 Spalten) und mobil untereinander angezeigt werden.

Da das Fabric Theme im Editor keine direkte Option bietet, kann man es mit CSS oder einem kleinen Code-Snippet lösen.

Zum Beispiel mit Flexbox oder Grid und einem Media Query wie:

@media (min-width: 768px) {
  .dein-split-element {
    display: flex;
  }
}
@media (max-width: 767px) {
  .dein-split-element {
    display: block;
  }
}

(Die genaue Klasse muss aus dem Theme übernommen werden.)

:white_check_mark: Wenn du möchtest, kann ich dir den genauen Code für Fabric Theme heraussuchen – sag einfach Bescheid, welche Section / welcher Block gemeint ist.

Vielleicht hat auch schon jemand eine fertige Lösung – freue mich auf weiteren Austausch!

1 Like
4

Moin PeterPhilip,

vielen Dank für deine Rückmeldung – freut mich wirklich sehr!

Genau so mag ich’s am liebsten: am Desktop nebeneinander, auf Mobil untereinander. Leider bekomme ich das selbst einfach nicht sauber umgesetzt – umso mehr danke, dass du mir dabei hilfst!

Ich habe die Bilder jetzt zwar so zugeschnitten, dass es auf beiden Geräten irgendwie passt – aber ehrlich gesagt gefällt mir das Ergebnis überhaupt nicht.

Könntest du mir bitte bei der Umsetzung helfen?
Das wäre mega.

Liebe Grüße
Tim
Hustle in Flames

5

Vielen Dank, dass du mich kontaktiert hast!
Ich helfe dir gerne dabei, dies in deinem Store umzusetzen.
Wenn es für dich in Ordnung ist, darf ich gleich damit beginnen?

Vielen Dank,
Peter Philip

6

Klar, du kannst mir am liebsten sagen was du dafür bekommst und mir es Schritt für Schritt erklären. Habe dir eine Privat Nachricht geschickt