Product catalog¶
The e-commerce catalog displays products for customers to browse. It is organized using product categories, available product variants, sorting options, and navigation paths. Essentially, the e-commerce catalog is the shop page of your website.
The product catalog features a toolbar and some filters in the sidebar (or slide-out menu), along with a dedicated product listing area. Additionally, the shop and category pages' layout, as well as the e-commerce footer, can be customized, and you can add building blocks as needed.
To customize the catalog, go to the shop page, click Edit in the upper-right corner, select the section you want to change, and navigate to the Style tab.
Toolbar and filters¶
The toolbar and sidebar (or slide-out menu) provide advanced filtering tools to help customers search and navigate the product catalog using categories and attributes.
Tip
If you do not want to display a toolbar or sidebar, disable all related options in the website editor, hide attributes, and make sure to only assign one pricelist to the website.
Categories¶
To create a category quick access in the toolbar or general access in the sidebar, click the Top and/or Sidebar button next to Categories, and choose a Style for them. When the Sidebar is selected, the option Collapse Category Recursive appears, allowing you to collapse the category in the sidebar.
Note
The category filters located in the sidebar are not affected by the Filters setting.
Toolbar¶
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.
See also
Product listing area¶
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
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.
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.
Shop and category page design¶
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.
It is also possible to customize individual product pages.
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.