Hallo. Ich habe schon des öfteren von Kunden gehört, dass die Bilder bei den Attributen und Eigenschaften zu klein sind und man die Farben nicht gut sieht. Hochgeladen habe ich sie mit 150x150px, jedoch zu sehen sind die Bilder mit 40x40px. Ich denke 80x80px wären gut, jedoch hab ich keine Ahnung wie man da hinbekommt. Wäre schön, wenn mir jemand weiterhelfen könnte. Danke lg claudia
Hallo, eine einfache Lösung wäre die Anpassung durch CSS-Änderung. Vorschlag 1: Größe der Bilder in der Infobox auf 80px setzen. Achtung, das ist nur ein Ansatz! Bringt weitere Probleme mit sich und muss definitiv weiter angepasst werden. Code: .page-product-info .modifiers-list li img { min-width: 80px !important; min-height: 80px !important; } Vorschlag 2: Größe der Bilder in der Infobox bei 40px belassen und beim Hovern auf den doppelten Wert skalieren, dann bist Du auch bei deiner 80x80 Dimension. Zusätzlich Box-Shadow einbauen, weil es sonst nicht optimal aussieht. Und weils auf Mobil das Pseudo-Element hover normal nicht gibt, kann man für mobil noch :active einbauen, oder einfach ohne Pseudo-Element direkt mit li.active arbeiten. Code: .page-product-info .modifiers-list li img:hover { transform: scale(2); box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; } @media (max-width: 991px) { .page-product-info .modifiers-list li img:active { transform: scale(2); box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; }}
Vielen lieben Dank für deine beiden Vorschläge. Zu Vorschlag Nr. 1: Gefällt mir gut, aber wie bekommt man 4 die Farbbilder in mehreren Reihen hin? Vorschlag Nr. 2: Finde ich auch gut, jedoch weiß man nicht, dass sich das Bild beim drüberfahren vergrößert...da müsste man vielleicht einen Hinweistext hinzufügen..Mobil hab ich keine Maus zum darüberfahren. Da wäre die 1. Variante bei Mobil die bessere Option. https://testshop.lichtakzente.at/de/braga-truciolo-led-stehleuchte.html
hiermit hast du am Desktop 4 und mobil 3 nebeneinander: Code: .page-product-info .modifiers-list li img { min-width: 80px !important; min-height: 80px !important; } .modifier-group.modifier-type__image .modifiers-list { display: flex; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); grid-gap: 10px; flex-wrap: wrap; } das "justify-content: center;" kannst auch weglassen oder durch andere Positionierung ersetzen.
Super, Dankeschön Michaela. Eine Kleinigkeit wäre hier noch schön, wenn man die Bilder in der 2. Reihe linksbündig statt mittig setzen könnte. Würde bestimmt besser aussehen
Sehr gerne. Prima. Was in deinem Shop seltsam ist, wenn man in den Artikel kommt sieht man die Bilder noch nicht, sondern man sieht nur das Dropdown Menü. Erst wenn man eine Farbe auswählt etscheinen die Bilder.
Aha, ich hab das im Testshop geprüft, aber das war bei mir nicht. Hier ist der Link vom Liveshop. Ist es das auch so? https://www.lichtakzente.at/de/braga-truciolo-led-stehleuchte.html
Nein. Da ist es nicht. Hier hast du es als Zusatzoption gemacht. Da ist immer schon das Erste ausgewählt wenn man in den Artikel kommt. Wenn du es als Variante erstellst, ist noch nichts vorausgewählt. So hattest es dann wahrscheinlich im Testshop.
Ja du hast recht. Im Testshop hatte ich Zusatzoptionen(Attribute) eingestellt und im Liveshop (Eigenschaften). Ich hab jetzt im Liveshop einen anderen Artikel mit Varianten (Eigenschaften) getestet und ich sehe ganz normal die Farbbilder. Liveshop Varianten: https://www.lichtakzente.at/de/led-wandleuchte-hotel-ideal-lux.html Testshop Varianten: https://testshop.lichtakzente.at/de/braga-puzzle-led-wand-deckenleuchte-pl60.html
OK, danke Michaela für´s nachschauen. Wenn es im Liveshop funktioniert, dann lass ich das so. Vielen lieben Dank für deine Hilfe.
Habe ich gerade mal versucht, funktioniert aber wohl mit der neuen Version nicht mehr; denke das "page-product-Info" passt nicht mehr. Versuche es weiter, aber falls jemand helfen kann.....
Mit diesem CSS Code zusätzlich könnte es gehen: Code: .page-product-info .modifiers-list li img { pointer-events: auto !important; }
Danke Super, Du bist Spitze! Habe noch ein Code: position: relative; z-index: 10; /* Bild wird nach vorne gerückt */ eingefügt, damit das hover-Bild auch nach vorne rückt.
