Catalog¶
The eCommerce catalog displays products for customers to browse. It is organized using product categories, available options, sorting, and navigation paths. Essentially, the eCommerce catalog is the shop page of your website.
The product catalog includes a top bar, a side panel, and a product listing area. With Odoo, you can customize the layout, and filter by categories and attributes.
You can customize the shop page using the website editor. To access it, go to the shop page, click Edit in the upper-right corner, and navigate to the Customize tab.
Top bar¶
The top bar can include a search bar, a currency selector, sort-by and display options, and category quick access.
Sort-by search and display options¶
You can toggle the Search Bar, display categories and/or attributes, and enable or disable the Sort-By as well as the Layout buttons in the Top Bar.
The Sort-by button is toggled by default, and customers can choose between the following Default Sort options:
None
Featured
Newest Arrivals
Name (A-Z)
Price - Low to High
Price - High to Low
The default sort applies to all categories.
Tip
If you don’t want to display a top bar or side panel, you can disable all related options in the website editor.
Side panel¶
The side panel provides advanced filtering tools to organize your product categories. To further categorize the shop page, you can activate various filters, such as the attribute filter.
You can also add a Datepicker option to display a date range calendar to check the availability of rental products over a specific period. The Rental app must be installed to use this feature.
It is also possible to toggle the Collapsible sidebar switch to make the side panel manually collapsible.
Tip
To use a price range or tags filter, you have to enable attributes first.
Product categorization in catalog¶
eCommerce categories are used to organize products into groups, making it easier for customers to browse the online store.
To create eCommerce categories, go to , and click New. On the category form, add a Name, optionally enter a Parent Category, and write a Category Description, if needed.
To use eCommerce categories, go to , select the product you wish to modify, go to the Sales tab, navigate to the Ecommerce shop section, and select the Categories it belongs to.
Note
A single product can belong to multiple eCommerce categories.
Once the categories are configured and assigned to the relevant products, go to the main shop page and open the website editor. In the Categories option, you can either enable a menu on the Left, i.e., in the side panel, or on the Top, i.e., in the top bar, or both. If you select the Left category, the option Collapsible Category Recursive appears, allowing you to collapse the category in the side panel.
See also
Attributes¶
Attributes refer to characteristics of a product, such as the color or material, whereas variants are the different combinations of attributes. To configure attributes and variants, go to , select a product, and click the Attributes & Variants tab. Add as many attributes as desired.
See also
To enable attribute filtering, go to your main shop page, then open the website editor, and set the Attributes field to Left (side panel) and/or Top (top bar).
Tip
When attribute filtering is enabled in the top bar, customers must click the (dropdown toggle) button to access it.
When enabling Attributes, more options become available:
Price Filter: Toggle the switch to display a Price Range bar, which allows customers to filter products according to a specific price range by dragging adjustable handles.
Product Tags Filter: Toggle the switch to display the Product Tags on the shop page, and allow customers to filter products using those tags by going to the Tags section in the side panel.
Tip
If you want to use tags on your e-commerce, go to and click New. In the Product Templates tab of the product tags form, add the products to link to the given tag. You can also add product variants in the Product Variants tab and view a summary of all selected products in the All Products tab.
Price filtering works independently from attributes and, therefore, can be enabled on its own, if desired.
Product listing area¶
You can customize the layout of the entire shop page, as well as that of individual category pages.
Tip
It is also possible to customize individual product pages.
In the website editor, choose the layout, and set the default layout to either Grid or List view.
Use the following options to further adjust the layout:
Size: Set the number of products displayed per page and line.
Gap: Define the gap between the products.
Style: Select Default, Cards, Thumbnails, or Grid.
Image Size: Choose the aspect ratio for the product images: Landscape (4/3), Default (1/1), Portrait (4/5), or Vertical (2/3). You can also adjust the display by changing the Fill options to fit your design preferences best.
Toggle the Prod. Desc. switch to display the product description below the product’s name.
Tip
You can choose the size of the grid, but be aware that displaying too many products may affect performance and page loading speed.
In addition, you can manually change a product’s position on the shop page. To do so, go to the
main shop page, click the product, and open the website editor. In the Product section,
you can reorder the products by using the arrows. The << >> buttons allow to move the product to
the extreme left or right, and < > allow to move it one row to the left or right.
Tip
It is also possible to change the products’ positions on the shop page by going to , switching to the list view, and dragging and dropping the products within the list.
Shop and category page design¶
Use building blocks to add content on the shop and/or category page.
You can customize the top and/or bottom section of the catalog, either for the entire shop page or for a specific category. In the latter case, the block appears only when filtering by that category. To do so, move the block to the far top or bottom section to display it on the general shop page or to the area below the category’s name at the top or beneath the product list to display it only when filtering by that specific category.
Tip
Adding content to an eCommerce category page helps improve the SEO strategy. Using keywords linked to the products or the eCommerce categories can also increase organic traffic. Additionally, each category has its own specific URL that can be pointed to and is indexed by search engines.
eCommerce categories can also be added as mega menu items for quick access.
See also