Guppy Docs

English

Deutsch

English

Deutsch

Appearance

Features Overview ​

The Guppy Theme offers comprehensive customization options for Shopware 6 shops with a focus on performance, accessibility, and user experience.

Contents of this page:

🚀 Theme Optimizations ​

Bootstrap Integration ​

  • Central Configuration: All Bootstrap variables in one bootstrap.scss
  • 230+ Configuration Fields in 12 main categories
  • Responsive Line Heights (RLH): Extends Bootstrap RFS with responsive line heights
  • Performance-optimized: Without Shopware standard styling for lean CSS files

Extended Features ​

  • 12 Header/Footer Variants: From minimalist to extended
  • Responsive Design: Mobile-first approach with optimized breakpoints
  • Icon System: Easy integration of custom icons
  • Custom Properties: Bootstrap-independent variables for extended customizations

🎨 Design System ​

Color System ​

  • 9 configurable gray tones (Gray 100-900)
  • Flexible color palette: Primary and secondary colors customizable
  • Consistent application: Automatic color inheritance in all components

Typography ​

  • Responsive font sizes: Automatic adjustment across all viewports
  • 6 headline levels: H1-H6 with configurable sizes and line heights
  • Custom Fonts: Plugin support for custom fonts

Layout System ​

  • Flexible containers: Configurable widths for different layouts
  • Responsive paddings: Viewport-specific spacing
  • CSS Grid Integration: 11 additional grid layouts via plugin

🧩 Component System ​

Header Variants ​

  1. Shopware Standard: Classic header layout
  2. Guppy Standard (Compact): Optimized, sleek design
  3. Extended: With top bar and additional elements
  4. Simple: Minimalist design

Features:

  • Configurable logo height (default: 22px)
  • Skip links for accessibility
  • Responsive navigation with keyboard support
  • Guppy Standard Footer: 3-section layout
  • Social Media Integration: 8 platforms supported
  • Payment/Shipping Icons: Automatic integration
  • Custom Sections: Up to 4 custom images

Product Cards ​

  • Accessible Guppy Variant: Fully accessible
  • Configurable Aspect Ratio: Default 10:9
  • Protective Frame: Product image optimization
  • Object-Fit Options: contain or cover
  • Flyout Variants: Standard and compact
  • Single-level Categories: Simplified navigation possible
  • Full Accessibility: Screen reader and keyboard support
  • Responsive Accordion: Mobile-optimized display

🛒 E-Commerce Features ​

USP Banner ​

  • Responsive Display:
    • Desktop: 1-4 USPs static
    • Tablet: 1-2 USPs as slider
    • Mobile: 1 USP as slider
  • Tooltip System: Automatic for longer content
  • Configurable Layouts: Standard and benefits

Product Detail Page ​

  • Buybox Variants: Standard, with border, with background
  • Gallery Options: Scrolling or fixed layout
  • Tab System: Properties as separate tab possible
  • Contact Integration: Optionally displayable contact details

Checkout Optimization ​

  • Compact Variant: Space-saving display
  • Progress Tracking: Visual progress
  • Auto-Save: Automatic saving of form data
  • Extended Validation: Client-side form validation

Badge System ​

  • Configurable Colors: For all badge types
  • Outline Support: Optionally activatable borders
  • Accessibility-optimized: Contrast-tested colors

♿ Accessibility ​

Implemented Features ​

  • Skip Links: To main content, navigation, and search
  • Focus Management: Uniform, configurable focus styles
  • Keyboard Navigation: Full keyboard support
  • Screen Reader: ARIA labels and semantic HTML
  • Touch Optimization: 44px minimum size for touch targets

Guidelines ​

Comprehensive Accessibility Guidelines for implementing accessibility in Shopware projects.

🔧 Developer Features ​

JavaScript Plugins ​

  • Splide Slider: Replaces Tiny Slider with better performance
  • Product Box Click: Extended product card interactions
  • USP Banner: Interactive banner system
  • Custom Checkout: Optimized checkout experience
  • Quantity Selector: Extended quantity selection

SCSS Architecture ​

  • Modular Structure: Component-based structure
  • Abstract Layer: Functions, mixins, and variables
  • Responsive Mixins: RLH for responsive line heights
  • Performance-Optimized: Conditional imports

Templating System ​

  • Theme Integration: Dynamic adjustments via theme.json
  • Variant System: Easy creation of new component variants
  • Child Theme Support: Full inheritance and override
  • Twig Extensions: Custom functions for extended features

Console Commands ​

  • guppy:theme:create: Automatic child theme creation
  • guppy:install:plugins: Interactive plugin installation
  • Asset Management: Automatic copying of standard assets

🔌 Plugin Ecosystem ​

Guppy Plugins ​

  • Emotionworld Elements: Extended CMS elements

DMF Plugins ​

  • Custom Fonts: Integrate custom web fonts
  • Custom Grid: 11 additional CMS grid layouts
  • Dropdown Navigation: Accessible navigation with extended features

📊 Performance ​

Optimizations ​

  • Lean CSS: Without Shopware standard styling
  • Lazy Loading: Automatic for images
  • Responsive Images: Optimized image sizes
  • JavaScript Optimization: Modern ES6+ plugins
  • Build System: Optimized compilation pipeline

Best Practices ​

  • Mobile-First: Responsive design from the ground up
  • Progressive Enhancement: Basic functions without JavaScript
  • Accessibility-First: Accessibility as standard
  • Semantic HTML: Correct HTML structure

🚀 Getting Started ​

Quick Start ​

➡️ Quick Start - Fastest setup

Detailed Guides ​

For Developers ​

The Guppy Theme offers the perfect balance between user-friendliness and developer flexibility for modern Shopware 6 projects.

Copyright © 2025-present digital.manufaktur GmbH