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	guppy / plugin-guppy-emotionworld-elements
Changelog	All releases

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:clear

After installation, all CMS elements appear directly in the Shopping Experience editor.

Table of contents

• Quick facts
  • Version matrix
• Installation
• Table of contents
• CMS elements in detail
  • 1. Accordion element
  • 2. Banner element
  • 3. Category card element
  • 4. Category slider element
  • 5. Guppy card element
  • 6. Image-text slider element
  • 7. Product details accordion element
  • 8. Slides element
  • 9. Cross-selling element
  • 10. Image gallery element
  • 11. Product slider element
  • 12. Video element
  • 13. Product highlights element
• Working in the page builder
  • Device view
  • Live preview instead of placeholders
  • Configuration in cards
• Cross-cutting features
  • Button classes
  • Accessibility
  • SEO
  • Performance
• Notes

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, image object fit. Text and content: heading, heading style, description, text position, text alignment, text color. Image alignment: align independently from text (toggle), image position. 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.

13. Product highlights element

Use: Product images with explanatory hotspots, feature callouts.

An image with numbered markers on it. When a visitor clicks a marker, the matching teaser with headline and text unfolds.

Features

• Place hotspots by dragging them onto the preview image
• Position is stored per hotspot as an X/Y value
• Teaser content with its own headline and heading tag per hotspot
• Hotspot color can be inverted for light and dark images
• The image is fitted rather than cropped

Configuration

Background: background image (required), alt text, background color. The color fills the area behind the image, visible through transparent areas of a PNG and all around it, because the image is fitted rather than cropped. Hotspots: headline, heading tag, styling, teaser content plus X and Y position per entry. Hotspot positioning: drag a numbered marker onto the preview image. Without an uploaded background image the preview stays empty, so upload the image in the Background tab first. Display: invert hotspot color, first item open.

Working in the page builder

Version 2.3.0 reworked how every element is operated in the Shopping Experiences editor.

Device view

The smartphone, tablet and desktop switch now affects the element canvas too. Set a height or a per-viewport count and you see the result in the matching view right away, instead of having to check it on the storefront.

Live preview instead of placeholders

Element and block previews are no longer static SVG graphics but HTML and CSS mockups. Every canvas renders live from the element's configuration: whatever you change in the config dialog shows up in the preview immediately.

When a banner or Guppy card has no image yet, the canvas doesn't draw a grey image area. It shows a small No image selected hint in the top-right corner instead, and the layout stays the way the storefront renders it without an image.

Configuration in cards

The shared configuration tabs are split into collapsible cards. Instead of one long field list per tab, related fields are grouped and you expand what you currently need.

Cross-cutting features

Button classes

In the banner, Guppy card, slides and image-text-slider elements you can set a class per button in the Button class field. The template adds the base btn class itself, so you only enter the variant. Leave the field empty and the button renders as btn-primary.

Variant	Class
Primary (default)	btn-primary
Secondary	btn-secondary
Success	btn-success
Danger	btn-danger
Warning	btn-warning
Info	btn-info
Light	btn-light
Dark	btn-dark
Link	btn-link
Outline	btn-outline-primary, btn-outline-secondary, ...

The size classes btn-sm and btn-lg are available as well. The field takes free text, so you can combine a variant with a size:

btn-outline-primary btn-lg

Guppy overrides

Guppy restyles some of the Bootstrap variants, among them btn-light, btn-link and the minimum height of btn-sm. The rendered appearance can therefore differ from stock Bootstrap.

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.