Guppy Docs

English

Deutsch

English

Deutsch

Appearance

Features ​

Contents of this page:

Theme Optimizations ​

Bootstrap Configuration ​

Shopware Standard uses Bootstrap 5 as frontend framework. With Guppy, the configuration of Bootstrap variables is greatly simplified. All adjustments, such as spacing and other Bootstrap configurations, are centrally managed in the bootstrap.scss file. This allows changes to be made without deep CSS knowledge.

bootstrap.scss

List of Variables

VariableDescription
$whiteDefines the color white.
$blackDefines the color black.
$gray-100 to $gray-900Defines various gray tones from light (100) to dark (900).
$body-bgBackground color of the website or body.
$body-colorText color of the website or body.
$enable-roundedEnables or disables rounded corners for elements.
$enable-shadowsEnables or disables shadows for elements.
$spacerBase value for spacing, used for building spacers.
$spacersDefines spacing as multipliers of the base value $spacer.
$grid-breakpointsDefines the widths for different breakpoints in the grid system.
$container-max-widthsSets the maximum width for containers at different breakpoints.
$grid-gutter-widthDistance between columns in the grid system.
$container-padding-xHorizontal padding within containers.
$border-widthStandard width of borders.
$border-colorStandard color of borders.
$border-radiusStandard rounding for corners.
$border-radius-smSmaller rounding for corners.
$border-radius-lgLarger rounding for corners.
$border-radius-xlExtra large rounding for corners.
$border-radius-2xlVery large rounding for corners.
$border-radius-pillMaximum rounding for pill shapes.
$box-shadowStandard shadow for boxes.
$box-shadow-smSmaller shadows for boxes.
$box-shadow-lgLarger shadows for boxes.
$box-shadow-insetInset shadows.
$component-active-colorText color for active components.
$component-active-bgBackground color for active components.
$font-size-baseBase font size for text.
$font-size-smSmaller font size based on base size.
$font-size-lgLarger font size based on base size.
$font-weight-lighterWeight for light text.
$font-weight-lightWeight for somewhat lighter text.
$font-weight-normalStandard weight for text.
$font-weight-semiboldMedium weight for text.
$font-weight-boldWeight for bold text.
$font-weight-bolderWeight for extra bold text.
$font-weight-baseStandard weight for base text.
$line-height-baseLine height for standard text.
$line-height-smSmaller line height for text.
$line-height-lgLarger line height for text.
$h1-font-size to $h6-font-sizeFont sizes for headings (H1 to H6).
$headings-margin-bottomDistance below headings.
$headings-font-familyFont family for headings.
$headings-font-styleFont style for headings.
$headings-font-weightFont weight for headings.
$headings-line-heightLine height for headings.
$headings-colorText color for headings.
$paragraph-margin-bottomDistance below paragraphs.
$input-padding-yVertical padding for input fields.
$input-padding-xHorizontal padding for input fields.
$input-border-colorColor of borders for input fields.
$input-border-radiusRounding of borders for input fields.
$btn-padding-yVertical padding for buttons.
$btn-padding-xHorizontal padding for buttons.
$btn-font-sizeFont size for buttons.
$btn-border-radiusRounding of corners for buttons.
$breadcrumb-font-sizeFont size for breadcrumb navigation.
$spinner-widthWidth of the spinner.
$spinner-heightHeight of the spinner.
$spinner-border-widthWidth of the spinner border.
$offcanvas-horizontal-widthWidth of the horizontal offcanvas area.

Custom Configuration ​

There is also a custom.scss where Bootstrap-independent variables can be maintained.

custom.scss

List of Variables

VariableDescription
$icon-base-sizeBase size for icons, used for standard dimensions.
$icon-base-colorStandard color for icons, based on current text color.
$icon-accessibility-touch-sizeSize for touch interactions to improve accessibility.
$h1-line-heightLine height for heading H1, based on a system-wide variable.
$h2-line-heightLine height for heading H2, also system-wide defined.
$h3-line-heightLine height for heading H3, for smaller headings.
$h4-line-heightLine height for heading H4, for medium headings.
$h5-line-heightLine height for heading H5, smaller standard heading.
$h6-line-heightLine height for heading H6, the smallest heading.
$product-image-heightStandard height for product images, useful for layouts.
$product-image-height-lgHeight for product images in larger layouts, adapts to content.
$product-image-aspect-ratioAspect ratio of product images, calculated as 10:9.
$product-image-backgroundBackground color for product images, based on system-wide color.
$focus-outline-widthWidth of the outer border when an element is focused.
$focus-outline-colorColor of the outer border.
$focus-outline-offsetDistance between the outer border and corresponding element.
$focus-outline-box-shadowShadow for the outer border.

Responsive Line Heights (RLH) ​

In addition to Bootstrap's RFS Mixing, we have extended Guppy so that we can also dynamically adjust line spacing across all viewports with the responsive line heights (RLH) mixin.

rlh.scss

Usage ​

Base Mixin: @mixin rlh ​

The rlh mixin provides full functionality to make line-height values responsive.

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 ​

This mixin serves as a convenient helper to quickly define responsive line-height values.

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

Here's an example of how you can use RLH in your project:

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

h1 {
    @include rlh(1.2); // Alternatively, you can use the rlh mixin directly
}

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

Theme without Shopware Standard Styling ​

In the Guppy Theme, the standard styling from Shopware has been directly integrated. More information can be found here: 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

The complete Shopware skin has been integrated into Guppy. The main goal now is to specifically optimize this transferred skin to further improve design and functionality.

This allows us to keep the CSS file lean and performant by making adjustments directly in the skin and avoiding duplicate overriding of styles. Additionally, we can specifically optimize and adapt the styling provided by Shopware.

Theme Configuration ​

The theme.json file has been extended to provide new configuration options. How theme configuration is generally structured can be found in the Shopware Documentation.

Configuration Overview ​

The Guppy Theme offers over 230 configuration fields in 12 main categories:

Configuration Tabs ​

  1. Layout - Container, sections, responsive settings
  2. Header - Header variants and logo configuration
  3. Footer - Footer variants and social media links
  4. USP Banner - Selling points and display
  5. Login & Register - Login and registration pages
  6. Cart & Checkout - Shopping cart and checkout process
  7. Product Card - Product box configuration
  8. Product Detail - Product detail page settings
  9. Input & Button - Form and button styles
  10. Badges - Product badges and awards
  11. Alerts - Notifications and messages
  12. Guppy Cards - Special card components

Detailed Configuration Areas ​

Color System ​

The Guppy Theme provides a comprehensive color system that covers all important UI elements and enables complete control over the design.

Core Brand Colors ​

sw-color-brand-primary (Primary Color)Default: #215AFFSpecific Usage:

  • Bootstrap Primary Buttons: All .btn-primary buttons via $primary variable
  • Bootstrap Primary Components: Primary alerts, badges, progress bars
  • Main Navigation Links: .main-navigation-link:hover, .main-navigation-link.is-open, .main-navigation-link.active text and border colors
  • Focus Border: $focus-outline-color for accessibility focus indicators
  • Form Input Focus: Input field focus border colors
  • Account Sidebar: Account menu link text and border colors
  • Filter Panel: Filter button hover background (shaded variant)
  • Slider: Slider handle border and background colors
  • Category Navigation: Active category element border color
  • Checkout Progress: Progress bar active step backgrounds in linear gradients
  • Product Detail Configurator: Product variant selection border color
  • Tab Menu: Tab hover and active border colors via CSS variables
  • Top Bar Dropdowns: Dropdown link hover and active colors
  • Custom Form Controls: Active checkbox/radio button backgrounds
  • Component Active States: $component-active-bg for Bootstrap active components

sw-color-brand-secondary (Secondary Color)Default: #0B1845Specific Usage:

  • Bootstrap Secondary Buttons (.btn-secondary): Checkout register buttons, cart discount apply buttons, filter panel close buttons
  • Bootstrap Secondary Badge (.bg-secondary): 3D badge in image gallery
  • Bootstrap Utilities: Affects .text-secondary and .border-secondary classes
Background & Structure ​

sw-background-color (Background)Default: #FFFFFFSpecific Usage:

  • Body Background: Main page background color via $body-bg
  • Offcanvas Cart: Shopping cart sidebar background color
  • Input Field Backgrounds: All form input field backgrounds via $input-bg

sw-border-color (Border Color)Default: #CFD1D7Specific Usage:

  • Global Border Color: Bootstrap $border-color for all standard borders
  • Input Field Borders: Form input field border color
  • Header Sections: Header bottom borders and top bar separators
  • Footer Separators: Footer section dividers and payment method borders
  • Navigation Separators: Main navigation bottom border
  • Checkout Components: Checkout step borders, cart item separators, sidebar borders
  • Product Detail Elements: Buybox borders, tab separators, variant selection borders
  • Card Borders: Conditional card borders when Guppy Cards border setting is enabled
  • Pagination Borders: Pagination button borders in all states
  • Dropdown Borders: Dropdown menu borders

Accessibility ​

With Guppy, we place great emphasis on accessibility and work continuously to make the theme fully accessible.

In addition, we provide comprehensive Accessibility Guidelines that help you implement accessibility in your Shopware project. Our guidelines can be found at dmf-accessibility-guidelines.vercel.app.

Implemented Accessibility Features ​

Focus Management ​

  • Uniform Focus Styles: Consistent visual focus indicators
  • Focus Mixin: Reusable SCSS component for focus styles
  • Focus Visible: Modern :focus-visible pseudo-class
  • Box Shadow Integration: Additional visual highlighting
  • Skip to Main Content: Direct jump to main content
  • Skip to Navigation: Jump to main navigation
  • Skip to Search: Jump to search function
  • Theme Configuration: Activation via admin panel

Keyboard Navigation ​

  • Full Keyboard Support: All interactive elements
  • Logical Tab Order: Intuitive navigation
  • Escape Key Support: Closing modals and overlays

Screen Reader Support ​

  • ARIA Labels: Meaningful descriptions
  • Semantic HTML: Correct HTML structure
  • Live Regions: Dynamic content changes

Touch Optimization ​

  • 44px Minimum Size: Adequate touch targets
  • Touch Gestures: Native touch support
  • Hover Alternative: Touch-friendly interactions

Already Optimized Areas ​

  • Navigation: Full keyboard and screen reader support
  • Product Boxes: Optimized focus management and labeling
  • Footer: Responsive accordion navigation
  • USP Banner: Tooltip system for screen readers
  • Forms: Extended validation and error messages
  • Sliders: Accessible slider navigation
  • Checkout: Optimized user guidance

JavaScript Plugins ​

The Guppy Theme extends Shopware with modern JavaScript functionalities:

Splide Slider ​

  • Replaces Tiny Slider: Modern alternative with better performance
  • Full Accessibility: Keyboard navigation and screen reader support
  • Responsive Design: Automatic adaptation to all screen sizes
  • Touch Support: Native touch gestures for mobile devices
  • Autoplay Management: Intelligent autoplay handling

More Details: Splide Slider

Additional JavaScript Plugins ​

  • USP Banner Plugin: Interactive USP banners with tooltip functionality
  • Product Box Click Plugin: Enhanced product box interactions
  • Custom Checkout Plugin: Optimized checkout experience
  • Quantity Selector Plugin: Extended quantity selection
  • Remove Extra H1 Plugin: SEO optimization through H1 management
  • Delivery Information Plugin: Dynamic delivery information
  • Collapse Footer Plugin: Responsive footer navigation

More Details: JavaScript Plugins Documentation

Copyright © 2025-present digital.manufaktur GmbH