Alle "In den Warenkorb" Buttons auf einer Höhe

[RonNatho]

Hi Leute!

Nach ewigem Probieren, hin und her und stundenlager Arbeit geht die Frage an Euch:

Wie erhalte ich gleichgroße Produkt-Boxen bzw. wie bekommt man die In den Warenkorb Buttons alle auf eine Linie?

Hier gut zu sehen: https://ex-shisha.de/collections/zubehor

All meine Dankbarkeit gilt demjenigen, der es schafft 😄

Versuche aus anderen Einträgen liefen nicht, z.B. position: absolute; bottom: 0; right:0; und so weiter...

Liebe Grüße!

[Gabe]

Hey @RonNatho 

Danke für dein Shop Link und Hut ab! Ein super Shop hast du da...

Aber ich sehe auch was du meinst bzgl. der Anordnung und Layout der Produkte im Collection Grid. Das ist sehr ungleichmäßig und weiter unten erkläre ich die Gründe dafür:

1. Das Problem Nr. 1 ist, dass die Bilder, die du in die Produkte eingebaut hast, nicht alle die gleichen Abmessungen und Aspekte haben, also müsste man diese nochmal bearbeiten um sie alle zum selben Aspect Ratio (1:2 oder 3:5 usw.) zu machen. Das kannst du direkt im Bild-Medien Editor machen wie z. B. das Aspekt für alle Fotos festlegen. 
2. Dann sind die Titel alle sehr unterschiedliche Länge was den ATC Button weiter nach unten schieben wird, also kann man hier die Titel etwas überlegen wie man die alle gleich lang oder zu einer ähnlichen Länge machen kann.

Man kann Anpassungen vornehmen, wie z. B. den ATC Button auf dieser Seite unter dem <div> Tag zu haben. Ich sehe auch du hast am product-card-grid.liquid schon viel gearbeitet, ist das richtig? Du kannst auch versuchen diese liquid Datei auf eine frühere Version zurückzusetzen. Experten wie @r8r oder @tewe können ihren Service auch gerne bieten gegen etwas Entgelt.

Wir raten auch mehrere Themes zum Shop hinzuzufügen und zu testen. Das kostet nichts und du kannst somit sehen, wie versch. Themes mit den Bildern umgehen. Probiere doch mal ein paar Themes aus dieser Kategorie aus (https://bit.ly/3kj0X5m), die sich auf Bildqualität spezialisieren. Einfach zum Shop hinzufügen und die Shop Stammdaten werden automatisch in die Themes reingezogen, wie Produkte, Kategorien, das Menü, usw.

Lass wissen, ob ich deine Frage damit beantwortet habe : )

[RonNatho]

Hi Gabe.

Vielen Dank für die Blumen! 

Genau, am Code habe ich schon fleißig gearbeitet.

Zu den Bildgrößen: Einen Teil der Bilder erhalten wir direkt vom Hersteller, die haben dummerweise mal Größe X, mal Größe Y. Die Meisten habe ich angepasst auf 1:1 Ratio, genau wie alle selbstgemachten Bilder sind.

Genau dann kommt die angesprochene unterschiedliche Länge der Titel. Manche gehen leider nicht zu kürzen.

Im product-card-grid.liquid habe ich nur das Standard Placeholder-Image gewechselt. Nichts an Höhen oder Ähnlichem verändert. Das war vorher mit der Original Datei genau so.

Wie meinst du das mit dem <div> Tag? Wir haben hier ja das 

<li class="grid__item" ...>
<div class="grid-view-item" ...>
</div>
Und dann erst
<form>Hier sitzt der ATC Button</form>
</li>

 Also praktisch das Form unter dem div, was du geschrieben hast. Bitte klär mich auf 🙂

Ansonsten bräuchte ich ja "nur" einen flexiblen margin vom Grid View Item zum Button, bzw. eine Möglichkeit, alle Grid Items gleich hoch zu machen.

Mit dem display: flex; und verschiedenen Spielereien fliegt mir oft alles um die Ohren.

Vielleicht hast du noch eine Idee oder jemand anders hatte so eine Aufgabe schon gelöst.

Liebe Grüße

[RonNatho]

Moment, gibt es die Möglichkeit, nach einer bestimmten Zeichenanzahl den Text abzuschneiden mit "..." am Ende? Wie Google es macht.

Das wäre dann ein riesen Teil der Lösung.

[Gabe]

Hey @RonNatho 

Gute Idee mit dem "Product Title Ellipsing"! Experten sagen aber, dass die 3 Punkte nicht die beste UX ist für den User und man muss schauen dass die SEO nicht betroffen ist vom kürzen der Titel (der volle Titel sollte im HTML erhalten bleiben trotz der Kürzung).

Verwende vielleicht den folgenden Code für den Produkttitel-Tag die Funktion “truncate” wie folgt:

{{ product.title | truncate: 30 }}

Ändere einfach die "30" Anzahl der Zeichen, die du anzeigen möchtest. Denke daran, dass Leerzeichen darin auch enthalten sind. 

Du kannst das verwenden, um Produkt- und Kollektionstitel zu kürzen im product-grid-item.liquid, aber es nicht sicher ob es für alle Shopify-Titel-Tags geht, verwende einfach das | truncate: 30 Format(stelle sicher, die Pipe einzuschließen). Füge die truncate string hier hinzu <a href="{{ product.url | within: collection }}">{{ product.title |

Es gibt auch den "truncate word" Filter. Zeichen sind in Ordnung, wenn man die Größe wirklich kontrollieren will, aber die Worttrunkierung ist viel weniger abrupt. Wenn dein Inhalt SEO-indiziert werden soll, würde ich lieber "mein tolles Produkt" sehen als "mein tolles..." Hier kann man eine Min-Höhe einem 2-Zeilen-Minimum einrichten mit diesem css in der Stylesheet style.css.liquid. Da es ein Override ist, einfach am Ende hinzufügen:

.product h3 a {
min-height: 2em;
}

Das Abschneiden des Produkttitels könnte einige unerwartete SEO-Nachteile haben. Vielleicht ist die text-overflow property die bessere Wahl. Die beste Lösung wäre sicherlich, diesen Workaround zu vermeiden und einfach prägnantere Namen für die Produkte zu wählen. Aus einer UX-Perspektive ist es, wie gesagt, für den Benutzer besser, den vollständigen Titel zu sehen.

Wenn das aber ein Shopify Theme ist und du auf einem bezahlten Plan dann können wir das ggf. anschauen als Teil deiner 60-Min Design Time. Schicke uns eine E-Mail hier und lass mich hier die Ticket Nr. wissen.

[RonNatho]

Hey Gabe,

deine Hilfen sind wirklich der Hammer! Schnell und auch abseits des normalen Shopify Support mit Codes beinhaltet. Keep it up!

Leider schleichen sich bei einigen Ansätzen immer andere Kleinigkeiten ein, haha. Ich werde es also mal mit deinem Tipp versuchen und verschiedene Themes ausprobieren 🙂

Das kann ich aber nicht in einer Testumgebung sondern nur im aktiven Shop machen oder?

Sicherlich kann ich einen neuen Development Shop eröffnen und die Produkte aus dem alten Exportieren und dort einfügen. Let's See 🙂 Ich melde mich mit einer Lösung!

[Gabe]

Hey @RonNatho 

Super freut mich sehr! Und es werden sich immer andere Kleinigkeiten einschleichen, da hast du recht. Du kannst zwei Arten von Testumgebungen in Shopify verwenden:

1. Mehrere Themes im einen Shop verwenden zum rumbuddeln im Sandkästchen.
2. Ein zweites Test Shop starten für 14 Tage und dann es einfach wieder schließen.
3. Oder ein gratis Development Shop verwenden als Teil unser Partner Program. Die Stammdaten einfach im aktiven Shop exportieren und im Dev Shop importieren um sie da zu testen.

VG,