How to insert Banner slider into category pages

In this guide, we will show you how to insert a banner slider into category pages

Create a new file call catalog_category_view.xml in app/code/Mageplaza/BetterSlider/view/frontend/layout/ . Full path is app/code/Mageplaza/BetterSlider/view/frontend/layout/catalog_category_view.xml . You also can paste the following code into your theme layout.

Note

  • You also can create the xml file in theme folder or copy into an other module.
  • banner_id value should be changed to your own.
  • Default path: app/code/Mageplaza/BetterSlider/view/frontend/layout/

Begin of Content

Paste the following content into catalog_category_view.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
  <body>
      <referenceContainer name="content">
        <block class="Mageplaza\BetterSlider\Block\Slider" name="bannerslider.catalog.content.top" before="-">
            <action method="setPosition">
                <argument name="position" xsi:type="string">catalog-content-top</argument>
            </action>
            <action method="setCategoryPosition">
                <argument name="position" xsi:type="string">category-content-top</argument>
            </action>
            <action method="setBannerId">
                <argument name="banner_id" xsi:type="string">1</argument>
            </action>
        </block>
      </referenceContainer>
  </body>
</page>

End of Content

Paste the following content into catalog_category_view.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
  <body>
      <referenceContainer name="content">
        <block class="Mageplaza\BetterSlider\Block\Slider" name="bannerslider.catalog.content.bottom" before="+">
            <action method="setPosition">
                <argument name="position" xsi:type="string">catalog-content-bottom</argument>
            </action>
            <action method="setCategoryPosition">
                <argument name="position" xsi:type="string">category-content-bottom</argument>
            </action>
            <action method="setBannerId">
                <argument name="banner_id" xsi:type="string">1</argument>
            </action>
        </block>
      </referenceContainer>
  </body>
</page>

Expert’s recommendations