Hilfe bei optischer Bild-Darstellung und Fehler bei Mobiler Suche

[bbshopstockerau]

Sehr geehrte Community

ich habe bei meinen Shop 2 gravierende Probleme 

Mein Shop: www.bb-shop.at 

Beides betrifft die mobile Version

zunächst werden bei der mobilen Version die Bilder teilweise übereinander angezeigt, also nicht schön untereinander sondern teilweise überlagernd. Obwohl alle Bilder in der selben Größe angelegt worden sind. also sprich gleichgroß sind. 

Desweiteren ist es bei den Suchergebnissen nicht möglich die ersten 2 Artikel anzuklicken. erst den dritten Artikel kann man öffnen.

Das ist natürlich für einen Online-Shop mit Suchfunktion schrecklich, da man ja genau die ersten 2 Artikel meistens sucht. 

Anbei ein paar Bilder 

Bitte um Hilfe 

liebe Grüße 

Babsi 

[Kai]

Hallo bbshopstockerau,

ich helfe dir gerne weiter einen Weg zu finden deinen Shopify Shop zu überarbeiten.

Dazu habe ich gerade deinen Shopify Shop besucht und konnte dort den von dir beschriebenen Fehler vorfinden, dass die zwei ersten Ergebnisse einer Suche nicht anklickbar sind.

Kannst du mir sagen, ob seit wann dies er Fall ist und welche Änderungen zu diesem Zeitpunkt am Shop vorgenommen wurden?

Welches Theme verwendest du? Wer dein Theme entwickelt hat und unterstützt siehst du so nach.

[bbshopstockerau]

HI, 

Der Fehler in der Suche ist eigentlich schon seit Anfang an . 

LG

[r8r]

Der Demo-Store weist das Problem nicht auf, aber es kann sein, dass das in einem Release gefixt worden ist, seit Du das Theme installiert hast.

Gut, wenn's jetzt funktioniert!

LG, Mario

[r8r]

Babsi @bbshopstockerau – beide Probleme kannst Du mit CSS beheben. Das erste Thema würd ich bei den Theme-Entwicklern einmelden, die mit ihrem Support dafür eigentlich zuständig wären und zumindest das zweite Problem scheint mir auch auf unsaubere Implementierung zurückzuführen zu sein. Sollte die Suchmaske auch von denen kommen, würde ich ihnen auch diesbezüglich Feedback geben.

Da ich das Sunrise-Theme nicht kenne, weiss ich auch nicht genau, wo Du den Code am besten ergänzt, aber wahrscheinlich gibt's eine theme.css (oder theme.scss oder mit der Endung .liquid noch daran) im /assets Verzeichnis. An deren Ende kannst Du as klatschen.

ad Problem 1 – "zu breite Kacheln":

/* begrenzt die Maximalbreite der Kachel, auch wenn Wörter darin sind, deren Textlänge diese "auseinanderdrücken" */
.flexbox.flexwrap .flexbox-grid a {
  max-width: 100%;
}

/* wenn der Text nicht aus der Kachel fließen darf, dann auch folgendes … */
.flexbox.flexwrap .flexbox-grid .product-title {
  overflow-x: hidden;
}

Ergebnis:

https://www.bb-shop.at/ bei 380px Breite

vorher …

nachher … 

ad Problem 2 – "nicht klickbare Produkte im Suchergebnis":

/* erlaube durch das versteckte predictive search Layer zu klicken */
#search-form-main.hide-results .predictive-search-wrapper {
    pointer-events: none;
}

Getestet auf https://www.bb-shop.at/search?options%5Bprefix%5D=last&q=anh%C3%A4nger bei 380px Breite

Liebe Grüße aus Linz,
Mario

[bbshopstockerau]

Hi Mario, Vielen Lieben Dank für deine Antwort auf mein Shopify Problem, Leider schaffe ich es nicht alleine, da ich mich beim Programmieren nicht so gut auskenne. Kannst du mir vielleicht helfen . Lg babsi

[r8r]

Babsi @bbshopstockerau – Du kannst die Codeschnipsel z.B. am Ende der Datei assets/theme.css (möglicherweise heisst sie auch theme.scss oder theme.css.liquid oder theme.scss.liquid) einfügen.

LG, Mario