Skip to content

CMS integration

Badges are not only for the standard Shopware product detail and listing templates — they also render automatically inside the CMS elements you use in custom layouts. There is no configuration step: drop the standard CMS element into a Shopping Experience layout, and badges appear wherever the configuration says they should.

The plugin extends the four CMS elements that surface product information:

The CMS image gallery — used on product detail layouts to render the product’s media — renders the full image-overlay slot system. Both Left and Right slots are supported, including angled ribbons, with the same positioning and styling defaults you configured on the Product Page tab.

The buy-box CMS element — used to render the add-to-cart section on a custom product layout — renders badges placed above and below the buy box, mirroring the standard detail-page placements.

The product-box CMS element — used to render a single product card inside a CMS layout — renders the listing-style placements: image-overlay slots and the above/below product-info placements.

The product-slider CMS element — used to render a horizontal scroller of multiple products — renders the same listing-style placements on each card inside the slider. Badges that target the listing context will show up automatically.

The CMS rendering reuses the same configuration you already set up for standard detail and listing templates:

  • The image gallery uses the Product Page slot configuration.
  • The product box and product slider use the Product Listing slot configuration.

There is no separate “CMS” tab — your existing slot settings apply across both standard templates and CMS-driven pages.

The badge edit form ships with a Preview panel that mirrors the storefront render in real time. Toggle the preview using the button in the form header. The preview supports switching between placements:

  • Detail-page image overlay
  • Detail-page above/below buy box
  • Listing-page image overlay
  • Listing-page above/below product info

Use the dropdown above the preview to verify how the badge looks in each position before saving.

If you have written custom Twig that does not use Shopware’s standard product render blocks or one of the four CMS elements above, badges will not magically appear there. Either:

  • Refactor the custom Twig to extend the standard component/product/card.html.twig (and friends), or
  • Manually call the plugin’s badge-rendering Twig functions from your custom template.

For most stores, the standard templates and CMS elements are sufficient.