Installation
Before installing the extension, please make sure to Backup your web directory and store database
You will require to install MageDelight Base Extension first. If it is not installed then please download it from https://www.magedelight.com/pub/extensions/magedelight-base.zip and unzip the package file into the root folder of your Magento 2 installation.
Root Directory is - "app/code/magedelight/#YourExtensionName#"
- Unzip the extension package file into the root folder of your Magento 2 installation.
- Connect to SSH console of your server:
- Navigate to the root folder of your Magento 2 setup
Run command as per below sequence,
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
- log out from the backend and log in again
If you are using Magento 2.3 or later then you do not need to activate license. Extension will be activated with silent activation mechanism and does not require activation keys to be entered manually.
Backend Configuration (Admin side)
| Field | Description |
|---|---|
| Enable AJAX Filtering | Allows filters to work without reloading the entire page. Customers see updated results instantly after selecting filter options. |
| Auto-Scroll to Top After Filter | Defines page scrolling behaviour after filters are applied. • Yes (to Listing Top): Scrolls to the top of the product listing. • Yes (to Page Top): Scrolls to the very top of the page (including header). • No: Page remains in the same position. |
| Enable Scroll for Long Filters | Sets the maximum height of the filter block. If filter options exceed this limit, a scrollbar will appear. • Enter a value in pixels. • Set to 0 to disable scrolling. |
| Sticky Filter Sidebar (Desktop) | Keeps the filter sidebar visible while scrolling on desktop devices. This helps customers easily access filters at all times. Note: Filters in the top block will not be displayed when this option is enabled. |
| Field | Description |
|---|---|
| Submit Filters on Desktop | Defines how filters are applied on desktop devices. • Instantly: Filters are applied immediately when a user selects an option. • By Button Click: Filters are applied only after clicking the Apply button, allowing multiple selections before refreshing results. |
| Submit Filters on Mobile | Defines how filters are applied on mobile devices. • Instantly: Results update immediately after each selection. • By Button Click: Users can select multiple filters and then apply them all at once by pressing the Apply button. |
| Tab View on Mobile | Determines the layout of the filter view on mobile. • One Column: Filters are displayed in a single column layout. • Two Column: Filters are displayed in two columns for a more compact view. |
| Field | Description |
|---|---|
| Filter Result Message | Defines the message shown above the product listing when filters are applied. The default is “X Product(s) found”, where X represents the number of matching products. |
| Keep Single-Option Filters Visible | Determines whether filters with only one option remain visible. • Yes: The filter remains visible. • No: The filter is hidden if it contains only one option. |
| Auto-Hide One-Option Filters | Automatically hides filters that have only a single option available. Applies only to category filters and filters based on EAV attributes. |
| Number of Expanded Filter Options | Specifies how many filter options are shown by default when a customer opens a filter. Additional options can be viewed by clicking the More button. • 0: All options are collapsed, requiring customers to expand manually. |
| Remove Out-of-Stock | If enabled (Yes), filter results will exclude products that are out of stock. This ensures customers |
| Field | Description |
|---|---|
| Price Filter Button | Clicking the “Price Filter >> Click here to move to price settings” button will take you directly to the product attribute Price settings page for further configuration. |
| Enable Tooltips | Allows you to display tooltips for filters. When enabled, additional helpful information appears when customers hover over a filter option. |
| Tooltip Image | Let's you upload a custom image to be displayed inside the tooltip, giving customers a visual reference or explanation for the filter. |
| Field | Description |
|---|---|
| Category Filter Settings Button | Clicking this button will take you directly to the Product Attribute: Category settings page. where you can configure detailed options for the Category attribute. |
| Enabled | Activates or deactivates the Category Filter in layered navigation. When enabled, customers can filter products by category. |
| Display Position | Defines the display order of the Category Filter within the sidebar navigation block. A lower number gives the filter higher priority in the list. |
| Field | Description |
|---|---|
| Enable Stock Filter | Enables the stock filter in layered navigation. When set to Yes, customers can filter products based on stock availability.Note: Ensure that “Display Out of Stock Products” is enabled in Stores → Configuration → Catalog → Inventory → Stock Options. Otherwise, the stock filter will not be visible on the storefront. |
| Use Salable Quantity for "In Stock" Filter | If enabled (Yes), the system will use salable quantity to determine stock availability. This option is only applicable to Simple Products. |
| Display Position | Defines the order of the stock filter in the sidebar navigation block. Lower numbers display the filter higher in the list. |
| Stock Filter Label | Sets the name displayed for the stock filter on the storefront. Example: “Stock” or “Availability.” |
| Stock Filter Tooltip | Allows you to add custom tooltip text that appears when customers hover over the stock filter. Useful for giving additional explanations (e.g., “Shows available inventory”). |
| Auto-Expand Filter Blocks | Controls whether the stock filter block expands automatically when the page loads. • Auto (based on custom theme): Expansion behaviour follows the theme’s default settings. • Expand for Desktop and Mobile: The filter block will always be expanded on both desktop and mobile. • Expand for Desktop Only: The filter block expands automatically on desktop but remains minimized on mobile devices. |
| Field | Description |
|---|---|
| Enable Rating Filter | Enables the Customer Rating Filter in layered navigation. When set to Yes, customers can filter products based on their rating. |
| Display Position | Determines the display order of the rating filter in the sidebar navigation block. Lower numbers display the filter higher in the list. |
| Rating Filter Label | Sets the display name of the rating filter on the storefront. Example: “Rating” or “Customer Reviews.” |
| Rating Filter Tooltip | Allows you to add custom tooltip text that will appear when customers hover over the rating filter. This can provide extra explanation about how the filter works. |
| Auto-Expand Filter Blocks | Controls whether the rating filter block is expanded automatically after the page loads. • Auto (based on custom theme): Expansion behaviour follows the theme’s settings. • Expand for Desktop and Mobile: Always expanded on both desktop and mobile. • Expand for Desktop Only: Expanded on desktop but minimized on mobile devices. |
| Field | Description |
|---|---|
| Enable Latest Product Filter | Enables the New Product Filter in layered navigation. When set to Yes, customers can filter products marked as “New.” |
| Display Position | Defines the display order of the New Product filter in the sidebar navigation block. A lower number displays it higher in the list. |
| Latest Product Label Filter | Sets the label shown for the filter on the storefront. Example: “New,” “Latest Products,” or any custom text. |
| Latest Product Tooltip | Allows you to add a tooltip that appears when users hover over the New Product filter, providing additional information. |
| Auto-Expand Filter Blocks | Determines whether the New Product filter block is expanded automatically after the page loads. • Auto (based on custom theme): Expansion behaviour follows the theme settings. • Expand for Desktop and Mobile: Always expanded on both desktop and mobile. • Expand for Desktop Only: Expanded on desktop but minimized on mobile devices. |
| Field | Description |
|---|---|
| Enable On Sale Filter | Enables the On Sale filter in layered navigation. When set to Yes, customers can filter products that are currently on promotion through Special Price or Catalog Price Rules. |
| Display Position | Specifies the display order of the On Sale filter in the sidebar. Filters with a lower position values appear higher in the list. |
| On Label Filter Label | Defines the name of the On Sale filter as displayed on the storefront. The default value is On Sale, but it can be customized. |
| On Label Filter Tooltip | Allows you to enter a tooltip message that is displayed when customers hover over the On Sale filter. This can be used to explain what the filter does. |
| Auto-Expand Filter Blocks | Determines whether the On Sale filter block is expanded or collapsed by default. • Auto – follows the theme’s default behaviour. • Expand for Desktop and Mobile – always expanded on both desktop and mobile. • Expand for Desktop Only – expanded only on desktop, minimized on mobile devices. |
| Setting | Description |
|---|---|
| Enable SEO-Friendly URLs | When enabled, the system generates cleaner and more search engine–friendly URLs. For example, the URL will appear as |
| URLs for Attributes Optimized for SEO | Controls how URLs are generated for layered navigation filters (e.g., color, size). |
| Include Attribute Code in URLs | Adds the attribute code to the URL structure. For example, selecting the color "blue" will create a URL like and supports better SEO indexing. |
| Custom URL Filter Key | Allows you to define a custom keyword to be used as a filter key in the URL. For instance, if set to as |
| Special Character Replacement | Specifies the character used to replace any special characters in URLs. The default is an underscore ( clean, valid, and user-friendly. |
| Attribute Option Separator | Defines the character used to separate multiple selected attribute options in the URL. For example, selecting three color options may generate |
| Exclude Specific Paths from SEO Processing | Allows you to exclude specific URL paths from SEO processing. For example, entering beginning with that path from being processed. Each excluded path should be entered on a separate line. |
| Setting | Description |
|---|---|
| Enable Robots Tag Management | When enabled, this option allows the system to manage how search engines index the site’s content, based on SEO settings for each attribute. • If set to Yes, indexing is controlled based on attribute-level configurations. • If set to No, all pages may be indexed, which could lead to duplicate content issues or the indexing of non-essential pages. |
| Noindex for Multiple Filters | Controls whether pages with multiple filters applied should be excluded from search engine indexing. • If set to Yes, the system will add a |
| Auto-Add rel="nofollow" to Filters | When enabled, the system automatically adds |
| Noindex for Paginated Pages | Specifies whether paginated pages (e.g., page 2, 3, etc. of a product listing) should be excluded from indexing. • If set to Yes, these pages will include a |
| Setting | Description |
|---|---|
| Canonical URL for Category Pages | Determines how canonical URLs are generated for category pages. This helps search engines understand the preferred version of a page. Available options:
|
| Setting | Description |
|---|---|
| Enable rel=prev/next for Pagination | Enables the use of relationship between paginated pages (e.g., Page 1, Page 2, etc.). This improves site crawlability and user experience in search results. |
| Include Page Number in Meta Title | When enabled, the page number is automatically added to the end of the Meta Title on paginated pages. For example: `Bags |
| Include Page Number in Meta Description | When enabled, the page number is included at the end of the Meta Description on paginated pages. For example: `Bags Description |
Backend Functionality
Price Filter
- To add or configure a Price Filter, click the appropriate button in the configuration settings, or navigate to Store > Attributes > Product, then search for "Price" to add or edit price filter options as required.
| Field | Description |
|---|---|
| Use in Search | Determines if the price attribute is available for catalog search. If set to "Yes," users can search by price. |
| Search Weight | Sets the priority of this attribute in search results. A higher value (1–10) gives more importance. |
| Visible in Advanced Search | Allows the price attribute to be shown as a filter in the Advanced Search form. |
| Comparable on Storefront | Displays the price attribute in product comparison tables on the storefront. |
| Use in Layered Navigation | Controls if the price attribute is available in layered navigation filters. Only works with specific input types (Yes/No, Dropdown, Multiple Select, Price). Recommended: Filterable (with results). |
| Use in Search Results Layered Navigation | Makes the price attribute available in the layered navigation of search results pages. |
| Position | Defines the display order of the price attribute in layered navigation. Lower numbers show higher in the list. |
| Use for Promo Rule Conditions | Determines if the price attribute can be used in creating promotional rules (e.g., discounts, cart price rules). |
| Visible on Catalog Pages on Storefront | If set to "Yes," the price attribute is displayed on catalog pages (category and product listing pages). |
| Used in Product Listing | Controls if the price attribute is included in product listings. Behavior may vary depending on theme. |
| Used for Sorting in Product Listing | Allows the price attribute to be used as a sorting option (e.g., sort products by price ascending/descending). |
Labels Layered Navigation
| Field | Description |
|---|---|
| Choose Display Mode | Defines how the filter values are shown (e.g., as ranges or specific options). This helps organize how users view and select filtering choices. |
| Remove Zero after Decimal | Removes decimal values ending in “.00” from filter display, keeping the price or value cleaner for customers. |
| Sort Filter Options By | Select how the filter list should be sorted: - Name → sorts alphabetically. - Position → sorts by the order you set in admin. - Product Quantities → shows the option with the most products first. |
| Display Product Count per Option | Shows the number of products available for each filter choice (e.g., “Price Range: $10–$20 (5 products)”). |
| Tooltip for Filter Options | Allows you to add a short note or explanation that appears when customers hover over a filter option. |
Slider Layered Navigation
| Field | Description |
|---|---|
| Choose Display Mode | Lets you select how the filter will appear. Here it is set to Slider, allowing customers to drag a slider to adjust the filter range. |
| Hide Zero Decimal | If enabled, decimals ending with “.00” are hidden, making values look cleaner (e.g., $100 instead of $100.00). |
| Minimum Slider Value | Defines the lowest value a user can select on the slider (e.g., minimum price or range start). |
| Maximum Slider Value | Defines the highest value a user can select on the slider (e.g., maximum price or range limit). |
| Tooltip for Filter Options | Allows you to add an explanatory text or note that appears when customers hover over the filter option. |
From-To Only Layered Navigation
| Field | Description |
|---|---|
| Choose Display Mode | When set to From-To Only, customers can manually enter a starting and ending value (for example, a price range from $50 to $200). |
| Hide Zero Decimal | Removes trailing decimals like “.00” from filter values to make the display look cleaner. |
| Sort Filter Options By | Select how the filter list should be sorted: - Name → sorts alphabetically. - Position → sorts by the order you set in admin. - Product Quantities → shows the option with the most products first. |
| Tooltip for Filter Options | Let's you add a short explanation that will show as a tooltip when a user hovers over the filter option. |
| Field | Description |
|---|---|
| Use "INDEX" to Robots Tag for Category Pages with Applied Filters | Select how search engines index filtered category pages: • Do Not Add (noindex) – filtered pages will not be indexed. • Add only for one filter (index) – only single-filter pages will be indexed. • Always add (index) – all filtered pages will be indexed. Use with caution to avoid duplicate pages in Google. |
| Use "FOLLOW" to Robots Tag for Category Pages with Applied Filters | Select if search engines should follow links on filtered pages: • Do Not Add – links will not be followed. • Add only for one filter – links will be followed only on single-filter pages. • Always add – links will be followed on all filtered pages. Helps Google crawl products but may increase load. |
| Add rel="nofollow" to Filter Links | Controls whether filter links get a “nofollow” tag: • Use Config – follows the global SEO setting. • Do Not Add – no nofollow tag will be added. Recommended only if you are sure duplicate content won’t hurt SEO. |
Category Filter
- To add or configure a Category Filter, click the "Category Filter Setting" button in the configuration settings, or navigate to Store > Attributes > Product, then search for "Category" to add or edit category options as required.
| Field | Description |
|---|---|
| Sort Filter Options By | Defines how filter options are arranged in the storefront. • Position – Follows the order set in the admin panel. • Name – Arranges options alphabetically. • Product Quantities – Orders by the number of products available in each option. |
| Display Product Count per Option | Shows the number of products available for each filter value. • Yes – Always shows product counts. • No – Hides product counts. • Auto – The system decides based on theme rules. |
| Tooltip for Filter Options | Allows you to enter a short explanation for filter options. The text appears as a tooltip when customers hover over the filter. |
| Enable Search Box for Filter Options | When enabled, it adds a search field inside the filter so customers can quickly find specific options. |
| Show Search Box If Options Exceed | Sets a threshold number. If filter options exceed this number, a search box appears automatically for easier navigation. |
| Collapse Options After X Items | Controls how many filter options are shown by default. Additional options are hidden and can be revealed by the customer. |
| Auto Expand Filter Options | Determines how filter sections expand on the storefront. • Auto (based on custom theme) – Expands depending on theme logic. • Expand for Mobile and Desktop – Always shows filters expanded for all devices. • Expand for Desktop Only – Keeps filters expanded only on desktop while collapsed on mobile. |
| Field | Description |
|---|---|
| Enable Multi-Select for Filters | Allows customers to select multiple filter values at the same time. • Yes – Users can apply more than one filter value (e.g., selecting multiple sizes or colours). • No – Only one filter value can be applied at a time. On category pages, single selection takes precedence if this is disabled. |
| Field | Description |
|---|---|
| Set SEO Friendly Attribute Name for URL | Select if the attribute should use an SEO-friendly name in the URL. |
| Replace Attribute Code for URL | Enter a custom word or short code that will replace the default attribute code in the URL. |
Stock Filter
- Display "Out of Stock Products” is enabled in Stores → Configuration → Catalog → Inventory → Stock Options. Otherwise, the stock filter will not be visible on the storefront.
Frontend Functionality
Price Filter
Price Labels Filter
On the category page (example: Men → Tops), customers can refine product results using the Price Range filter.
The filter displays predefined price ranges (e.g., $20.00 – $30.00, $30.00 – $40.00, etc.), each showing the number of products available in that range.
When a customer selects a range (e.g., $70.00 – $80.00), only the products within that price interval are displayed.
The selected price filter is shown under the “Now Shopping by” section at the top of the filter sidebar.
Customers can remove the filter at any time by clicking “Clear All” or the X next to the applied filter.
The product grid updates instantly (if AJAX is enabled), without requiring a page reload.
- Admin Setup: Stores → Attributes → Product → Price → Layered Navigation → Display Mode = Range
- This makes it easier for shoppers to quickly find products within their preferred budget range, improving browsing efficiency and overall shopping experience.
Price Slider Filter
On the category page (example: Men → Tops), customers can refine products using the Price Slider Filter.
Customers drag the slider handles to set a custom minimum and maximum price (e.g., $49.00 – $99.00).
Only products within the selected price range are displayed.
The selected range appears under “Now Shopping by” in the filter sidebar.
Filters can be removed anytime by clicking “Clear All” or the X next to the filter.
With AJAX enabled, the product grid updates instantly without reloading the page.
Admin Setup: Stores → Attributes → Product → Price → Improved Layered Navigation → Display Mode = Slider
- This filter gives customers the flexibility to set their own budget range instead of fixed intervals.
Price From-To Only Filter
On the category page (example: Men → Tops), customers can refine products using the From–To Price Widget.
Customers manually enter minimum and maximum price values (e.g., 70 – 99) into the input boxes.
After clicking Apply, only products within the selected price range are displayed.
The active price filter appears under “Now Shopping by” in the sidebar.
Filters can be removed anytime by clicking “Clear All” or the X next to the applied filter.
With AJAX enabled, products update instantly without reloading the page.
Admin Setup: Stores → Attributes → Product → Price → Layered Navigation → Display Mode = From-To Only
- This filter gives customers precise control to search within an exact budget range.
Category Filter
On the category page (example: Men → Tops), customers can refine products using the Category filter.
Subcategories are displayed (e.g., Jackets, Hoodies & Sweatshirts, Tees, Tanks) with the number of products available shown in brackets.
Customers can select one or multiple categories to narrow down results.
The selected category appears under “Now Shopping by” in the sidebar.
Filters can be removed anytime by clicking “Clear All” or the X next to the selected filter.
With AJAX enabled, the product grid updates instantly without reloading the page.
Admin Setup:Stores → Attributes → Product → Category_ids → Layered Navigation → Category Filter
- Helps customers quickly find products by browsing subcategories within the main category.
Stock Filter
On the category page (example: Men → Tops), customers can filter products by Stock status (e.g., In Stock, Out of Stock).
The number of products available in each stock status is shown in brackets.
The selected stock filter appears under “Now Shopping by” in the sidebar.
Customers can remove the filter anytime by clicking “Clear All” or the X next to the filter.
With AJAX enabled, the product grid updates instantly without page reload.
Admin Setup:
Go to Stores → Configuration → Catalog → Inventory → Stock Options
Set Display Out of Stock Products = Yes
Then configure in: Stores → Configuration → Stock Filter → Enable Stock Filter → Yes
- This filter allows customers to quickly view only products currently available for purchase.
Customer Rating Filter
On the category page (example: Men → Tops), customers can refine products using the Rating filter.
Ratings are displayed as star levels (e.g., ★★★★☆ & up, ★★★☆☆ & up, etc.) along with the number of products available in each level.
When selected (e.g., 4 stars & up), only products with ratings equal to or higher than the chosen level are displayed.
The selected rating filter appears under “Now Shopping by” in the sidebar.
Filters can be removed anytime by clicking “Clear All” or the X next to the filter.
With AJAX enabled, the product grid updates instantly without reloading the page.
- This filter helps customers quickly find products that have higher customer satisfaction.
New Filter
On the category page (example: Men → Tops), customers can refine products using the New filter.
When enabled, this filter shows only products marked as New based on their configured date range.
Customers can select Yes to view products currently flagged as new arrivals.
The active filter appears under “Now Shopping by” in the sidebar.
Filters can be removed anytime by clicking “Clear All” or the X next to the filter.
With AJAX enabled, products update instantly without reloading the page.
Admin Setup:
Set “Set Product as New From/To Date” in the product edit page (Catalog → Products).
Enable the filter in: Stores → Configuration → Layered Navigation → New Filter
- This filter highlights the latest product arrivals, making it easier for customers to find newly added items in the store.
On Sale Filter
On the category page (example: Men → Tops), customers can refine products using the Sale filter.
When enabled, this filter shows only products that are currently on special price or promotion.
Customers can select Yes to view products that are discounted or on sale.
The active filter appears under “Now Shopping by” in the sidebar.
Filters can be removed anytime by clicking “Clear All” or the X next to the filter.
With AJAX enabled, the product grid updates instantly without reloading the page.
- This filter helps customers quickly find discounted products in the catalog.
Demo
Click here to visit the frontend.
Click here to visit the backend admin panel.
Thank you for choosing MageDelight!





























