Guppy Docs

Appearance

Features ​

Inhalt dieser Seite:

Optimierungen des Themes ​

Bootstrap-Konfiguration ​

Der Shopware Standard nutzt Bootstrap 5 als Frontend-Framework. Mit Guppy wird die Konfiguration von Bootstrap-Variablen stark vereinfacht. Alle Anpassungen, wie Abstände und weitere Bootstrap-Konfigurationen, werden in der Datei bootstrap.scss zentral verwaltet. Dadurch können Änderungen ohne tiefgreifende CSS-Kenntnisse vorgenommen werden.

bootstrap.scss

Liste der Variablen

VariableBeschreibung
$whiteDefiniert die Farbe Weiß.
$blackDefiniert die Farbe Schwarz.
$gray-100 bis $gray-900Definiert verschiedene Grautöne von hell (100) bis dunkel (900).
$body-bgHintergrundfarbe der Webseite oder des Bodys.
$body-colorTextfarbe der Webseite oder des Bodys.
$enable-roundedAktiviert oder deaktiviert abgerundete Ecken für Elemente.
$enable-shadowsAktiviert oder deaktiviert Schatten für Elemente.
$spacerBasiswert für Abstände, der für den Aufbau von Spacern verwendet wird.
$spacersDefiniert Abstände als Multiplikatoren des Basiswerts $spacer.
$grid-breakpointsDefiniert die Breiten für die verschiedenen Breakpoints im Grid-System.
$container-max-widthsLegt die maximale Breite für Container bei verschiedenen Breakpoints fest.
$grid-gutter-widthAbstand zwischen den Spalten im Grid-System.
$container-padding-xHorizontale Polsterung innerhalb von Containern.
$border-widthStandard-Breite von Rahmen.
$border-colorStandard-Farbe von Rahmen.
$border-radiusStandard-Rundung für Ecken.
$border-radius-smKleinere Rundung für Ecken.
$border-radius-lgGrößere Rundung für Ecken.
$border-radius-xlExtra große Rundung für Ecken.
$border-radius-2xlSehr große Rundung für Ecken.
$border-radius-pillMaximale Rundung für Pillenformen.
$box-shadowStandard-Schatten für Boxen.
$box-shadow-smKleinere Schatten für Boxen.
$box-shadow-lgGrößere Schatten für Boxen.
$box-shadow-insetEingelassene Schatten.
$component-active-colorTextfarbe für aktive Komponenten.
$component-active-bgHintergrundfarbe für aktive Komponenten.
$font-size-baseBasis-Schriftgröße für den Text.
$font-size-smKleinere Schriftgröße basierend auf der Basisgröße.
$font-size-lgGrößere Schriftgröße basierend auf der Basisgröße.
$font-weight-lighterGewichtung für leichten Text.
$font-weight-lightGewichtung für etwas leichteren Text.
$font-weight-normalStandard-Gewichtung für Text.
$font-weight-semiboldMittlere Gewichtung für Text.
$font-weight-boldGewichtung für fetten Text.
$font-weight-bolderGewichtung für extra fetten Text.
$font-weight-baseStandard-Gewichtung für den Basistext.
$line-height-baseZeilenhöhe für Standardtext.
$line-height-smKleinere Zeilenhöhe für Text.
$line-height-lgGrößere Zeilenhöhe für Text.
$h1-font-size bis $h6-font-sizeSchriftgrößen für Überschriften (H1 bis H6).
$headings-margin-bottomAbstand unterhalb von Überschriften.
$headings-font-familySchriftart für Überschriften.
$headings-font-styleSchriftstil für Überschriften.
$headings-font-weightSchriftgewicht für Überschriften.
$headings-line-heightZeilenhöhe für Überschriften.
$headings-colorTextfarbe für Überschriften.
$paragraph-margin-bottomAbstand unterhalb von Absätzen.
$input-padding-yVertikale Polsterung für Eingabefelder.
$input-padding-xHorizontale Polsterung für Eingabefelder.
$input-border-colorFarbe der Rahmen bei Eingabefeldern.
$input-border-radiusRundung der Rahmen bei Eingabefeldern.
$btn-padding-yVertikale Polsterung für Buttons.
$btn-padding-xHorizontale Polsterung für Buttons.
$btn-font-sizeSchriftgröße für Buttons.
$btn-border-radiusRundung der Ecken für Buttons.
$breadcrumb-font-sizeSchriftgröße für Breadcrumb-Navigation.
$spinner-widthBreite des Spinners.
$spinner-heightHöhe des Spinners.
$spinner-border-widthBreite des Spinner-Rahmens.
$offcanvas-horizontal-widthBreite des horizontalen Offcanvas-Bereichs.

Custom-Konfiguration ​

Zudem gibt es noch eine custom.scss in der Bootstrap-Unabhängige Variablen gepflegt werden können.

custom.scss

Liste der Variablen

VariableBeschreibung
$icon-base-sizeBasisgröße für Icons, verwendet für Standardmaße.
$icon-base-colorStandardfarbe für Icons, basierend auf der aktuellen Textfarbe.
$icon-accessibility-touch-sizeGröße für Touch-Interaktionen, um die Zugänglichkeit zu verbessern.
$h1-line-heightZeilenhöhe für Überschrift H1, basierend auf einer systemweiten Variable.
$h2-line-heightZeilenhöhe für Überschrift H2, ebenfalls systemweit definiert.
$h3-line-heightZeilenhöhe für Überschrift H3, für kleinere Überschriften.
$h4-line-heightZeilenhöhe für Überschrift H4, für mittlere Überschriften.
$h5-line-heightZeilenhöhe für Überschrift H5, kleinere Standardüberschrift.
$h6-line-heightZeilenhöhe für Überschrift H6, die kleinste Überschrift.
$product-image-heightStandardhöhe für Produktbilder, nützlich für Layouts.
$product-image-height-lgHöhe für Produktbilder in größeren Layouts, passt sich dem Inhalt an.
$product-image-aspect-rationSeitenverhältnis von Produktbildern, berechnet als 10:9.
$product-image-backgroundHintergrundfarbe für Produktbilder, basierend auf einer systemweiten Farbe.

Responsive line heights (RLH) ​

Neben dem RFS Mixing von Bootstrap haben wir Guppy so erweitert, dass wir auch den Zeilenabstand dynamisch über alle Viewports anpassen können mit dem responsive line heights (RLH) Mixin.

rlh.scss

Verwendung ​

Basis-Mixin: @mixin rlh ​

Das rlh-Mixin bietet die volle Funktionalität, um line-height-Werte responsiv zu machen.

scss
@mixin rlh($values, $property: line-height) {
    @if $values != null {
        $val: rfs-value($values);
        $fluidVal: rfs-fluid-value($values);

        // Do not print the media query if responsive & non-responsive values are the same
        @if $val == $fluidVal {
            #{$property}: $val;
        }
        @else {
            @include _rfs-rule {
                #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);

                // Include safari iframe resize fix if needed
                min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
            }

            @include _rfs-media-query-rule {
                #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);
            }
        }
    }
}
Shorthand-Helper-Mixin: @mixin line-height ​

Dieses Mixin dient als bequemer Helfer, um schnell responsive line-height-Werte zu definieren.

scss
@mixin line-height($value) {
    @include rlh($value);
}
Beispiel: Line-Heights ​

Hier ist ein Beispiel, wie du RLH in deinem Projekt einsetzen kannst:

scss
body {
    @include line-height(1.5); // Responsive line-height
}

h1 {
    @include rlh(1.2); // Alternativ kannst du das rlh-Mixin direkt verwenden
}

p {
    @include line-height(1.75);
}

Theme ohne Shopware-Standard-Styling ​

Im Guppy Theme wurde das Standard-Styling von Shopware direkt integriert. Weitere Informationen findest du hier: Theme with Bootstrap Styling

json
{
    ...
    "style": [
		"app/storefront/src/scss/overrides.scss",
		"@StorefrontBootstrap",
		"@Plugins",
		"app/storefront/src/scss/skin/shopware/base.scss",
		"app/storefront/src/scss/base.scss"
	],
}

INFO

Der vollständige Shopware-Skin wurde in Guppy integriert. Das Hauptziel besteht nun darin, diesen übertragenen Skin gezielt zu optimieren, um Design und Funktionalität weiter zu verbessern.

Dies ermöglicht es uns, die CSS-Datei schlank und performant zu gestalten, indem wir Anpassungen direkt im Skin vornehmen und doppeltes Überschreiben von Styles vermeiden. Zudem können wir das von Shopware vorgegebene Styling gezielt optimieren und anpassen.

Theme-Konfiguration ​

Die theme.json Datei wurde erweitert, um neue Konfigurationsmöglichkeiten bereitzustellen. Wie die Theme-Konfiguration generell aufgebaut ist, kann in der Shopware Dokumentation nachgeschaut werden.

Allgemein ​

  • Flexible Anpassung von Grautönen: Grautöne können individuell nach Designvorstellungen angepasst werden.
  • Erweiterte Typographie: Die Basis-Schriftgröße sowie Schriftgrößen und Zeilenabstände der Headlines können flexibel konfiguriert werden, um eine optimale Lesbarkeit zu gewährleisten.

Input & Buttons ​

  • Anpassbares Inputs und Button-Design: Möglichkeit zur Konfiguration von Eckenradien, Rahmenbreiten und Schriftgrößen für Buttons und Inputs, um diese perfekt an das Corporate Design anzupassen.

USP-Banner ​

  • Vielfältige Konfigurationsoptionen: Anpassung von Aussehen und Darstellung des USP-Banners, um einzigartige Verkaufsargumente optimal hervorzuheben.

Layout ​

  • Viewport-spezifische Containerbreiten: Festlegung der Containerbreiten für Desktop, Tablet und Mobile.
  • Paddings und Margins: Konfiguration von Abständen für Sections, um ein harmonisches Layout zu schaffen.
  • Kopfzeilen- und Navigationsvarianten: Auswahl verschiedener Designs für Kopfzeilen und Navigationselemente.

Kopfzeile ​

  1. Shopware Standard: Das klassische Shopware Header-Layout
  2. Kompakt
  3. Erweitert
  4. Simpel
  1. Shopware Standard: Klassisches Navigationslayout.
  2. Kompakt: Schlanke Version.

INFO

Wir arbeiten aktuell an einer umfangreifen, komplett barrierefreien Navigation.

  1. Shopware Standard: Das klassische Shopware Footer-Layout.
  2. Guppy Standard: Erweiterter Footer mit individuell konfigurierbaren Sektionen.

Die Guppy Footer Variante wurde speziell entwickelt, um den Footer-Bereich eines Shops individueller und vielseitiger zu gestalten. Dabei bietet der Guppy Footer eine Vielzahl an Konfigurationsmöglichkeiten, die es ermöglichen, Inhalte klar zu strukturieren und gezielt an die Bedürfnisse des Shops und der Zielgruppe anzupassen.

  • Zahlungs- und Versandarten: Zahlungs- und Versandarten können aktiviert oder deaktiviert werden.
  • Individuelle Sektion: Platz für bis zu vier Badges, Marken-Icons oder andere Bilder, die individuell hochgeladen werden können.
  • Social-Media-Links: Konfigurierbare Links und Icons zu sozialen Netzwerken wie Instagram, Threads, LinkedIn, YouTube, X (Twitter), Facebook, TikTok und Xing.

Login & Registrierung ​

  • Kompakte Varianten: Auswahl einer kompakten Darstellung für Login- und Registrierungsseiten.

Warenkorb & Checkout ​

  • Optimierte Darstellung: Möglichkeit, kompakte Varianten für Warenkorb und Checkout auszuwählen, um die Benutzerfreundlichkeit zu erhöhen.

Kategorie ​

  • Produktbox-Varianten: Auswahl und Konfiguration unterschiedlicher Produktbox-Layouts.
  • Erweiterte Produktbild-Einstellungen: Zusätzliche Optionen zur Anpassung der Produktbilder, einschließlich Größe und Darstellung.

Guppy Standard Produktbox ​

Die Guppy-Standard-Produktbox ist auf Barrierefreiheit optimiert und bietet eine benutzerfreundliche Darstellung.

Produktdetailseite ​

  • Anpassbare Buybox: Anzeige von Produktnamen und Herstellern innerhalb der Buybox.

Badges ​

  • Outlines für Badges: Möglichkeit, Outlines für Badges zu aktivieren.
  • Erweiterte Farbkonfiguration: Flexible Farbgestaltung der Badges, um sie an das Design und die Markenidentität anzupassen.

Icons ​

Icons können direkt in das Theme mit selben Namen unter src/Resources/app/storefront/dist/assets/icon hochgeladen werden und das Guppy Theme überschreibt automatisch alle verwendeten Icons im Shop. Somit kann die Standard Shopware Funktion {% sw_icon %} auch ohne Namespace verwendet werden:

html
{% sw_icon 'stack' %}

Möglichkeiten zur Konfiguration von Icons:

KonfigurationBeschreibungAnmerkungen
sizeLegt die Größe des Icons fest---
packWählt das Pack aus verschiedenen Icons aus---
colorLegt die Farbe des Icons festdu können entweder vordefinierte Varianten ähnlich wie bei Bootstrap (z. B.: primary, danger etc.) nutzen oder die Farbe des Icons manuell mit CSS anpassen.
classDefiniert eine Klasse für das Icon---

Barrierefreiheit ​

Mit Guppy legen wir großen Wert auf Barrierefreiheit und arbeiten kontinuierlich daran, das Theme vollständig barrierefrei zu gestalten.

Darüber hinaus stellen wir umfassende Accessibility Guidelines bereit, die dir dabei helfen, Barrierefreiheit in deinem Shopware-Projekt umzusetzen. Unsere Richtlinien findest du unter dmf-accessibility-guidelines.vercel.app.

Bereits jetzt haben wir wichtige Bereiche optimiert, um eine bessere Zugänglichkeit für alle Nutzer:innen zu gewährleisten:

  • Navigation (in Arbeit)
  • Produktboxen
  • Footer
  • USP-Bar

Splide-Slider ​

Ersetzt den Tiny-Slider und bietet:

  • Bessere Barrierefreiheit.
  • Optimierte Ladezeiten.

Zum Splide-Slider

Copyright © 2025-heute digital.manufaktur GmbH