Zum Hauptinhalt springen

Webshop: graphisch

Webshop: Grafische Einrichtung​

Die folgenden Elemente zeigen, welche Einstellungen welches Element im Webshop beeinflussen und angepasst werden können.

Logos und Bilder​

Favicon (Browser/App):​

Wird im Browser-Tab oder in Apps angezeigt.

  • Erlaubte Formate: JPEG, PNG
  • Empfohlene Größe: 128x128 Pixel bis 512x512 Pixel

05-webshop-konfiguration-einstellungen-logo-icon-web-favicon.png

Logo für die Titelleiste (klein):​

Optimal für die Darstellung auf PCs.

  • Maximale Größe: 144 x 92 Pixel

05-webshop-konfiguration-einstellungen-titelleiste-klein.png

Logo für die Titelleiste (breit):​

Optimal für mobile Geräte.

  • Maximale Größe: 144 x 92 Pixel

05-webshop-konfiguration-einstellungen-titelleiste-breit.png

Vorschau-Abschnitte:​

Vorschautexte, Schriftarten, Farben und Bilder lassen sich ansehen, bevor die Einstellungen gespeichert werden. Beispieltexte wie "FrachtPilot" werden in der Vorschau angezeigt.

05-webshop-konfiguration-einstellungen-titelleiste-breit-vorschau.png

Hintergrundbild:​

  • Bild, das den Hintergrund des Shops ausfüllt.
  • Optionen für Füllmethode:
    • "Komplett ausfüllen"
    • Weitere Anpassungen möglich.

05-webshop-konfiguration-einstellungen-titelleiste-breit-hintergrundbild.png

Darstellung des Liefergebiets​

Zeigt an, wo Bestellungen möglich sind, beispielsweise durch eine Karte oder eine Beschreibung (z. B. Umkreis oder bestimmte Städte).

vorsicht

Bitte konfiguriere zuerst die Liefergebiete. Weitere Informationen dazu findest du hier.

Darstellung der Liefergebiete:​

Lade eine Karte oder ein Bild hoch, um die Liefergebiete visuell darzustellen.

Wichtige Informationen zu Liefergebieten:​

Zeige Details wie den Lieferumkreis, Sonderregelungen oder saisonale Anpassungen.

Darstellung im Webshop:​

So werden die Liefergebiete direkt im Webshop angezeigt.

05-webshop-graphische-elemente-liefergebiet-webshop.png

Produktverfügbarkeit anzeigen:​

Zeige Produkte basierend auf ihrer Verfügbarkeit, Wochentagen oder Versandarten an.

Produkte ausblenden (nach Wochentag):​

Verberge Produkte automatisch, wenn sie an bestimmten Wochentagen nicht lieferbar sind. Zeige dabei einen deutlichen Hinweis zur Verfügbarkeit an.

Produkte ausblenden (nach Versandart):​

Verberge Produkte je nach gewählter Versandart und füge einen Hinweis hinzu, warum sie nicht verfügbar sind.

Schriftarten und Schriftfarben​

Standardschriftart:​

  • Hochladbare Schriftdatei im Format .ttf für den Standardtext.

05-webshop-konfiguration-einstellungen-standardschriftart.png

Standardschriftfarbe:​

  • Farbe für allgemeinen Text im Shop.

05-webshop-konfiguration-einstellungen-schriftfarbe.png

Button-Schriftfarbe:​

  • Farbe des Textes innerhalb der Buttons.

Button-Hintergrundfarbe:​

  • Hintergrundfarbe der Schaltflächen.

05-webshop-konfiguration-einstellungen-buttons-hintergrund.png

Schriftfarbe für Eingabefelder:​

  • Textfarbe für die Eingabeformulare.

05-webshop-konfiguration-einstellungen-eingabefelder.png

Überschrift-Schriftart:​

  • Hochladbare Schriftdatei im Format .ttf für Überschriften.

05-webshop-konfiguration-einstellungen-ueberschriften.png

Überschrift-Schriftfarbe:​

  • Textfarbe der Überschriftenblöcke.
Überschrift-Hintergrundfarbe:​
  • Hintergrundfarbe für Überschriftenblöcke.

05-webshop-konfiguration-einstellungen-blockueberschrift-hintergrund.png

Wo befinden sich die Elemente im Webshop?​

Hier siehst du, wo sich die einzelnen Elemente im Webshop befinden und wie sie angezeigt werden.

05-webshop-graphische-elemente-einrichtung-web.png

info

weitere Informationen zur Hinterlegung der AGB und Datenschutzhinweise findest du hier.



Eigene Inhalte in das <head>-Tag einfügen​

  • Füge eigene Inhalte (z. B. Meta-Tags, Skripte oder Verifizierung-Tags) direkt in das <head>-Tag deiner Shop-Seiten ein.
  • Dies machst du über entsprechende Einstellungen im Backend oder durch direkte Anpassungen in der Shop-Seitenkonfiguration.

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 Stil bearbeitung 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 gleich groß 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.

Kundengruppe: Einblenden Name der Kundengruppe und weitere Informationen zum Kunden​

Standardmäßig ist der Name der Kundengruppe versteckt. So kannst du die Kundengruppe im Kundenprofil sichtbar schalten.

.s-customer-details .s-customer-group {
    display: block;
}