Produkt Info rechte Contentbox Scrollen bis zur linken Contentbox Ende

Deutsch Diskussion Technische Fragen & Antworten
,
1

Hallo,

ich möchte bei der Produkt Info Seite, die rechte Seite scrollen bis zum ende der linken Seite.

Damit man es besser versteht hier ein Beispiel:

Anker-MagGo-Powerbank-10-000mAh-Slim-Anker-DE-05-08-2025_04_04_PM (1).png
Anker-MagGo-Powerbank-10-000mAh-Slim-Anker-DE-05-08-2025_04_04_PM (1).png1972×806 140 KB

Wenn ich scrolle, scrollt es bis zur der linken Bild höhe weiterhin:

Anker-MagGo-Powerbank-10-000mAh-Slim-Anker-DE-05-08-2025_04_04_PM.png
Anker-MagGo-Powerbank-10-000mAh-Slim-Anker-DE-05-08-2025_04_04_PM.png1750×674 105 KB

Jetzt ist die rechte Seite die viel mehr Inhalt hat, wie die linken Seite auf einer Linie.

Wie kann ich das ähnlich machen?

Ich bedanke mich danke

2

Du meinst einen “Split Scroll” auf der PDP. Viele der Premium Themes haben diesen Feature out-of-the-box eingebaut. Hast du welche ausprobiert?

Oder eben eine Page Builder App wie PageFly, Shogun, oder GemPages.

3

Ich verwende das Focal Theme, wie kann ich dieses Split Scroll einbauen?

4

Ja in diesem Theme wird auf der PDP die Produktbeschreibung zentralisiert also nicht ganz einfach…und die oben-erwähnten Page Builder Apps vielleicht die beste Option…

image.png
image.png1662×1227 482 KB

Oder in der main-product.liquid, der product__media bekommt class=“left-column” und der product__info bekommt class=“right-column”. Dann die CSS-Klassen entsprechend über eine Custom-CSS-Datei oder im Template ergänzen mit einer position: sticky für die linke Spalte, und overflow: auto für die rechte. Beispiel:

CSS:

.product-page {
  display: flex;
  align-items: flex-start;
}

.left-column {
  position: sticky;
  top: 0;
  height: 100vh; /* bleibt immer sichtbar */
  flex: 0 0 50%; /* oder feste Breite */
  overflow: hidden;
}

.right-column {
  flex: 1;
  overflow-y: auto;
  max-height: 100vh;
}


  
  

    ...
5

Hey, danke für die schnelle Antwort, ich hab es jetzt in der CSS eingefügt und den Code so gestaltet:

{%- render 'product-media', product: product -%}
{%- render 'product-info', product: product, update_url: true -%}

Aber ist 100% falsch, wo gehört der erste HTML Code hin und der der zweite HTML Code? du hast 2 HTML Codes.

6

Du bist also einen Schritt weiter. Aber nicht zwei HTML-Blöcke zusammen vermischen - einen für das allgemeine Layout (

) und einen für die tatsächliche PDP-Struktur (
).

Ersetze stattdessen deinen bestehenden Wrapper-Code um die Medien und Infos:


  

    {%- render 'product-media', product: product -%}
  

  
    {%- render 'product-info', product: product, update_url: true -%}

Dann CSS hinzufügen:

.product-page {
  display: flex;
  align-items: flex-start;
}

.left-column {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  flex: 0 0 50%; /* oder z.B. 40% je nach Design */
}

.right-column {
  flex: 1;
  overflow-y: auto;
  max-height: 100vh;
  padding-left: 2rem;
}

Und falls CSS nicht mit Layout kompatibel, ein anderes definieren:

@media (max-width: 768px) {
  .product-page {
    flex-direction: column;
  }

  .left-column,
  .right-column {
    position: static;
    height: auto;
    overflow: visible;
    flex: 1;
  }
}