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)



FieldDescription
Enable AJAX FilteringAllows filters to work without reloading the entire page. Customers see updated results instantly after selecting filter options.
Auto-Scroll to Top After FilterDefines 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 FiltersSets 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.

FieldDescription
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.

FieldDescription
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
only see available products and prevents out-of-stock items from showing in search results.

FieldDescription
Price Filter ButtonClicking 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 TooltipsAllows you to display tooltips for filters. When enabled, additional helpful information appears
when customers hover over a filter option.
Tooltip ImageLet's you upload a custom image to be displayed inside the tooltip, giving customers a visual
reference or explanation for the filter.

FieldDescription
Category Filter Settings ButtonClicking this button will take you directly to the Product Attribute: Category settings page.
where you can configure detailed options for the Category attribute.
EnabledActivates or deactivates the Category Filter in layered navigation. When enabled, customers
can filter products by category.
Display PositionDefines the display order of the Category Filter within the sidebar navigation block. A lower
number gives the filter higher priority in the list.

FieldDescription
Enable Stock FilterEnables 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" FilterIf enabled (Yes), the system will use salable quantity to determine stock availability. This option is only applicable to Simple Products.
Display PositionDefines the order of the stock filter in the sidebar navigation block. Lower numbers display the filter higher in the list.
Stock Filter LabelSets the name displayed for the stock filter on the storefront. Example: “Stock” or “Availability.”
Stock Filter TooltipAllows 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 BlocksControls 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.

FieldDescription
Enable Rating FilterEnables the Customer Rating Filter in layered navigation. When set to Yes, customers can
filter products based on their rating.
Display PositionDetermines the display order of the rating filter in the sidebar navigation block. Lower
numbers display the filter higher in the list.
Rating Filter LabelSets the display name of the rating filter on the storefront. Example: “Rating” or “Customer
Reviews.”
Rating Filter TooltipAllows 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 BlocksControls 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.

FieldDescription
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.

FieldDescription
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.

SettingDescription
Enable SEO-Friendly URLs

When enabled, the system generates cleaner and more search engine–friendly URLs. For example, the URL

will appear as /category/clothes.html instead of category.html?clothes=65. This improves readability and SEO performance.

URLs for Attributes Optimized for SEO

Controls how URLs are generated for layered navigation filters (e.g., color, size).

• If set to Generated, The system will automatically create SEO-friendly URLs, such as/category/color_blue/size_large.html, which are better indexed by search engines.
• If set to Not Generated: Standard query-based URLs will be used, such as /category.html?color=blue&size=large. These are less optimized for SEO.

Include Attribute Code in URLs

Adds the attribute code to the URL structure. For example, selecting the color "blue" will create a URL like /color_blue. This enhances clarity

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 customfilterkey, the URL will appear

as /customfilterkey/blue-xxl-nylon. Leave this blank to use the system default.

Special Character Replacement

Specifies the character used to replace any special characters in URLs. The default is an underscore (_). This ensures that URLs remain

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 /black_blue_white.html. The default is an underscore (_).

Exclude Specific Paths from SEO Processing

Allows you to exclude specific URL paths from SEO processing. For example, entering knowledge-base will prevent any URLs

beginning with that path from being processed. Each excluded path should be entered on a separate line.

SettingDescription
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 noindex directive to these pages, helping to prevent duplicate content.

Auto-Add rel="nofollow" to Filters

When enabled, the system automatically adds rel="nofollow" to filter links. This prevents filter-generated links from being indexed
by search engines, reducing the risk of duplicate or irrelevant content. Ensure that for each attribute:
Stores → Attributes → Product → {attribute_name} → Layered Navigation → SEO → Add rel="nofollow" to Filter Links is set to Auto.

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 noindex directive in the robots tag. This is helpful for avoiding SEO penalties related to duplicate or thin content.

SettingDescription
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:

  • Use Current URL – Uses the full current URL, including filters and applied parameters, as the canonical URL.

  • Use Current URL with First Attribute – Uses the base category URL plus only the first selected attribute filter.

  • Use Current URL without Applied Filters – Uses only the base category URL, ignoring any filters applied.

  • Use Current URL without GET Parameters – Removes query parameters (e.g., ?sort=price) and keeps a clean canonical URL.

SettingDescription
Enable rel=prev/next for Pagination

Enables the use of rel="next" and rel="prev" tags in the page header. These tags help search engines understand the

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 TitleWhen 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 DescriptionWhen 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.

FieldDescription
Use in SearchDetermines if the price attribute is available for catalog search. If set to "Yes," users can search by price.
Search WeightSets the priority of this attribute in search results. A higher value (1–10) gives more importance.
Visible in Advanced SearchAllows the price attribute to be shown as a filter in the Advanced Search form.
Comparable on StorefrontDisplays the price attribute in product comparison tables on the storefront.
Use in Layered NavigationControls 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 NavigationMakes the price attribute available in the layered navigation of search results pages.
PositionDefines the display order of the price attribute in layered navigation. Lower numbers show higher in the list.
Use for Promo Rule ConditionsDetermines if the price attribute can be used in creating promotional rules (e.g., discounts, cart price rules).
Visible on Catalog Pages on StorefrontIf set to "Yes," the price attribute is displayed on catalog pages (category and product listing pages).
Used in Product ListingControls if the price attribute is included in product listings. Behavior may vary depending on theme.
Used for Sorting in Product ListingAllows the price attribute to be used as a sorting option (e.g., sort products by price ascending/descending).


Labels Layered Navigation 

FieldDescription
Choose Display ModeDefines 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 DecimalRemoves decimal values ending in “.00” from filter display, keeping the price or value cleaner for customers.
Sort Filter Options BySelect 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 OptionShows the number of products available for each filter choice (e.g., “Price Range: $10–$20 (5 products)”).
Tooltip for Filter OptionsAllows you to add a short note or explanation that appears when customers hover over a filter option.

Slider Layered Navigation 

FieldDescription
Choose Display ModeLets 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 DecimalIf enabled, decimals ending with “.00” are hidden, making values look cleaner (e.g., $100 instead of $100.00).
Minimum Slider ValueDefines the lowest value a user can select on the slider (e.g., minimum price or range start).
Maximum Slider ValueDefines the highest value a user can select on the slider (e.g., maximum price or range limit).
Tooltip for Filter OptionsAllows you to add an explanatory text or note that appears when customers hover over the filter option.

From-To Only Layered Navigation 

FieldDescription
Choose Display ModeWhen 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 DecimalRemoves trailing decimals like “.00” from filter values to make the display look cleaner.
Sort Filter Options BySelect 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 OptionsLet's you add a short explanation that will show as a tooltip when a user hovers over the filter option.

FieldDescription
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 LinksControls 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.
FieldDescription
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 OptionsAllows 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 OptionsWhen enabled, it adds a search field inside the filter so customers can quickly find specific options.
Show Search Box If Options ExceedSets a threshold number. If filter options exceed this number, a search box appears automatically for easier navigation.
Collapse Options After X ItemsControls 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.

FieldDescription
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.

FieldDescription
Set SEO Friendly Attribute Name for URL

Select if the attribute should use an SEO-friendly name in the URL.
• Use Config – applies the global store setting.
• Yes – replaces the attribute code with a readable name (e.g., color=red → /red).
• No – keeps the default attribute code in the URL (e.g., ?color=24).

Replace Attribute Code for URL

Enter a custom word or short code that will replace the default attribute code in the URL.
Example: instead of material you can enter fabric, so the URL becomes /fabric-cotton.html.
If left empty, Magento will use the default attribute code.

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:

      1. Go to Stores → Configuration → Catalog → Inventory → Stock Options

      2. Set Display Out of Stock Products = Yes

      3. 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.

FAQs


Click here to visit FAQs.

Support


Click here to raise a support ticket using your MageDelight account.

Additional Services


Click here to get the customized solution for this extension.



Thank you for choosing MageDelight!



  • No labels