Bilderlayout in den Suchresultaten

Deutsch Diskussion Shopify Design

Topic summary

Problem: Produktbilder werden in Suchergebnissen im Format 1:1 angezeigt, während sie auf Produktseiten im Format 4:5 erscheinen. Der Nutzer möchte das Layout der Suchresultate anpassen.

Lösung (Theme Broadcast 6.2.0):

  • Zunächst eine Theme-Kopie als Testumgebung erstellen
  • Code-Zugriff über Theme → 3 Punkte → “Code bearbeiten”
  • Relevante Dateien finden: templates/search.json.liquid, sections/search-results.liquid oder snippets/product-grid-item.liquid
  • Nach Begriffen wie aspect_ratio, product-card oder aspect-ratio--square suchen
  • CSS-Klasse für 4:5-Format hinzufügen:
    .aspect-ratio--portrait {
  aspect-ratio: 4 / 5;
}
  • Optional: Mit if template.name == 'search' nur Suchergebnisse anpassen

Wichtiger Hinweis: Änderungen müssen möglicherweise an mehreren Stellen vorgenommen werden, einschließlich der Live-Suchergebnisse. Der Nutzer hat keine Coding-Erfahrung und wird sich Zeit nehmen, die Anpassungen umzusetzen.

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

ich möchte das Layout der Bilder bei der Produktsuche anpassen. in der Produktseite werden diese 4:5 abgebildet, in den Suchresultaten 1:1

2

Theme abhängig und findest du in Code → Templates → Suchergebnisse

3

Hallo Ben310, danke für die prompte Rückmeldung. Wir verwenden Broadcast 6.2.0, allerdings weiss ich nicht, wie ich hier zu Code → Templates → Suchergebnisse gelangen soll, leider. Magst Du mir hier eine Hilfestellung geben?

4

Super Theme! Zuerst eine Kopie in der Theme Library als Testumgebung erstellen wo du das selber ausprobieren kannst. Siehe dazu diese Artikel als Unterstützung hier und hier.

Dann beim Theme die 3 Punkte … → Code bearbeiten, wie hier in meinen Dawn Theme und in einer Datei wie die folgenden:

image.png
image.png1611×1114 113 KB

Suchergebnisse werden meist in einer Datei wie templates/search.json.liquid (für Ajax-Suche, Mobile/Live Search) oder templates/search.liquid (klassische Suchleiste) ausgewertet. Oder ein Abschnitt wie sections/search-results.liquid oder ein Snippet wie snippets/product-grid-item.liquid, halt wie oben aus meinem Dawn Theme abgebildet. Verwende Suchwörter wie product-card , image, aspect_ratio, object-fit oder img-Tags mit festen Größen oder CSS-Klassen wie aspect-ratio–square. Dann Utility-Klassen wie aspect-ratio–square (für 1:1) auswechseln für eine Custom-Class wie aspect-ratio–portrait (für 4:5).

Und ein CSS wie:

.aspect-ratio--portrait {
  aspect-ratio: 4 / 5;
}

Wenn dein gewolltes Ratio nur in Suchresultaten gelten soll (nicht z. B. im Grid auf der Startseite), dann einen zusätzlichen if-statement wie:

{% if template.name == 'search' %}
  
{% else %}
  

{% endif %}

Falls es keine .aspect-ratio–portrait-Klasse gibt, sie in der CSS-Datei selbst definieren wie in assets/theme.css oder assets/base.css.

5

wowowow, das ist mal eine ‘kurze Rückmeldung’… Danke vielmals für diese ausführliche Hilfestellung, ich werde mich wohl morgen mal in Ruhe daran machen, mit codieren habe ich noch keine Erfahrung. Bietest Du generell shopify-support oder was das eher ein zufälliger Treffer meinerseits?

1 Like
6

Sowas musst du im Code ändern. Bedenke, dass du auch bei den “Live-Resultaten” dies ggf. anpassen musst. Die Suchergebnisse an sich sowieso, da hat Ben schon was geschrieben. Es sind jedoch einige Stellen, die du bedenken musst.