Zum Hauptinhalt springen

Webshop: graphisch

Graphische Elemente​

In den Einstellungen unter dem Reiter "Webshop" kann der Shop grafisch eingerichtet werden. Bitte lade deine Logos und Bilder in den Formaten JPEG oder PNG hoch.

  • Logo-Icon Browser/App: Dieses Logo wird im Reiter des Browsers angezeigt. Es muss mindestens 128 Pixel hoch und 128 Pixel breit sein und maximal 512x512 Pixel betragen.
  • Wenn du ein Logo für die Titelleiste hochladen möchten, darf es maximal 144 Pixel breit und 92 Pixel hoch sein. Das "Logo in Titelleiste (klein)" wird für die Darstellung auf PCs verwendet. Das "Logo in Titelleiste (groß) wird auf mobilen Geräten verwendet.

Weiter unten kannst du unter anderem Schriftarten und Farben definieren. Diese müssen im .ttf-Format vorliegen. Die Farbe von Texten und Elementen kann durch Klicken auf die entsprechenden Felder ausgewählt werden.

Welche Einstellung welches Element beeinflusst, kannst du den beiden folgenden Screenshots entnehmen:

Webshop - Graphische Einrichtung Elemente

Webshop - Graphische Einrichtung Elemente



Anpassung mit CSS​

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.

CSS Bearbeitung - Mozilla Editor

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. Die von uns definierten CSS-Klassen erkennst du an dem Prefix "s-".

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

Aufgepasst!

Alle Anpassungen der CSS-Klassen und <head>-Inhalte erfolgen auf eigene Verantwortung. Individuelle Anpassungen der CSS-Datei im Shop durch den regulären Support nicht abgedeckt. Kontaktiere uns gerne für ein individuelles Angebot: support@frachtpilot.de

CSS-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;  
}

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;  
}

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;  
}

Preisanzeige ändern (Zahlen gleichgroß und mit Komma getrennt)​

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

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 aktivieren​

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

Produktbeschreibung: Anpassung Farbe und Schriftgröße​

Beispiel für Überschrift/Heading 3. Heading 1 und 2 sind analog möglich.

.s-info-text h3,.modal-body h3{
 font-size: 1.2rem;
 color: #FF4AA7;
}

Dauerbestellungen: Ausblenden von Frequenzen/Häufigkeit im Shop​

Wenn du die Frequenzen/Häufigkeit bei Dauerbestellungen ausblenden möchtest, damit Kund*Innen bspw. nur Wöchentlich und Zweiwöchentlich auswählen können, dann kannst du dies mit folgendem CSS-Code erreichen:

.checkout_recurring_frequency option:nth-child(n+3) {
 display: none;
}

n+3 bedeutet, dass ab dem dritten Element (also ab Dreiwöchentlich) die Frequenzen ausgeblendet werden. Admin-Benutzer*Innen können weiterhin alle Häufigkeiten auswählen.