Product Listing Page
ERPNext automatically provides a product listing page whenever Website Items are published. Customers can browse all available products by visiting the /all-products route of your website.
If your website is
https://example.com, the product listing page will be available at:https://example.com/all-products
Available Views
Customers can switch between two different layouts depending on their browsing preference.
Product List View
The List View displays products in a detailed, information-rich format.
Features
- Displays the product image.
- Shows the product name.
- Displays pricing information.
- Shows the Short Website Description configured in the Website Item.
- Provides a compact layout suitable for browsing detailed product information.
Product Grid View
The Grid View presents products in a visually appealing card-based layout.
Features
- Displays larger product images.
- Shows product names and prices.
- Allows customers to browse many products quickly.
- Provides a clean and modern shopping experience.
Product Actions
Each product card includes quick action buttons for customer interaction.
Product Filters
The Product Listing page provides filtering options that help customers quickly locate relevant products.
1. Field Filters
Field Filters are created using standard Item or Website Item fields configured in E-Commerce Settings.
Examples include:
- Brand
- Category
- Manufacturer
- Item Group
- Custom Fields
2. Attribute Filters
Attribute Filters allow customers to filter products based on variant attributes.
Common examples include:
- Color
- Size
- Material
- Storage Capacity
- RAM
3. Discount Filters
Discount Filters are automatically generated from active product discounts.
When Pricing Rules or discounts are applied to Website Items, ERPNext creates discount filters automatically without requiring additional configuration.
Configuration Source
The Product Listing page obtains its information from:
- Published Website Items
- E-Commerce Settings
- Website Item display settings
- Website Item pricing
- Pricing Rules
- Field Filters
- Attribute Filters
Typical Customer Browsing Flow
- Customer opens the
/all-productspage. - Chooses either List View or Grid View.
- Uses Field, Attribute, or Discount Filters.
- Browses matching products.
- Opens a product page for detailed information.
- Adds products to the cart or wishlist.
- Completes checkout.
Key Benefits
- Ready-to-use online product catalog.
- Supports both detailed and visual browsing layouts.
- Advanced filtering for faster product discovery.
- Automatic discount categorization.
- Responsive shopping experience.
- Seamless integration with Website Items and E-Commerce Settings.
