Hallo zusammen,
ich verzweifle so langsam an SW6.
Kann mir jemand behilflich sein und sagen wie ich diese großen freien Lücken weg bekomme? (markiert mit einem blauen x).
Wenn ich mit der Größe der Produktbilder spiele (strecken/standard/füllen) wird die Produktkurzbeschreibung gänzlich ausgeblendet und der freie Platz wird noch viel größer.
Vielen Dank
Da ist im CSS eine min-height bzw. eine height für die Elemente angegeben. Einfach im CSS für mobile Ansicht überschreiben.
Ich stehe vor dem selben Problem.
Sowohl in der mobilen als auch Desktop-Ansicht ist die Ansicht nicht schön.
Kannst Du @Max_Shop sagen wo ich/wir diese Einstellungen genau vornehmen können?
Wenn ich im Kategorie-Layout unter „Category Listing“ als Layout-Typ „Standard“ wähle, sind die Produktbilder ziemlich klein, die Kurzbeschreibung ist drin aber unter und über der Kurzbeschreibung ist sehr viel Platz.
Wenn ich als Layout-Typ „Großes Bild“ wähle, dann ist das Produktbild zwar groß und passt sich der Breite der Produktbeschreibung an, aber die Kurzbeschreibung fehlt komplett und es ist weiterhin eine sehr große Lücke zwischen Produkttitel und Warenkorb-Button.
Idealerweise sollte das Produktbild so groß sein das es über die komplette Breite geht und nicht zu klein ist, die Kurzbeschreibung angezeigt werden und dies nicht mit so viel Freiraum bis zum Warenkorb Button.
Wenn ich in unsere Erlebniswelt in das dafür ausgewählte Layout gehe und in den Block klicke, sehe ich zwar rechts die Möglichkeiten CSS angaben zu machen, jedoch sind keine zum überschreiben da, sofern ich da überhaupt richtig bin.
Vielen Dank
Bina
Im Editor ist das nicht möglich. Ihr müsst das CSS individuell abändern.
Hier kann man einiges einsparen. Ansonsten einfach in den Quelltext schauen:
.product-variant-characteristics {
min-height: 3em;
}
.product-description {
height: 54px;
margin-top: 10px;
font-size: 14px;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.product-cheapest-price {
min-height: 20px;
font-size: .75rem;
line-height: 20px;
margin-bottom: 32px;
}
Hi @Max_Shop ,
danke für deine Rückmeldung.
Das bedeutet wir müssen ins den Quellcode des Themes eingreifen?
Bin kein IT-ler, wie die wenigsten Shopbetreiber hier, daher einfach nochnal die Rückfrage.
Danke dir
Ja, ihr müsst das CSS überschreiben. Wüsste nicht, dass es eine andere Möglichkeit gibt.
Es gibt aber kostenlose Plugins, die CSS in die Website einfügen lassen.
Meinst du bspw. dieses hier?
Da muss ich „nur“ den Code eintragen und er kann mir damit das Listing etc. abändern?
Okay also ich konnte nun die Kurzbeschreibung höher schieben, sodass diese schön an den Titel angegliedert ist.
VIELEN DANK Bis hier hin @Max_Shop
Kannst Du mir denn auch sagen wie ich es hinbekommen das die Kluft zwischen dem „Detail“ oder „Warenkorb“ Button und der Kurzbeschreibung nicht mehr so groß ist?
Sprich hier diese rot markierte Stelle.
Sollte man dir hier irgendwo eine User-Bewertung hinterlassen können 
Lass es mich wissen!!
Herzchen und „Als Lösung markieren“ sind das Höchste der Gefühle im Forum 
Du musst dir einfach nur den Quelltext ansehen, dann kommt du schnell zu den gewünschten Lösungen:
<div class="product-info">
<div class="product-rating">
</div>
<a href="https://example.com" class="product-name" title="Beispiel-Artikel">
Beispiel-Artikel
</a>
<div class="product-variant-characteristics">
<div class="product-variant-characteristics-text">
</div>
</div>
<div class="product-description">
Beschreibung
</div>
<div class="product-price-info">
<p class="product-price-unit">
</p>
<div class="product-price-wrapper">
<div class="product-cheapest-price">
</div>
Ab
<span class="product-price">
10,00 €*
</span>
</div>
</div>
<div class="product-action">
<a href="https://example.com" class="btn btn-block btn-light" title="Details">
Details
</a>
</div>
<input type="hidden" name="product-name" value="Beispiel-Artikel">
<input type="hidden" name="product-id" value="xxxxxxxxxxx">
</div>
CSS-Klassen, die in Frage kommen:
product-description
product-price-info
product-price-unit
product-price-wrapper
product-action
height, min-height, padding und margin sind deine Freunde in dem Fall.
Zuerst dachte ich „WTF“ wie soll ich das machen?
Nach suchen und lesen habe ich nun folgende Codes in den Editor oben eingefügt und alles ist schön harmonisch. (Falls jemand das selbe Problem lösen möchte)
Danke!
Zuerst:
.product-variant-characteristics {
min-height: -0em;
}
.product-description {
height: 54px;
margin-top: -31px;
font-size: 14px;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.product-cheapest-price {
min-height: 20px;
font-size: .75rem;
line-height: 20px;
margin-bottom: 32px;
}
und einen weiteren Eintrag mit:
.product-price-info {
margin-top: -90px;
}
PS: Deine Antwort wurde als Lösung markiert und ein Herzchen hast auch bekommen. Leider gibt´s keine Küsschen Funktion^^ 
DANKE!
Ich habe die obigen Zeilen verwendet, allerdings wird bei Variantenanzeige (zum Beispiel, wenn man im FIlter eine Farbe auswählt) im Listing der Text zusammen geschoben.
Hier das Original ohne Auswahl im Filter:
Und hier nach der Auswahl eines Filters (rot gewählt):
Kann man das irgendwie umgehen / verbessern?
