Schneller & einfacher verkaufen mit Grid Buttons für Gambio 4.4 - 4.9

Das Mengeneingabefeld ausblenden und den Warenkorb-Button vergrößern können wir ganz einfach mit etwas eigenem CSS, zu hinterlegen im StyleEdit:

div.wm-gb-input-number{
  display: none;
}
.wm-gb-add-to-cart .btn-primary.btn-sm{
  padding: 10px 16px;
  font-size: 17px;
  line-height: 1.3333333;
  border-top-left-radius: 21px;
  border-top-right-radius: 21px;
  border-bottom-right-radius: 21px;
  border-bottom-left-radius: 21px;
}

Soll das Mengeneingabefeld zwar sichtbar bleiben, aber Plus- und Minus-Button ausgeblendet sein?

Das lässt sich einfach mit folgendem CSS-Code im StyleEdit bewerkstelligen:

.wm-gb-input-number .btn-minus, .wm-gb-input-number .btn-plus{
  display: none;
}

Um die Warenkorb-Buttons in den Produktkacheln alle auf dieselbe Höhe zu bekommen, gibt es leider keinen universell gültigen CSS-Code. Man muss Mindesthöhen angeben, die je nach Shop-Einstellungen zu Bildgrößen, Produktnamen, Anzeige der Lieferzeit in der Grid-Ansicht usw. variieren.

Wir können aber folgenden CSS-Code (einzufügen wie immer als eigenes CSS im StyleEdit) als Vorlage verwenden und die beiden min-height-Angaben unserem Shop entsprechend anpassen. Die 80px sind die Mindesthöhe des Containers für die Produktnamen. Die 130px soll der Container um Preis, Steuer, Lieferzeit und auch Warenkorb-Button mindestens hoch sein.

.productlist-viewmode-grid .product-container .title-description{
    min-height: 80px;
}
.productlist-viewmode-grid .product-container .price-tax {
     min-height: 130px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}

Tatsächlich enthalten Produktkacheln im Gambio-Shop bereits die Kurzbeschreibung. Sie sind nur versteckt. Mit folgendem CSS-Code lässt sich die Artikel-Kurzbeschreibung in den Kacheln anzeigen:

div.productlist-viewmode-grid div.product-container .product-tile div.title-description div.title,
div.productlist-swiper div.product-container .product-tile div.title-description div.title,
div.product-container.flyover .product-tile div.title-description div.title,
div.product-container.flyover .product-tile div.title-description,
div.productlist-viewmode-grid div.product-container div.description.hidden-grid,
div.productlist-swiper div.product-container div.description.hidden-grid,
div.product-container.flyover div.description.hidden-grid div.title,
div.product-container.flyover .product-tile div.title-description div.description.hidden-grid
{
  display: block;
}

Nein. Die „Grid Buttons” verbessern nur in selbst gehosteten Gambio-Shops das Einkaufserlebnis. Wer sich des Korsetts der Cloud-Shops entledigen möchte, findet in der Auflistung der beliebtesten Gambio Hosting Anbieter meiner Kunden geeignete Alternativen.

Wie immer gibt es bis zu 25% Rabatt für treue Gambio-Modul-Stammkunden. Bereits beim Kauf des Grid-Button-Tools in Kombi mit nur einem weiteren Modul gibt es 15% Rabatt auf beide.

Eine kostenlose Testversion der Grid Buttons steht in der ebenfalls kostenlosen Modulverwaltung zum Abruf bereit.

In der kostenlosen Testversion sind Warenkorb-Button und Merkzettel-Link nur für Admins aktiv. Für Kunden gibt es nur einen Zum-Artikel-Button.