Experiences Creator – Flexible CMS Solutions

• Install the Plugin

  Install the plugin as usual in your Shopware shop.

• New Block Category in Shopping Experiences

  After installation, you will find a new block category in the Shopping Experiences called "BpfExperience Extensions".
  In this category, there is a new block called "Dynamic Block Layouts", which allows you to create flexible content for each viewport.

• Add the Block to the Shopping Experience

  Drag and drop the "Dynamic Block Layouts" block into a new section of your Shopping Experience.

• Working with Slots and Settings

  Your new block element functions as a container for as many slots (containing one content element each) as you like. In the frontend of your shop, the slots will be displayed according to the widths you have set for the five available breakpoints (XS - XL). Hereby, you can freely create responsive layouts where slots are displayed in a row for one breakpoint and in a column for another.

  Each slot initially contains a placeholder element that should be replaced by a content element of your choice (e.g. text, image, ...). While hovering over the placeholder element you will see the following configuration options in the upper right-hand corner (from left to right):

  • Slot settings

    Columns

    Here you can define the width of your slot for a given breakpoint.

    Example:

    • Set the Viewport XL (%) to col-6 (50%).
    • For any Viewport XL (by default 1200px) or bigger, your element will take up 50% of the width.
    • If you add another slot (see Add slot below) and apply the same settings, both elements will be displayed side by side for Viewport XL.

    Spacings

    Here you can define the individual margin and padding of your slot for each breakpoint.

  • Add slot

    Use this button to add a new slot below all existing slots.

  • Remove slot

    Use this button to delete an existing slot.

  • Element settings

    The element settings are deactivated for the initial placeholder element. Once you have replaced the placeholder with an actual content element you will find your chosen element's settings here.

  • Swap element

    Use this button to replace the initial placeholder element with an actual content element or swap elements later on.

With the described features, you can configure and customize your Shopping Experience entirely according to your needs.