DmfGuppyEmotionworldElements
DmfGuppyEmotionworldElements extends Shopware 6 with specialised CMS elements and blocks for the Guppy theme. It ships a comprehensive collection of responsive, accessible, and configurable components for modern e-commerce storefronts.
Quick facts
| Composer package | dmf/sw6-plugin-guppy-emotionworld-elements |
| Plugin class | Dmf\GuppyEmotionworldElements\DmfGuppyEmotionworldElements |
| Namespace | Dmf\GuppyEmotionworldElements |
| Shopware | ~6.7.0 (version matrix below) |
| Required dependency | dmf/sw6-guppy-theme: ^2.0 |
| Repository | theme-guppy / plugin-guppy-emotionworld-elements |
Version matrix
| Plugin version | Shopware range |
|---|---|
| 1.2 | ≥ 6.5.0 < 6.6.9 |
| 1.3 | ≥ 6.6.9 < 6.8.0 |
| 2.0 | ≥ 6.7.0 |
Installation
composer require dmf/sw6-plugin-guppy-emotionworld-elements
bin/console plugin:refresh
bin/console plugin:install --activate DmfGuppyEmotionworldElements
bin/console cache:clearAfter installation, all CMS elements appear directly in the Shopping Experience editor.
Table of contents
CMS elements in detail
1. Accordion element
Use: FAQ sections, structured content.
Fully configurable accordion with Schema.org structuring for optimal SEO and accessibility.
Features
- SEO-optimised structured data
- Flexible opening logic (single or multiple open)
- Individual color customisation per item
- Responsive design
- Skip links and screen-reader support
- Configurable vertical alignment
Configuration
Accordion items:
- Heading: title of the collapsible area
- Heading style: H1–H6
- Content: text shown when expanded
- Background color: content area
- Title background color: clickable area
- Text color: heading and content
- Default state: open or closed on load
General:
- Multiple items open: allow simultaneous expansion
- Vertical alignment: top, center, bottom
- Skip link: toggle + skip link text
2. Banner element
Use: Hero banners, call-to-action areas.
Versatile banner element with full responsive support and extended styling options.
Features
- Responsive height adjustment
- 9 text positions
- Overlay support
- Multiple buttons
- Full accessibility (alt texts, ARIA labels)
- Container width options
Configuration
Background and image: background color, background image, image alt text, decorative-image flag. Layout and size: container width (full / container), per-viewport heights (smartphone/tablet/desktop). Text and content: heading, heading style, description, text position (9), text alignment, max text width. Overlay and colors: overlay background, overlay text color, text-only overlay. Buttons: text, target, new tab, style. Accessibility: skip link + skip link text.
3. Category card element
Use: Category previews, navigation.
Specialised element for category cards with lazy loading and automatic thumbnail generation.
Features
- Automatic lazy loading
- Responsive image adaptation
- SEO-optimised linking
- Consistent Guppy design
- Optimised performance
Configuration
- Category: pick from the category tree
- Image fit: Contain (full image, possible borders) or Cover (fills area, possibly cropped)
4. Category slider element
Use: Category carousel, navigation slider.
Performant slider for displaying multiple categories in carousel format.
Features
- Responsive slider
- Autoplay with configurable speed
- Intelligent duplicate removal
- Infinite loop or rewind
- Navigation dots
Configuration
Category selection: multiple categories, optional auto-load of child categories (1st level), duplicate removal. Slider behavior: per-viewport count (desktop/tablet/smartphone), autoplay toggle, speed, display duration. Navigation: infinite loop, rewind, navigation dots, categories per click. Linking: link target (same window or new tab). Accessibility: skip link + skip link text.
5. Guppy card element
Use: Special content cards, teasers.
Theme-specific card element with extended design options in Guppy style.
Features
- Theme-specific design
- Flexible button configuration
- Overlay support
- Responsive media integration
- Full accessibility
Configuration
Background and image: background color, background image, image alt text, decorative-image flag. Text and content: heading, heading style, description, text position, text alignment, text color. Buttons: text, target, new tab, style.
6. Image-text slider element
Use: Complex sliders with text-image combinations.
Highly configurable slider for content with image and text components.
Features
- Complex content (text, image, buttons)
- Individual overlay settings per item
- Responsive slider behavior
- Extended button functionality
- Flexible text positioning
Configuration
Slider items: enable toggle, background color, background image, heading, heading style, description, text position, text alignment, text color. Slider settings: per-viewport count, autoplay toggle, speed, display duration, infinite loop, navigation dots. Accessibility: skip link + skip link text.
7. Product details accordion element
Use: Product detail page, structured product information.
Specialised accordion for clear display of product details.
Features
- Automatic product-data integration
- Structured display of all product properties
- Configurable initial states
- Responsive
- SEO-optimised
Configuration
- Product: pick the product to display
- Heading style: heading size for section titles
- Default state: all closed / first open / all open
- Skip link: toggle + skip link text
8. Slides element
Use: Universal slider, hero areas.
The most comprehensive and flexible slider element for any hero/slide use case.
Features
- Full slide customisation
- Responsive heights
- Extended overlay options
- Container flexibility
- Multiple buttons per slide
Configuration
Slide content: enable toggle, background color, background image, heading, heading style, description, max text width. Text positioning: 9 positions, text alignment. Overlay: overlay background, overlay text color, text-only overlay. Slide heights: per viewport (smartphone/tablet/desktop). Slider behavior: autoplay, speed, display duration, infinite loop, container width. Buttons: text, target, new tab, style, multiple buttons per slide supported.
9. Cross-selling element
Use: Product recommendations, upselling.
Extended cross-selling functionality.
Configuration
Product count per viewport (smartphone/tablet/desktop), arrangement (vertical instead of horizontal), skip link + skip link text.
10. Image gallery element
Use: Image galleries, product images.
Extended image gallery with "show more" functionality.
Configuration
Grid view toggle, max image count, "show more" function, skip link + skip link text.
11. Product slider element
Use: Product carousels, recommendations.
Specialised slider for products in carousel format.
Configuration
Product count per viewport (smartphone/tablet/desktop), skip link + skip link text.
12. Video element
Use: Video playback.
Configuration
Video settings: loop, mute. Google structured data: video description.
Cross-cutting features
Accessibility
- Skip links across all elements
- Screen-reader descriptions
- Automatic focus management
- Responsive design
SEO
- Structured data
- Semantic HTML structure
- Optimised loading times via image optimisation
- Rich-snippet ready
Performance
- Lazy loading
- Optimised JavaScript
- Responsive images
- Caching strategies
Notes
Theme requirement
DmfGuppyEmotionworldElements requires an active Guppy theme (dmf/sw6-guppy-theme: ^2.0). Without the Guppy theme the elements won't render correctly, the plugin reuses the theme's SCSS tokens and Twig includes.
Splide slider dependency
Slider-based elements consume DmfSplideSlider. It must be active for slider elements to render in the storefront.