Implementing Magento’s Layered Navigation can significantly improve the shopping experience by allowing customers to filter products based on various attributes such as price, color, size, and more. Here’s a step-by-step guide on how to implement and optimize Magento’s Layered Navigation:
Step 1: Configure Product Attributes
- Navigate to: Stores > Attributes > Product.
- Select Attribute: Choose an attribute you want to use for layered navigation (e.g., color, size, brand).
Attribute Settings
- Edit Attribute:
- Use in Layered Navigation: Set this to “Filterable (with results)” or “Filterable (no results)” depending on your preference.
- Use in Search Results Layered Navigation: Enable this if you want the attribute to be filterable in search results as well.
- Visible on Catalog Pages on Storefront: Ensure this is set to “Yes”.
- Position: Set the position of the attribute in the layered navigation block.
- Save Attribute: Click Save Attribute.
Step 2: Configure Category Settings
- Navigate to: Catalog > Categories.
- Select Category: Choose the category where you want to enable layered navigation.
Category Settings
- Display Settings:
- Anchor: Set this to “Yes”. This enables layered navigation for the selected category.
- Save Category: Click Save.
Step 3: Configure Layered Navigation in the Backend
- Navigate to: Stores > Configuration > Catalog > Catalog > Layered Navigation.
- Price Navigation Step Calculation:
- Automatic (equalize price ranges): Magento calculates price ranges automatically.
- Automatic (equalize product counts): Price ranges are adjusted so each range has approximately the same number of products.
- Manual: Set custom price ranges manually.
- Price Navigation Step:
- If using manual step calculation, specify the step value (e.g., 50).
- Interval Division Limit: Define the maximum number of intervals for price filtering.
- Save Config: Click Save Config.
Step 4: Enable and Customize Layered Navigation
Enable Layered Navigation (If using a third-party theme or extension)
- Navigate to: Stores > Configuration > Advanced > Advanced.
- Disable Modules Output: Ensure any third-party module related to layered navigation is enabled.
Customize Appearance
- Navigate to: Content > Design > Configuration.
- Select Store View: Choose the store view you want to customize.
- Edit:
- Layout: Customize the layout to ensure layered navigation appears correctly. This might involve editing the catalog_category_view.xml layout file in your theme.
- Save Configuration: Click Save.
Step 5: Test Layered Navigation
- Navigate to Frontend: Go to the frontend of your store.
- Navigate to a Category Page: Ensure the category page with layered navigation enabled displays the filter options correctly.
- Apply Filters: Test applying different filters to ensure products are filtered correctly.
Example: Enabling Layered Navigation for the “Color” Attribute
- Configure the “Color” Attribute:
- Navigate to Stores > Attributes > Product.
- Select the “Color” attribute.
- Set “Use in Layered Navigation” to “Filterable (with results)”.
- Save the attribute.
- Configure Category:
- Navigate to Catalog > Categories.
- Select the desired category.
- Set “Anchor” to “Yes”.
- Save the category.
- Test on Frontend:
- Navigate to the frontend category page.
- Ensure the “Color” filter appears in the layered navigation.
- Apply the “Color” filter and verify that products are filtered accordingly.
Advanced Customization and Optimization
Use Third-Party Extensions
For more advanced layered navigation features, consider using third-party extensions like:
- Amasty Improved Layered Navigation: Provides advanced filtering options, SEO-friendly URLs, AJAX filtering, and more.
- Mageplaza Layered Navigation: Offers flexible filtering options, price slider, AJAX loading, and additional features.
Performance Optimization
- Index Management:
- Ensure indexes are up to date for optimal performance.
- Navigate to System > Index Management.
- Reindex necessary indexes.
- Caching:
- Enable full-page caching to improve the performance of category pages with layered navigation.
- Navigate to System > Cache Management.
- Enable and refresh the cache.
- Minimize HTTP Requests:
- Use minified and combined CSS/JS files to reduce the number of HTTP requests.
- Navigate to Stores > Configuration > Advanced > Developer.
- Enable merging and minification of CSS and JavaScript files.
Conclusion
Implementing and optimizing layered navigation in Magento enhances the shopping experience by allowing customers to easily filter products based on various attributes. By following the steps outlined above, you can set up layered navigation effectively and ensure it performs optimally.
If you need further assistance or specific recommendations on using layered navigation in your Magento store, feel free to ask!
Ready to take your e-commerce business to the next level? We’re here to help you succeed in the digital marketplace. Whether you’re looking to launch a new online store or optimize an existing one, our team at 247Commerce has the expertise and solutions to meet your needs.
Email: hey@247commerce.co.uk
Phone: +44 20 4547 9292