SAVE 70% ON ALL OF OUR APPS
<< HERE >>
Are you struggling to add layered navigation to your Magento CMS page? If so, you're not alone. Many Magento users face challenges in incorporating this crucial feature, which allows customers to filter products based on different attributes directly on content-managed pages. Layered navigation is a powerful tool that enhances user experience by making it easier for customers to find the products they need. In this blog post, we'll walk you through a step-by-step guide on how to display layered navigation on your Magento CMS page using a custom module. By the end of this article, you'll have a clear understanding of how to seamlessly integrate this feature into your Magento store.
Layered navigation significantly improves the shopping experience by enabling users to filter products based on attributes such as price, color, size, and brand. This feature is especially useful for stores with a vast inventory, allowing customers to quickly narrow down their choices. Implementing effective layered navigation can lead to higher conversion rates, as it simplifies the product search process, making it more likely that visitors find and purchase the products they want.
To begin, you'll need to create a custom module that will manage the layered navigation logic on your CMS page. Follow these steps to set up your module:
First, create the necessary directory structure for your custom module. This structure should be under the app/code directory and follow Magento's naming conventions. Your directory structure should look like this:
app/code
app/code/YourVendor/LayeredNavigation/
Inside your module directory, create a module.xml file to register your module. Place the following content into this file:
module.xml
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="YourVendor_LayeredNavigation" setup_version="1.0.0"> </module> </config>
Next, create a registration.php file to register the module with Magento:
registration.php
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'YourVendor_LayeredNavigation', __DIR__ );
Magento uses layout XML files to determine how different parts of your store are displayed. You'll need to create a layout XML file to specify how and where the layered navigation should appear on your CMS page.
Create a layout XML file named cms_page_view.xml under the following directory:
cms_page_view.xml
app/code/YourVendor/LayeredNavigation/view/frontend/layout/
Add the following content to cms_page_view.xml:
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="Magento\LayeredNavigation\Block\Navigation\State" name="layered.navigation.state" before="product_list" template="Magento_LayeredNavigation::layer/state.phtml"/> <block class="Magento\LayeredNavigation\Block\Navigation" name="catalog.leftnav" before="-" template="Magento_LayeredNavigation::layer/view.phtml"/> </referenceContainer> </body> </page>
With your layout XML file in place, the next step is to assign this layout update to your specific CMS page. Follow these steps:
Content > Pages
Design
Layout Update XML
<referenceContainer name="sidebar.main"> <block class="YourVendor\LayeredNavigation\Block\CustomNavigation" name="custom.layered.navigation" template="YourVendor_LayeredNavigation::layer/view.phtml"/> </referenceContainer>
Sometimes, the layered navigation might not work out of the box due to the CMS page's reliance on product collections and filters, which are typically associated with category or search results pages. You might need to extend the block class to ensure it operates correctly.
To handle the product collection and filtering logic, create a custom block class if required. The specific implementation will depend on your requirements.
You may need to override the default view.phtml file to customize it for your CMS page. Place the customized template in the following directory:
view.phtml
app/code/YourVendor/LayeredNavigation/view/frontend/templates/layer/
Finally, enable your custom module and deploy static content to reflect these changes:
Enable your module:
php bin/magento module:enable YourVendor_LayeredNavigation php bin/magento setup:upgrade
Deploy static content:
php bin/magento setup:static-content:deploy
Adding layered navigation to a Magento CMS page can significantly enhance the user experience by allowing customers to filter products based on various attributes directly from content-managed pages. By following the steps outlined in this guide, you can create a custom module to manage layered navigation on your CMS page, improving the shopping experience for your customers and potentially increasing your conversion rates.
To add layered navigation to a CMS page, create a custom module, define the layout XML, and assign the layout update to your CMS page. Ensure that the layered navigation works correctly by possibly extending the block class and overriding the default template as needed.
Layered navigation might not work on CMS pages out of the box because it typically relies on product collections and filters associated with category or search results pages. You may need to extend the block class and customize the template to ensure it functions correctly on CMS pages.
Yes, you can customize the appearance by overriding the default view.phtml template file and placing your customized template in the appropriate directory within your custom module.
Seamless content creation—Powered by our content engine.
Eldin P. is a Digital Marketing Associate at HulkApps, where he specializes in enhancing online engagement and customer experience through various marketing strategies. In his free time, he relishes playing soccer, seizing every opportunity to hit the field.
Get our news and insights delivered directly to your inbox.
Your cart is currently empty.
Please share a few essential pieces of information that'll help our support members work quickly on your project
As soon as we review your idea, we'll give you an update. Please notice that any access to the product(s) or service offered by HulkApps does not count for a refund. However, should you experience problems with your order, we urge you to reach out to our dedicated support team .
Rising to serve you better, we are delighted to announce that PlanetX has been acquired by HulkApps, a Chicago-based leading Shopify agency. The combination of HulkApps Shopify services and PlanetX's strong capabilities in the eCommerce industry will lead to continued growth for both companies.
Choose your wishlist to be added
Copy wishlist link to share
Copy
We will notify you on events like Low stock, Restock, Price drop or general reminders so that you don’t miss the deal
See Product Details