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

Tip

Must-have extensions for your Magento stores

  1. One Step Checkout
  2. Layered Navigation
  3. Social Login FREE
  4. Affiliate
  5. Blog FREE
  6. Shop by brand
  7. SEO FREE
  8. Banner Slider FREE