카탈로그¶
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.
팁
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.
팁
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.
참고
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.
더 보기
속성¶
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.
더 보기
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).
팁
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:
가격 필터: 스위치를 토글하면 가격 범위 표시줄이 나타나서, 고객이 핸들을 끌어서 조정하면 지정된 가격 범위에 따라 품목에 필터를 적용할 수 있습니다.
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.
팁
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.
팁
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:
사이즈: 페이지 및 줄마다 표시될 품목 수를 설정합니다.
Gap: Define the gap between the products.
스타일: 기본값, 카드, 썸네일 또는 그리드 를 선택합니다.
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.
팁
그리드 크기를 선택할 수 있지만 지나치게 많은 수의 제품을 표시하면 페이지의 전반적인 성능과 로딩 속도에 영향을 줄 수 있습니다.
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.
팁
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.
제품 특징¶
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!.
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.
The ribbon is now available for all the eCommerce products.
팁
There are other ways to create a new ribbon:
Go to 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 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.
팁
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.
추가 기능¶
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.
더 보기