LogoLogo
SearchService PortalKnowledge BaseOthersDeutschRequest support
  • Welcome
  • Elements of the storefront
    • Header
    • Footer
    • Category pages
    • Product pages
  • Additional features
    • CMS extensions
      • CMS blocks
        • Hero slider
          • Hero slider (2x)
          • Hero slider (3x)
          • Hero slider (4x)
        • Teaser
        • Banner
        • Columns
          • One column
          • Two columns
          • Two columns (swapped on phones)
          • Two columns, 3-9
          • Two columns, 4-8
          • Two columns, 5-7
          • Two columns, 7-5
          • Two columns, 8-4
          • Two columns, 9-3
          • Three columns
          • Three columns, 2-2-8
          • Three columns, 2-8-2
          • Three columns, 3-3-6
          • Three columns, 3-6-3
          • Three columns, 6-3-3
          • Three columns, 8-2-2
          • Four columns
          • Five columns
          • Six columns
          • Six columns (Custom)
        • Grids
          • Grid 'Modern'
          • Grid 'Modern' (swapped)
          • Grid 'One'
          • Grid 'One' (swapped)
          • Grid 'Two'
          • Grid 'Two' (swapped)
          • Grid 'Three'
          • Grid 'Three' (swapped)
          • Grid 'Four'
          • Grid 'Four' (swapped)
          • Grid 'Five'
          • Grid 'Five' (swapped)
          • Grid 'Six'
          • Grid 'Six' (swapped)
        • Text & images
          • Image & text layered
        • Listing page
        • Product page
          • Product name (without manufacturer logo)
          • Image gallery and buy box (with product name)
          • Image gallery and buy box (with product name & manufacturer logo)
          • Product description & reviews (Accordion)
        • Sidebar
          • Subcategory navigation (Sidebar)
        • Sale
          • Hero countdown
          • Countdown banner
          • Countdown banner (compact)
          • Discount banner
        • Other
          • Breadcrumb navigation
          • Testimonial (Customer review)
          • Testimonials (Four columns)
          • Custom code (HTML/CSS/JS)
      • CMS elements
        • Hero slider
          • Call-to-Action slide (Hero slider)
          • Text slide (Hero slider)
          • Image slide (Hero slider)
        • Teaser
          • Text teaser
          • Text teaser (decorated)
          • Button teaser
          • Call-to-Action
          • Hover box
          • Image teaser
          • Hero teaser
          • Advanced teaser
          • Classic teaser
          • Modern teaser
          • Round teaser
        • Banner
          • Image banner
          • Parallax banner
          • Hero banner
          • Advanced banner
        • Text & images
          • Image & text layered
        • Listing page
          • Listing subcategories
          • Listing subcategories (Modern)
        • Product page
          • Image gallery (Grid)
          • Product description & reviews (Accordion)
        • Sidebar
          • Subcategory navigation
        • Sale
          • Hero countdown (Heading)
          • Countdown banner
          • Countdown banner (compact)
          • Discount banner
        • Other
          • Breadcrumb navigation
          • Testimonial (Customer review)
          • Custom code (HTML/CSS/JS)
    • Custom fields
      • Categories
        • Body class
        • Columns per row
        • Hero section
        • Highlight category
        • Listing subcategories
        • Shopping Experiences Header
      • Products
        • General
          • Benefits
          • Comment
          • Custom field 1
          • Custom field 2
          • Custom field 3
          • Custom tab – Text
          • Custom tab – Title
          • Hover image
          • Short description
        • Datasheets
          • Datasheets (Text)
          • Datasheet 1
          • Datasheet 1 – Title
          • Datasheet 2
          • Datasheet 2 – Title
          • Datasheet 3
          • Datasheet 3 – Title
        • Downloads
          • Download 1
          • Download 1 – Title
          • Download 1 – Description
          • Download 2
          • Download 2 – Title
          • Download 2 – Description
          • Download 3
          • Download 3 – Title
          • Download 3 – Description
        • Further links
          • Further link 1
          • Further link 1 – Title
          • Further link 1 – Open link in a new tab
          • Further link 2
          • Further link 2 – Title
          • Further link 2 – Open link in a new tab
          • Further link 3
          • Further link 3 – Title
          • Further link 3 – Open link in a new tab
        • Videos
          • Product videos (Text)
          • Video 1
          • Video 1 – Title
          • Video 2
          • Video 2 – Title
          • Video 3
          • Video 3 – Title
          • YouTube video(s)
          • Vimeo video(s)
    • Extensions
      • Announcement banner
      • Benefits on product pages
      • Checkout steps
      • Custom announcement
      • Floating widget
      • Hero section
      • Highlight category
      • Labels on product pages
        • Delivery time label
        • Free shipping label
        • Not available label
        • Pre-order label
        • Sold label
        • Stock label
      • Listing subcategories
      • Manufacturer in listings
      • Payment methods on product pages
      • Product badges
        • Discount badge
        • Free shipping badge
        • New badge
        • Sold badge
        • Stock badge
        • Topseller badge
      • Product datasheets
      • Product downloads
      • Product number in listings
      • Product short description
      • Product specifications
      • Product videos
      • Quickview
      • Sharing links
      • Shopping Experiences Header
      • Slideout communities
      • Social media links (icons)
      • Social proofing
        • Sales infotext
      • Tabs on product pages
        • Custom tab
        • Datasheets tab
        • Manufacturer tab
        • Properties tab
        • Videos tab
      • USP bar
    • Media
      • Flag icons
      • Payment method logos
      • Shipping method logos
      • Shopping Experiences
      • Social icons
    • Widgets
      • About us
      • Awards, seals or certificates
      • Benefits
      • Communities or social media
      • Custom text
      • Footer navigation
      • Location or retail store
      • Newsletter
      • Payment and shipping methods
      • Payment logos
      • Service hotline
      • Shipping logos
  • More knowledge
    • Google Fonts
    • JavaScript plugins
    • Payment methods
    • Shipping methods
    • Snippets
  • Configuration
    • Layout
      • Main colours
        • Configuration
      • Status messages
        • Configuration
      • Typography
        • Configuration
      • E-Commerce
        • Configuration
      • Media
        • Configuration
      • Layout
        • Configuration
      • Buttons
        • Configuration
      • Forms
        • Configuration
      • Modals
        • Configuration
      • Product rating
        • Configuration
      • Tables
        • Configuration
    • Header
      • Layout
        • Configuration
      • Logo
        • Configuration
      • Top bar
        • Configuration
      • Search
        • Configuration
      • Action buttons
        • Configuration
      • Top navigation
        • Configuration
      • Top navigation flyout
        • Configuration
      • Sticky top navigation (Basic headers "Header 1" and "Header 2")
        • Configuration
      • Minimal header (in the Checkout)
        • Configuration
      • Mobile header
        • Configuration
      • Shopping Experiences Header
        • Configuration
    • Footer
      • Layout
        • Configuration
      • Upper section
        • Configuration
      • Main section
        • Configuration
      • Lower section
        • Configuration
      • Assigning and arranging content
        • Configuration
      • Minimal footer (in the Checkout)
        • Configuration
      • Logos footer
        • Configuration
      • Copyright footer
        • Configuration
    • Content
      • Breadcrumb
        • Configuration
      • Cookie permission
        • Configuration
      • Offcanvas navigation
        • Configuration
      • Pagination
        • Configuration
      • Product badges
        • Configuration
      • Scroll up button
        • Configuration
      • Sliders
        • Configuration
    • Shopping Experiences
      • All types (Shop pages, Landing pages, Listing pages, Product pages)
        • Configuration
      • Image slider (Category "Images")
        • Configuration
      • Image gallery (Category "Images")
        • Configuration
      • Two columns, boxed image & text (Category "Text & images")
        • Configuration
      • Product slider (Category "Commerce")
        • Configuration
      • Product filter (Category "Sidebar")
        • Configuration
      • Category navigation (Category "Sidebar")
        • Configuration
    • Listing pages
      • Layout (Layout type "Standard")
        • Configuration
      • Layout (Layout type "Big image")
        • Configuration
      • Layout (Layout type "Minimal content")
        • Configuration
      • Product badges (in the product box)
        • Configuration
      • Product box
        • Configuration
      • Product box (Layout type "Standard")
        • Configuration
      • Product box (Layout type "Big image")
        • Configuration
      • Product box (Layout type "Minimal content")
        • Configuration
    • Product pages
      • Layout
        • Configuration
      • Image gallery
        • Configuration
      • Buybox
        • Configuration
      • Delivery information labels (in the buybox)
        • Configuration
      • Product badges (in the image gallery or buybox)
        • Configuration
      • Product specifications (in the buybox)
        • Configuration
      • Product videos (in tabs)
        • Configuration
      • Social proofing (in the buybox)
        • Configuration
      • Sharing links (in the buybox)
        • Configuration
      • Benefits (in the buybox)
        • Configuration
      • Payment logos (in the buybox)
        • Configuration
      • Tabs
        • Configuration
      • Tab "Description"
        • Configuration
      • Tab "Properties"
        • Configuration
      • Tab "Product videos"
        • Configuration
      • Tab "Datasheets"
        • Configuration
      • Tab "Custom content"
        • Configuration
      • Tab "Manufacturer"
        • Configuration
      • Cross Selling
        • Configuration
    • Pages
      • General
        • Configuration
      • Login
        • Configuration
      • My account
        • Configuration
      • Checkout
        • Configuration
    • Sidebar
      • Layout
        • Configuration
      • Sidebar widgets
        • Configuration
      • Sidebar widgets (Headlines)
        • Configuration
      • Sidebar widgets: Assigning and arranging content
        • Configuration
    • Widgets
      • Footer navigation
        • Configuration
      • Awards, seals or certificates
        • Configuration
      • Benefits
        • Configuration
      • Communities or social media
        • Configuration
      • Service hotline
        • Configuration
      • Location or retail store
        • Configuration
      • Newsletter
        • Configuration
      • Payment logos
        • Configuration
      • Shipping logos
        • Configuration
    • Extensions
      • Announcement banner (in the header)
        • Configuration
      • Checkout steps
        • Configuration
      • Custom announcement (on product pages and in the checkout)
        • Configuration
      • Floating widget
        • Configuration
      • Hero section (on listing pages)
        • Configuration
      • Listing subcategories (on listing pages)
        • Configuration
      • Slideout communities
        • Configuration
      • USP bar
        • Configuration
    • Others
      • Advanced settings
        • Configuration
      • Expert settings
        • Configuration
      • Compatibility (HC-Architecture®)
        • Configuration
      • Beta
        • Configuration
      • Deprecated
        • Configuration
  • Miscellaneous
    • About ThemeWare®
    • ThemeWare® Demoshops
    • ThemeWare® Knowledge base
    • ThemeWare® Video Tutorial
    • ThemeWare® Utilities
    • 🇩🇪Deutsch
Powered by GitBook
LogoLogo

ThemeWare®

  • About ThemeWare®
  • ThemeWare® Demoshops
  • ThemeWare® Service Portal
  • ThemeWare® Utilities

Informations

  • Legal notice
  • Newsletter
  • Privacy
  • Support

© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH

On this page
  • ThemeWare® CMS blocks
  • Add a ThemeWare® CMS block
  • Pro Edition
  • Cloud Edition
  • Block settings
  • CSS classes
  • Replace CMS element
  • Further information

Was this helpful?

  1. Additional features
  2. CMS extensions

CMS blocks

PreviousCMS extensionsNextHero slider

Last updated 5 months ago

Was this helpful?

In this section you will find everything about the ThemeWare® CMS blocks which you can select in the "Block categories" and add to your Shopping Experiences.

ThemeWare® CMS blocks

With ThemeWare® you get an extensive and growing selection of CMS blocks to customize your shop. The ThemeWare® CMS blocks are available from version 0.5.0 in the Pro Edition and some of them in the Cloud Edition.

More CMS blocks are in the pipeline for both the Pro Edition and the Cloud Edition and will follow with upcoming updates. Be curious!

Tip: If you have further ideas or wishes for existing or new blocks, please send us your via our Service Portal.


Add a ThemeWare® CMS block

  1. Click on the plus icon to select a CMS block.

  2. Select the desired CMS block in the "Block category" dropdown.

  3. Drag'n'drop the CMS block into your Shopping Experience.

Pro Edition

In the ThemeWare® Pro Edition, the ThemeWare® CMS blocks have their own categories and are structured according to the following pattern:

  • ThemeWare® {Yout theme}

    • Contains basic design blocks such as sliders, teasers and banners.

  • ThemeWare® {Yout theme} - Columns

    • Contains column blocks that can be filled as desired.

  • ThemeWare® {Yout theme} - Grids

    • Contains grid blocks that can be filled with picture elements.

  • ThemeWare® {Yout theme} - Listing page

    • Contains CMS blocks for listing pages.

  • ThemeWare® {Yout theme} - Product page

    • Contains CMS blocks for product pages.

  • ThemeWare® {Yout theme} - Sidebar

    • Contains CMS blocks for the sidebar.

  • ThemeWare® {Yout theme} - Other

    • Contains further cross-page CMS blocks.

Cloud Edition

In the ThemeWare® Cloud Edition you will find the ThemeWare® CMS blocks in the default Shopware categories (see "Text & Images").


Block settings

The CMS blocks in Shopware 6 have different configuration fields. In the section "Layout", for example, you will find the option to add "CSS classes" and to define the padding of the block.

CSS classes

In the block settings you also have the option of defining CSS classes for the corresponding CMS block. ThemeWare® offers you a number of CSS classes that you can use in your Shopping Experiences.

For all CMS blocks the following CSS classes are interesting:

You can find more classes in the following section "Tutorials" > "Shopping Experiences":


Replace CMS element

You can replace the CMS elements in most CMS blocks. You can learn more about this in the article CMS elements.


Further information

Further information and basics about "Shopware 6 Shopping Experiences" and "CMS blocks" can be found in the ThemeWare® Knowledge Base:

In addition, you can also use CSS classes: from , since the storefront in Shopware 6 is based on Bootstrap 5.

Bootstrap
suggestions for improvement
LogoCSS spacing classes for Shopping ExperiencesThemeWare® Knowledge Base
ThemeWare® Knowledge Base => CSS spacing classes for Shopping Experiences
LogoShopping ExperiencesThemeWare® Knowledge Base
ThemeWare® Knowledge Base => Shopping Experiences
LogoCMS blockThemeWare® Knowledge Base
ThemeWare® Knowledge Base
ThemeWare® Pro Edition
ThemeWare® Cloud Edition
Block settings