Darstellung des Shops mit CSS anpassen

Wenn dir die Einstellungsmöglichkeiten im FrachtPilot nicht ausreichen, um den Shop nach deinen Wünschen zu gestalten, kannst du mit einer eigenen CSS-Datei deinen Shop noch individueller konfigurieren.

Auf dieser Seite wollen wir dir einige Beispiele zeigen, mit denen du beginnen kannst den Shop optisch anzupassen. Wir können natürlich an dieser Stelle keine grundlegende Einführung in CSS-Styling anbieten, aber für den Einstieg finden sich hervorragende Anleitungen im Netz (z.B. hier).

Lege zuerst eine leere CSS-Datei in einem beliebigen Texteditor an und mach dich damit vertraut, wie du diese in deinem Browser lokal testen kannst.

Wenn du z.B. Mozilla Firefox oder Chrome nutzt, dann ruf den Shop auf und drück auf der Tastatur die Taste 'F12'. Es öffnet sich eine Leiste, in der du den Reiter Stilbearbeitung wählst und mit einem Klick auf den hier rot umrandeten Knopf deine Datei importieren kannst.

Auf diese Art kannst nur du deine aktuellen Bearbeitungen sehen und kannst so in Ruhe entwickeln und testen. Um die Änderungen später für alle Kunden sichtbar zu machen, musst du deine CSS-Datei im Frachtpilot in den Webshop-Einstellungen unter dem Punkt "Eigene CSS-Datei hochladen" hinzufügen.

CSS-Klassen

Wir haben für den Shop eigene CSS-Klassen definiert, die du so überschreiben kannst.

In folgender Datei findest du eine Übersicht der wichtigsten CSS-Klassen, die du für die CSS-Anpassung nutzen kannst: Übersicht

Beispiele

Im Folgenden findest du einige mögliche Änderungswünsche und den CSS-Code, mit dem diese Änderung im Shop vorgenommen werden kann.

Ändern der Farbe, mit der Preise angezeigt werden:

.s-item-total .price-tag, .s-product-price .price-tag{
    color:black !important;
}

Ändern der Anzeigegröße von Produktnamen:

.s-product-name , .s-product-name a{
    font-size: 1.2rem;
}

Auf dem Handy nur eine "Produktspalte" anzeigen lassen:

@media (max-width: 576px){
    :root{
      --s-columns-xs: 1; 
      --s-item-width-xs: calc((100vw * 12/12 - 30px ) / var(--s-columns-xs));
    }
}

Ändern der Textgröße der Schaltflächen im Header:

.s-header .btn,.s-header .search-form [type="search"]{
    font-size: 1.2rem
}

Ändern der Farbe von "Alerts" (Datenschutz-Einwilligung, Willkommensnachricht etc.) :

.shop .alert-info, .s-alert{
    background-color: green;
    color:white;
}

Die Hintergrundfarbe der Knöpfe bei der Mengenauswahl ändern:

.s-quantity-selector .btn-primary, .s-product-cart-controls .btn-primary{
    background-color: green;
    border-color: green;
}

Die Kartentitel bei der "Zur Kasse" Ansicht anpassen:

.s-checkout-card .card-header{
background-color: #40c060;
color:white;
}
.s-checkout-card .card-header a{
color:white;
}

Darstellung der Preiszusammenfassung einer Bestellung ändern:

.s-value-breakdown .font-weight-bold{
font-size: 1.2rem;
text-decoration: underline black;
}

Preis anzeige ändern (Zahlen gleichgroß und mit Komma getrennt):

.price-tag .integers{
  font-size: 110%;
}
.price-tag .decimals{
  font-size: 110%;
}
.price-tag .decimals:before{
  content:','
}

Die Marke nicht im Filter anzeigen:

.filter-attribute[data-filter-attribute="brand"]{
  display: none !important;
}

Anmeldung Neukunden entfernen:

Wenn Kundinnen noch nicht bestellen sollen oder nur Gastbestellungen möglich sein sollen.

body.login div.card:last-child{
  display: none;
}

Entfernen der maximalen Bestellmenge pro Produkt

.s-product-max-order-quantity {
  display: none;
}

Anzeige der Artikelnummer im Shop

.s-internal-number {
    display: block;
}