Produkt Info rechte Contentbox Scrollen bis zur linken Contentbox Ende

[Pallmann2024]

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:

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

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

[Ben310]

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.

[Pallmann2024]

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

[Ben310]

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...

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 <style> im Template ergänzen mit einer position: sticky für die linke Spalte, und overflow: auto für die rechte. Beispiel:

<div class="product-page">
  <div class="left-column">
    <!-- Bilder -->
  </div>
  <div class="right-column">
    <!-- Infos -->
  </div>
</div>

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;
}

<div class="product product--thumbnails-bottom split-scroll">
  <product-media class="product__media left-column" ...>
    ...
  </product-media>
  <div class="product__info right-column">
    ...
  </div>
</div>

[Pallmann2024]

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

<!-- PRODUCT TOP PART -->
<div class="product product--thumbnails-{{ section.settings.desktop_thumbnails_position }}">
<div class="left-column">
{%- render 'product-media', product: product -%}
</div>
<div class="right-column">
{%- render 'product-info', product: product, update_url: true -%}
</div>
</div>

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

[Ben310]

Du bist also einen Schritt weiter. Aber nicht zwei HTML-Blöcke zusammen vermischen - einen für das allgemeine Layout (<div class="product-page">) und einen für die tatsächliche PDP-Struktur (<div class="product product--thumbnails-...">).

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

<div class="product-page">
  <div class="left-column">
    {%- render 'product-media', product: product -%}
  </div>
  <div class="right-column">
    {%- render 'product-info', product: product, update_url: true -%}
  </div>
</div>

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;
  }
}