カタログ¶
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.
参考