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, filter by categories and attributes, and use additional features according to your needs.

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.

Shop sort rules fill the numbers behind Featured.

Tip

If you don’t want to display a top bar or side panel, you can disable all related options in the website editor.

Shop sort rules¶

The Featured order is each product’s website sequence. The Shop Category Sort module (website_sale_category_sort) writes that sequence from a list of sort rules. The other Sort-by choices, Newest Arrivals, Name (A-Z), Price - Low to High, and Price - High to Low, still sort by their own field and leave the sequence as it is.

Install the module from Apps. Website designers then open Website ‣ eCommerce ‣ Products ‣ Shop Sort, the Shop Sort page on the website form (Website ‣ Configuration ‣ Websites, in developer mode), or the Shop Sort section on an eCommerce category (Website ‣ eCommerce ‣ Products ‣ eCommerce Categories).

A rule line belongs to one website or to one category. Give it a Sort Key and a Direction (Ascending or Descending). Lines run from top to bottom. Drag the handle to reorder them.

Attribute value sequence follows the order of the values of the attribute you choose. Set that order on the attribute. A product with several values of the attribute uses the lowest sequence. A product without the attribute is placed last, whether the direction is ascending or descending.
Discount bucket, ascending, lists products with no pricelist tag first, then products that have at least one. It is not the discount amount and not a pricelist price.
Website sequence keeps the current sequence. Use it as the last line when products that are otherwise equal should stay in their previous order.
Creation date, Name, and Catalog price use those product fields. Catalog price is the sales price on the product, not a pricelist price.

Each product has one website sequence, so the shop has one order. A category does not store a second order for the same products. It only chooses which rules write the number.

If the product’s category, or a parent of that category, has its own lines, those lines replace the website list. The deepest category on the chain that has lines wins. A category with no lines uses its parent, then the website list. Products that match no list keep their order relative to each other.

Click Apply now to renumber every active product. The same renumber runs once a day, and again when a rule changes, when a watched product value changes (its category, pricelist tags, name, or catalog price, for example), or when the sequence of an attribute value changes. On a large catalog this can take a while. Dragging a product on the product list changes its place until the next renumber, which overwrites the drag.

Note

Archived products are left as they are. Removing the last rule stops future renumbers and does not put back the numbers from before the rules. A bulk import should skip the renumber (the technical context is skip_shop_sort) and rely on Apply now or the daily action. Otherwise every saved product renumbers the whole catalog.

screenshot: ecommerce-catalog-shop-sort-rules

menu: Website --> eCommerce --> Products --> Shop Sort
shows: The shop sort list with two lines, attribute value sequence ascending on a season attribute, then discount bucket ascending.
highlight: The Sort Key and Direction columns, and the Apply now button.
data: One website, a no-variant attribute with two values ordered by sequence, and products with and without a pricelist tag.
module: website_sale_category_sort
notes: English UI, light theme, 1440px width. The menu is visible to website designers.

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.

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 Website ‣ eCommerce ‣ eCommerce Categories, 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 Website ‣ eCommerce ‣ Products, 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.

screenshot: ecommerce-catalog-catalog-panel-categories

menu: Website ‣ eCommerce ‣ Products ‣ (shop page) ‣ Edit
shows: The website editor's side panel of the shop page with the category options (Categories, Collapse Categories, Filters).
highlight: The category options (red frame).
data: Three eCommerce categories.
module: website_sale
notes: English UI, light theme, 1440px width.

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 Website ‣ eCommerce ‣ Products, select a product, and click the Attributes & Variants tab. Add as many attributes as 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 Website ‣ eCommerce ‣ Products, switching to the list view, and dragging and dropping the products within the list.

Product highlight¶

You can highlight products to make them more visible on the shop page. To do so, go to the website editor and click the product to highlight. In the Product section, you can choose the size of the product image by clicking the grid, and you can also add a Ribbon. This displays a banner across the product’s image, such as Sale, Sold out, Out of stock or New!.

screenshot: ecommerce-catalog-catalog-product-highlighting

menu: (website) ‣ Shop
shows: The shop page with a ribbon displayed on a product card.
highlight: The ribbon (red frame).
data: Ribbon 'Sale' on one product.
module: website_sale
notes: English UI, light theme, 1440px width.

To create a new ribbon, click the green (Create) icon next to the Ribbon field. Then add a Ribbon name, define its Position, and choose a Background and a Text label. To edit the ribbon, click the (Edit) icon next to the Ribbon label.

screenshot: ecommerce-catalog-catalog-ribbons

menu: Website ‣ eCommerce ‣ Product Ribbons ‣ New
shows: A product ribbon form with the Name, Position, Text Color and Background Color fields.
highlight: The Position and colour fields (red frame).
data: Ribbon 'Sale' in red.
module: website_sale
notes: English UI, light theme, 1440px width.

The ribbon is now available for all the eCommerce products.

Tip

There are other ways to create a new ribbon:
- Go to Website ‣ eCommerce ‣ Product Ribbons and click New.
- Activate the developer mode, access the product form, and under the Sales tab, change or create the ribbon in the Ribbon field.
It is also possible to add ribbons for specific product variants. To do so, go to Website ‣ eCommerce ‣ Products and select a product. Click the Variants smart button, choose a variant, and add a ribbon in the Variant Ribbon field of the Sales section.

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.

screenshot: ecommerce-catalog-catalog-header-footer
menu
Website ‣ eCommerce ‣ Products ‣ (shop page) ‣ Edit
shows
The shop page in the editor with a building block being dropped into the area above the product grid.
highlight
The drop target above the product grid (red frame).
data
Demo website 'My Website' with the eCommerce demo products.
module
website_sale
notes
English UI, light theme, 1440px width.

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.

Additional features¶

You can access and enable additional feature buttons such as a Add to cart or Wishlist button or a Comparison list. To do so, open the website editor, click the desired feature buttons. All three buttons appear when hovering the mouse over a product’s image.

(Add to cart): adds a button to add the product to the cart;
(Compare): adds a button to compare products based on their price, variant, etc.;
(Wishlist): adds a button to wishlist the product.

Smart search¶

The Smart Search (Theme Prime) module (eyssen_website_search_tp) replaces the standard shop search with a fuzzy search based on PostgreSQL trigram matching, so that visitors also find products when they make a typo, use a different word order, or type only part of a product name. Special characters in the search term (e.g., BUS+) are taken into account for the ranking, and the “did you mean” suggestion is only offered when the search itself returns nothing.

Enable it in the theme’s product search configuration, with the Smart search option; the Search in description option extends the search to the product descriptions.

What visitors searched for is recorded in the theme’s search report. The module adds the searched term itself to that report’s search bar as the default search field and as a Search Term group-by, so the most frequent searches — and those returning no result — can be reviewed directly.

screenshot: ecommerce-catalog-smart-search-report

menu: (Theme Prime) Search Report
shows: The theme's search report grouped by Search Term, with the number of searches per term.
highlight: The Search Term group-by in the search panel (red frame).
data: About twenty recorded searches over two weeks.
module: eyssen_website_search_tp
notes: Requires the Theme Prime theme; check the report's exact menu path in the installed theme. English UI, light theme, 1440px width.

Note

This module requires the Theme Prime theme and its search widget; it has no effect on other themes. The trigram search needs the PostgreSQL pg_trgm extension to be available in the database — ask your hosting provider or system administrator if the option has no effect.