품목 카탈로그

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.

도구 모음 및 필터

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.

팁

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.

카테고리

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.

참고

The category filters located in the sidebar are not affected by the Filters setting.

도구 모음

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.

참고

기본 정렬이 모든 카테고리 에 적용되어 있습니다.

필터

필터 필드를 설정합니다:

• 사이드바: 사이드 패널에 필터를 표시합니다;

• Off-screen menu: to display filters in a slide-out menu that opens when clicking the Filters button in the toolbar;

• 숨기기: 필터를 완전히 숨깁니다.

기본적으로 두 개의 필터 가 활성화되어 있습니다:

• 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.

  팁

  To create product tags on your e-commerce, go to Website ‣ eCommerce ‣ Product Tags, 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:

• 최대 4개의 속성: 모든 속성 값이 표시됩니다.

• 속성이 4개 이상인 경우: 자동으로 섹션이 축소됩니다.

참고

• 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.

참고

The number of products displayed on a page may affect performance and page loading speed.

또한 상점 페이지나 품목 카테고리 페이지에서 품목의 위치를 직접 변경하는 것도 가능합니다. 직접 변경하려면, 특정 품목을 클릭한 후 사이즈 를 조정하고, 스타일 탭의 품목 섹션에 있는 화살표를 사용하여 순서 변경 을 하면 됩니다. (왼쪽 이중 화살표) 및 (오른쪽 이중 화살표) 버튼을 사용하면 품목을 맨 왼쪽이나 맨 오른쪽으로 이동할 수 있으며, (왼쪽 화살표) 및 (오른쪽 화살표) 버튼을 사용하면 품목을 한 칸씩 왼쪽이나 오른쪽으로 이동할 수 있습니다. 또한 리본이나 배지 를 선택하거나 새로 생성하여 특정 품목을 강조 표시할 수도 있습니다.

팁

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.

품목 카드 디자인

To customize the product cards’ design, choose a Products Design, click the (paint brush) icon next to it to:

• 사전 설정 레이아웃을 선택합니다;

• 일반 디자인을 조정합니다;

• 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.

팁

You can also add a variant picture on the product card.

상점 및 카테고리 페이지 디자인

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.

• 빌딩 블록 을 사용하여 전체 상점 페이지 또는 특정 카테고리에 대해 페이지 상단/하단 섹션에 콘텐츠를 추가할 수 있습니다. 특정 카테고리로 필터링하는 경우, 블록은 해당 카테고리에만 표시됩니다. 이렇게 하려면, 블록을 상단 또는 하단 영역 끝으로 이동하여 일반 상점 페이지에 표시하도록 하거나, 상단의 카테고리 이름이나 품목 목록의 영역 아래로 이동하여 특정 카테고리로 필터링할 때만 표시하도록 할 수 있습니다.

  

  팁

  • 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.

카탈로그 블록

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:

• 블록 디자인을 조정합니다.

• 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.

• 카테고리 드롭다운 목록에서 특정 품목의 카테고리를 선택합니다.

• 태그 또는 세부 옵션 품목 보기 옵션을 토글하여 품목에 필터를 적용합니다.

이커머스 전용 웹사이트 바닥글

The website footer can also be configured to use the e-commerce-specific template. Then, add the relevant links, and adapt the footer’s text and layout as needed in the website editor. The available payment methods are also shown in this footer. To adapt their display, go to the Supported Payment Methods section in the website editor.

참고

It is not possible to create a customized footer per category.