Klaviyo Reviews Carousel im Shopify Horizon Theme reparieren
Wer Klaviyo Reviews aktiv nutzt und gerade auf Shopifys neues Horizon Theme migriert ist, kennt das Problem: das Featured Reviews Carousel rendert kaputt. Auf Desktop teilweise noch erträglich, auf Mobile bricht das Layout komplett. Cards laufen über den Viewport hinaus, Inhalte überlappen, das Carousel sprengt seinen Container. Sobald die DevTools geöffnet werden — also der Viewport sich ändert — eskaliert das Rendering weiter und Cards werden riesig oder kollabieren auf null.
Das Problem ist nicht neu. Es gibt zwei aktive Threads in der Klaviyo Community ohne offizielle Lösung. Klaviyo Staff hat im September 2025 bestätigt, dass die eigenen Engineers daran arbeiten. Die zwei CSS-Snippets, die in den Threads als Workaround vorgeschlagen wurden, funktionieren bei den meisten Usern nicht — auch nicht bei unseren Brandeed-Tests im April 2026. Wer auf Mobile schöne Reviews zeigen will, gibt entweder auf und baut eine statische Section, oder findet die Lösung selbst.
Wir haben sie gefunden. Sie ist zwei Zeilen lang. In diesem Artikel zeigen wir, warum die offiziellen Vorschläge nicht greifen, was technisch wirklich schiefläuft, und wie du das Carousel in drei Schritten zum Laufen bringst — ohne Theme-Code anzufassen.
Die Symptome im Detail
Das Featured Reviews Carousel besteht aus mehreren Review-Cards, die in einem horizontalen Slider rotieren. Klaviyo lädt das Widget als JavaScript-Bundle, sobald die Seite gerendert ist. Der Widget-Code injiziert sein eigenes CSS in den DOM und positioniert die Cards anhand der gemessenen Container-Breite.
Im Horizon Theme passiert beim Initial-Render Folgendes:
- Auf Desktop: Die Cards werden meistens noch in der richtigen Breite gerechnet, aber das Carousel-Padding und die Pfeil-Buttons sitzen verschoben. Manchmal greift ein vorhandener `max-width: 100%` auf das Carousel und schneidet die letzte Card ab.
- Auf Mobile (<768px): Komplette Eskalation. Cards überschreiten die Bildschirmbreite um 30 bis 80 Prozent, was horizontalen Scroll auf der gesamten Seite verursacht. Die Card-Inhalte (Reviewer-Name, Sterne, Text) überlappen. Bilder werden auf 0×0 gerendert oder springen auf 100vw.
- Bei Viewport-Änderung: Sobald DevTools geöffnet oder das Fenster resized wird, läuft die Card-Berechnung neu — aber gegen den falschen Container. Cards werden riesig, der Container kollabiert. In manchen Fällen bleibt die Section in einem Zustand, in dem nur ein Hard-Refresh das Layout wiederherstellt.
Das Muster ist konsistent über alle Horizon-Section-Layouts: Featured Sections, Custom Sections, sogar Page Templates. Es liegt nicht an einem bestimmten Theme-Setting.
Was Klaviyo offiziell vorschlägt — und warum das nicht reicht
In den beiden Klaviyo-Community-Threads zu diesem Problem haben Klaviyo-Mitarbeiter zwei CSS-Snippets als Workaround gepostet. Beide kämpfen am falschen Hebel.
Snippet 1: Container-Width-Override
Das erste Snippet überschreibt die Container-Breite im Klaviyo-Widget-CSS auf `100% !important` und setzt `box-sizing: border-box`. Die Logik dahinter: Klaviyo soll den verfügbaren Platz zwingen, sich an den Container anzupassen.
Das Problem: Das Klaviyo-Widget rechnet seine internen Card-Breiten bevor das CSS greift. JavaScript misst die Container-Breite zum Zeitpunkt des Mount-Lifecycles. Wenn der Container zu diesem Zeitpunkt noch eine falsche Breite hat (was in Horizon der Fall ist, weil der Section-Wrapper sein Padding später injiziert), bekommen die Cards eine zu große Breite. Das CSS-Override setzt den Container danach korrekt, aber die Card-Breiten bleiben falsch hardcoded.
Snippet 2: Overflow-Hidden auf den Section-Container
Das zweite Snippet packt `overflow-x: hidden` auf den Section-Wrapper. Das versteckt den horizontalen Overflow optisch, aber:
- Die Cards sind weiterhin zu breit, nur sind sie jetzt unsichtbar abgeschnitten. Inhalt geht verloren.
- Auf Touch-Devices verhindert `overflow-x: hidden` das horizontale Swipen, das das Carousel eigentlich braucht. Das Widget wird unbenutzbar.
- Die Layout-Eskalation bei Viewport-Änderung tritt trotzdem auf, weil die JavaScript-Mess-Logik weiterhin gegen den falschen Container rechnet.
Beide Snippets behandeln Symptome, nicht die Ursache. In den Community-Threads berichten Nutzer, dass die Snippets entweder gar nicht greifen oder das Problem in andere Form überführen (zum Beispiel: Cards passen jetzt, aber die Pfeil-Navigation springt um zwei Cards weiter).
Die echte Ursache — Horizons Section-Container-Logik
Um die Lösung zu verstehen, muss man kurz verstehen wie Horizon Sections aufbaut.
Wie ältere Themes (Dawn) das machen
Im Dawn Theme ist eine Section ein einfacher Container: `
Wie Horizon das macht
Horizon hat ein neues Layout-System mit `--section-max-width`-CSS-Variables und mehreren verschachtelten Containern. Eine Section sieht im DOM ungefähr so aus:
```
[Klaviyo Widget Container]
```
Drei Layer mit jeweils eigenem Padding und eigener Max-Width. Der App-Block-Wrapper bekommt zusätzlich responsive CSS, das auf Mobile das Padding ändert. Klaviyos Widget misst seine Breite gegen den innersten Container, aber die Layout-Berechnung greift später, wenn der `page-width`-Container seine Custom-Property setzt.
Auf Mobile kommt erschwerend hinzu, dass Horizon CSS-Container-Queries verwendet (`@container`). Das Klaviyo-Widget benutzt klassische Viewport-Media-Queries. Beide messen unterschiedliche Bezugssysteme. Das Ergebnis: das Carousel rechnet seine Cards gegen einen Viewport, der nicht der tatsächlich verfügbare Platz ist.
Warum das nicht mit CSS lösbar ist
Du kannst nicht von außen Klaviyos JavaScript zwingen, andere Container-Breiten zu messen. Du kannst CSS-Properties überschreiben, aber das, was das Widget gemessen hat, bleibt in seinen internen Style-Werten. Wer das fixen will, muss entweder:
- Klaviyos Widget-Code ändern (geht nicht, ist ein closed Bundle), oder
- Den problematischen Section-Wrapper komplett umgehen (geht — das ist die Lösung).
Die Lösung — Custom Liquid Block in 3 Schritten
Das Klaviyo-Widget findet seinen Mount-Point über eine ID im DOM. Wenn du diese ID in einem nackten Container platzierst — ohne den ganzen Horizon-Section-Wrapper drumrum — kann das Widget seine Breite sauber gegen den Eltern-Container rechnen, und das Layout greift.
Genau das macht ein Custom Liquid Block. Er rendert einfach Liquid- und HTML-Code direkt, ohne App-Block-Logik, ohne `section-wrapper`-Klassen, ohne Container-Query-Wrapper.
Schritt 1: Den kaputten App Block entfernen
Im Theme-Editor zu der Seite navigieren, auf der das Carousel erscheinen soll (typischerweise Homepage, Produktseite oder eine eigene Reviews-Seite). Den existierenden Klaviyo Featured Reviews Carousel App Block markieren und löschen. Das ist der Block, der über Abschnitt hinzufügen → Apps → Featured Reviews Carousel eingefügt wurde.
Falls du das Widget zum ersten Mal einbaust und noch keinen App Block hast: einfach Schritt 2 direkt machen.
Schritt 2: Custom Liquid Block hinzufügen
An der gleichen Stelle einen neuen Block einfügen — diesmal über Block hinzufügen → Custom Liquid (in Horizon manchmal auch als "Liquid" gelistet, je nach Theme-Version).
Im Custom-Liquid-Editor genau diese eine Zeile einfügen — sonst nichts:
```liquid
```
Speichern. Vorschau aktualisieren. Das Carousel sollte jetzt korrekt rendern, sowohl Desktop als auch Mobile.
Schritt 3: Optional — Spacing und Container-Width kontrollieren
Weil der Container jetzt nackt ist, hat er keinen Default-Padding. Wenn du Padding oben/unten haben willst (sinnvoll, weil das Carousel sonst direkt an die Section davor klebt), dann den Code so erweitern:
```liquid
```
Den `max-width`-Wert an deinen Page-Width anpassen (Horizon-Default ist meistens 1400px, manche Brands fahren 1280px). Padding nach Geschmack — bei Brandeed nutzen wir oft `padding: 80px 24px` auf Desktop und reduzieren das per Media Query auf Mobile, aber Inline-Styles tun es für den Anfang.
Wichtig: kein `overflow-x: hidden` auf diesen Container packen. Das Klaviyo-Widget braucht horizontalen Scroll für die Card-Navigation auf Touch-Devices.
Vorher / Nachher
Was sich konkret ändert:
- Desktop: Cards füllen den verfügbaren Platz korrekt, Pfeil-Navigation funktioniert, keine abgeschnittenen Cards mehr.
- Mobile: Cards passen in den Viewport, Touch-Swipe greift, keine horizontalen Scroll-Bars auf der Page.
- Resize-Verhalten: Cards werden bei Viewport-Änderung sauber neu berechnet, kein Eskalations-Bug mehr.
- Performance: Marginal besser, weil ein Wrapper-Layer weniger im DOM existiert. In unseren Lighthouse-Tests sehen wir 5–10ms weniger Layout-Time auf der Reviews-Section.
In unseren Brandeed-Migrations sehen wir das Pattern bei jedem Shop, der von einem älteren Theme auf Horizon wechselt und Klaviyo Reviews aktiv nutzt. Der Custom-Liquid-Fix ist mittlerweile fester Bestandteil unserer Horizon-Migration-Checkliste.
Andere Klaviyo Widgets, gleiches Pattern
Das Featured Reviews Carousel ist nicht das einzige Klaviyo-Widget mit diesem Problem. Die gleiche Custom-Liquid-Lösung funktioniert für:
- Reviews List Widget: ID `klaviyo-reviews-list`. Standard-Liste aller Reviews, gleiche Section-Wrapper-Probleme bei langen Reviews-Texten auf Mobile.
- Star Rating Inline Widget: ID `klaviyo-star-rating-{product-id}`. Auf Produktseiten häufig verwendet. Das Inline-Widget rendert in Horizon manchmal mit zu viel Abstand zur Produktbeschreibung.
- Reviews Submission Form: ID `klaviyo-reviews-submission-form`. Auf Confirmation- oder Post-Purchase-Pages. Layout bricht bei langen Form-Labels.
In jedem Fall: App Block raus, Custom Liquid mit der richtigen Container-ID rein. Die jeweilige ID findest du in Klaviyo unter Reviews → Widgets → [Widget auswählen] → Embed Code. Dort steht der Container-Tag, den du brauchst.
Warum das nicht Horizon-exklusiv ist
Das gleiche Verhalten haben wir bei Tinker beobachtet — einem weiteren Shopify-Theme aus dem 2025/2026er AI-Coded-Theme-Lineup. In der Shopify Community gibt es einen Thread aus Juni 2025, der genau die gleichen Symptome beschreibt: Klaviyo Review Carousel Widgets brechen in Tinker, der Custom-Liquid-Workaround löst es.
Das Pattern ist generalisierbar: jedes Theme, das verschachtelte Section-Wrapper mit dynamischen CSS-Variablen oder Container-Queries verwendet, kollidiert mit Klaviyos klassischem Mount-Lifecycle. Wenn dein Shop ein neues Theme mit komplexerem Layout-System fährt und ein Klaviyo-Widget kaputt rendert, ist Custom Liquid die erste Sache, die du probieren solltest.
Andere Stolpersteine bei der Horizon-Migration
Wer von einem älteren Theme auf Horizon migriert, läuft typischerweise in mehrere Probleme dieser Art:
- Bilder zu klein gerendert: Horizon nutzt aggressives `loading="lazy"` und `srcset`-Logik, die mit alten Liquid-Image-Tags kollidiert.
- Custom Sections aus dem alten Theme funktionieren nicht: Section-Schemas haben sich geändert, vor allem `block_max`-Limits und Settings-Strukturen.
- Tracking-Snippets im falschen Layer: Horizon's `theme.liquid` ruft Custom-JS später als ältere Themes. Conversion-Tracking-Pixel müssen neu platziert werden.
- Performance-Regressionen: trotz neuerem Theme können CSS-Bundle-Größen größer sein als beim alten Setup, je nachdem wie viele Sections aktiv sind.
Wenn du gerade migrierst, lohnt es sich diese Liste durchzugehen. Wir haben in unseren Brandeed-Migrations etwa 60 Prozent der Probleme bei diesen vier Punkten gesehen.
Häufige Fragen
Warum bricht das Klaviyo Featured Reviews Carousel im Horizon Theme?
Horizon nutzt eine andere Section-Container-Logik als Dawn und ältere Themes. Klaviyos Widget-Wrapper rechnet seine Breite gegen einen `max-width`- und Padding-Stack, den es nicht erwartet. Dadurch laufen Cards aus dem Viewport, überlappen oder explodieren in der Größe sobald sich der Viewport ändert.
Funktionieren die offiziellen Klaviyo-CSS-Snippets nicht?
In den Klaviyo-Community-Threads (September 2025 und Januar 2026) haben Mitarbeiter zwei CSS-Override-Snippets vorgeschlagen. Bei mehreren Usern und auch in unseren Tests fixen die das Layout nicht zuverlässig. Sie kämpfen gegen den falschen Layer — das Widget-Inner-Layout statt den Section-Wrapper, der die Constraints injiziert.
Was ist die Lösung in Kurzform?
Statt den Klaviyo App Block über Abschnitt → Apps zu installieren, fügst du einen Custom Liquid Block ein und legst dort nur ein `
` rein. Das umgeht den problematischen Section-Wrapper. Klaviyos JavaScript findet die ID, lädt das Widget in einen nackten Container und kann seine Breite sauber kontrollieren.Brauche ich für diese Lösung Code-Kenntnisse?
Nein. Du arbeitest komplett im Theme-Editor. Custom Liquid ist ein Standard-Block in jedem Shopify Theme. Du brauchst keinen Theme-Code anfassen, kein App-Settings-JSON ändern, keine Liquid-Snippets schreiben.
Funktioniert der Fix auch bei anderen Klaviyo Reviews Widgets?
Ja. Das gleiche Pattern (Custom Liquid Container statt App Block) löst Probleme mit dem Reviews List Widget, dem Star Rating Inline Widget und dem Reviews Submission Form. Die jeweilige Container-ID findest du in Klaviyo unter Reviews → Widgets im jeweiligen Embed-Code.
Tritt das Problem nur bei Horizon auf oder auch bei anderen neuen Themes?
Auch bei Tinker und anderen 2025/2026er AI-/Vibe-Coded-Themes. Das Pattern ist nicht Horizon-exklusiv. In der Shopify Community (Juni 2025, Tinker Theme) wurde dasselbe Symptom dokumentiert. Der Custom-Liquid-Workaround funktioniert dort genauso.