Magento 2 Create category banner inside category list
Wonder how to add a single banner between category list items in Magento 2?
I am going to show you a quick method to do it with already available functions in each Magento 2 category.
We are going to use a category CMS block. Most online shops don’t utilise this function in the front end.
First, create the static banner block. Then go to the category where you like to add the banner.
Go to Display Settings and select Static block and products from Display Mode.
Next, go to content and Select your static banner block from Add CMS Block.
Now we have the CMS banner content in our category list. We need to move a few blocks.
First I am going to remove the cms.phtml file and block where it’s called in the layout file.
Open catalog_category_view.xml in your theme, or create catalog_category_view.xml in Magento_Catalog layout directory and remove the CMS block.
<move element="category.cms" destination="category.products.list" before="-" />
Next open cms.phtml or create a new file in Magento_Catalog/templates/category/cms.phtml.
Make the changes to HTML so the CMS block will render under <li> element
<li class="item product product-item category-cms">
<?= $block->getCmsBlockHtml() ?>
</li>
Next, open or Create Magento_Catalog/templates/product/list.phtml file to overwrite default Magento list.phtml.
Add the CMS block code to list.phtml.
<?php if ($childBlock = $block->getChildBlock('category.cms')) {
echo $childBlock->toHtml();
} ?>Checkout short video about how to implement the category CMS block in the products list.