产品电商类目¶
电子商务类目是客户浏览产品的页面。它使用 电商类目 、 产品变体 、排序选项和导航路径。本质上，电子商务类目是您的网站商店页面。
电子商务类目包含侧栏（或滑动菜单）的 工具栏和过滤器 ， alongside a dedicated product listing area 。此外，商店和类目的 布局 、 电子商务页脚 以及 类目块 可以进行自定义。
要自定义目录，请转到商店页面，在右上角单击 编辑 ，选择您要更改的部分，并导航到 样式 选项卡。
工具栏和过滤器¶
工具栏和侧边栏（或滑动菜单）提供了高级过滤工具，帮助客户使用 :ref: 类别 <ecommerce/catalog/categories> 和 :ref: 属性 <ecommerce/catalog/attributes> 搜索和导航产品目录。
Tip
如果您不需要显示工具栏或侧栏，请在网站编辑器中禁用所有相关选项， 隐藏属性 ，并确保将一个价格列表分配给网站。
分类¶
要创建一个 电商类目 的工具栏快捷访问或侧边栏中的常规访问，请点击 电商类目 旁边的 顶部 和/或 边栏 按钮，并为它们选择一个 样式 。当选中 边栏 时，会出现 多级折叠样式类目 选项，允许您在侧边栏中折叠该类别。
Note
侧栏的分类过滤器不受 过滤器 设置的影响。
工具栏¶
It is possible to display a search bar or sort-by options in the toolbar of the shop page by clicking the Sort By and/or Search buttons next to the Toolbar label. Toggle the Floating switch on to always display the search bar, the pricelist selector (if any), and sort-by options at the bottom of the window, even when scrolling, and select a Default Sort option.
Note
The default sort applies to all categories.
Filters¶
Set the Filters field to:
Sidebar: to display filters in the side panel;
Off-screen menu: to display filters in a slide-out menu that opens when clicking the Filters button in the toolbar;
Hide: to hide filters entirely.
By default, two Filters are enabled:
Price: Use the switch to display a Price Range bar, which allows customers to filter products according to a specific price range by dragging adjustable handles.
Tags: Toggle the switch to display product Tags on the shop page, and allow customers to filter products using those tags by going to the Tags section.
Tip
To create product tags on your e-commerce, go to , and click New. Add a Tag name, toggle the Visible to customers switch, and select a Color. Optionally, add an image. Then go to the product form, and assign the relevant tags where needed.
For rental products, you can also add a Rental Date option to display a date range calendar to check their availability over a specific period.
属性¶
When you offer product variants with different attributes, those options appear in the sidebar or slide-out menu when filters are shown. The menu automatically adapts to the number of attribute sections:
Up to 4 attributes: all the attribute values are displayed.
More than 4 attributes: the sections are automatically collapsed.
Note
For Radio and Select display types, a View More button appears when there are more than 8 values, and a search field when the number of values exceeds 20.
At least two attribute values are required for the filter to be visible.
The attribute filters located in the sidebar or slide-out menu are affected by the Filters setting.
产品列表区域¶
Define the number of products to display on your shop pages by configuring the Size displayed per page and line, and specify the number of columns for Mobile devices.
Note
The number of products displayed on a page may affect performance and page loading speed.
In addition, you can manually change a product’s position on the shop page or product category page. To do so, click a specific product, change its Size, and Re-order it using the arrows in the Product section of the Style tab. The (double left arrow) and (double right arrow) buttons allow you to move the product to the extreme left or right, and the (single left arrow) and (single right arrow) buttons allow you to move it one row to the left or right. You can also choose or create a ribbon or badge to highlight a specific product.
Tip
您也可通过前往 ，切换至列表视图，并通过拖放操作调整产品在列表中的顺序，从而改变其在商店页面的展示位置。
Product card design¶
To customize the product cards’ design, choose a Products Design, click the (paint brush) icon next to it to:
Choose a Preset layout;
Adapt the General design;
Customize the Text & content (e.g., show a Description, and Ratings);
Customize the Images’ layout (e.g., enable Secondary Image to show a second image when hovering over the product image on the shop or category page);
Enable some Actions (e.g., Add to cart, Compare, or Wishlist) and customize their placement.
Tip
You can also add a variant picture on the product card and product page.
商店与分类页面设计¶
The design of the shop and individual category pages can be customized as follows:
Choose whether the Content Width of the shop and category pages should be Regular or Full width.
Define the headers: navigate to the relevant page, then change the header directly on the page if needed. Toggle the Show Title and/or the Center Content switches. For product category pages, toggle the Show Description switch to show the category description.
Use building blocks to add content in the top/bottom section of the page, 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 e-commerce category page helps improve the SEO strategy. Using keywords linked to the products or the e-commerce 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.
E-commerce categories can also be added as mega menu items for quick access.
同时支持对单个 产品页面 进行个性化定制。
Catalog blocks¶
The Catalog building blocks can be used, for example, to create quick access to the shop page, showcase specific product categories, highlight a specific product selection, or add a banner with general information or promotions.
Depending on the selected template, you can customize the blocks in the Style tab.
Example
For example, this specific Catalog block template displays a selection of products and can be customized to:
Adapt the block’s design.
Select a Cards Design, and configure it using the (paint brush) icon.
Define which items are shown in the block by selecting the relevant Filter option, e.g., Newest Products to show the latest arrivals.
Select a specific product category in the Category dropdown list.
Filter products by toggling the Tags and/or Show variants options.
