카탈로그

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.

제품 카탈로그에는 상단 표시줄, 사이드 패널제품 목록 영역 이 있습니다. Odoo를 통해 레이아웃을 사용자 지정 필터, 그리고 추가 기능 까지 필요에 따라 모두 사용할 수 있습니다.

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.

상단 표시줄

The top bar can include a search bar, a currency selector, sort-by and display options, and category quick access.

검색 및 표시 옵션별 정렬

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:

  • 해당 없음

  • 추천 상품

  • 최신품

  • 이름 (A-Z)

  • 가격 - 낮은 순

  • 가격 - 높은 순

기본 정렬은 전체 카테고리 에 적용됩니다.

If you don’t want to display a top bar or side panel, you can disable all related options in the website editor.

사이드 패널

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.

카탈로그에서 품목 분류하기

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 Website ‣ eCommerce ‣ eCommerce Categories, 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 Website ‣ eCommerce ‣ Products, 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.

참고

하나의 품목이 여러 개의 이커머스 카테고리에 속하는 것도 가능합니다.

카테고리에 대한 환경설정을 완료하고 관련 품목 지정이 완료되면, 기본 상점 페이지로 이동하여 웹사이트 편집기를 실행합니다. 카테고리 옵션에서 왼쪽, 즉 사이드 패널 이나 위쪽, 즉 상단 표시줄, 또는 두 곳 모두에 메뉴를 활성화할 수 있습니다. 왼쪽 카테고리를 선택하면 축소 가능한 카테고리 선택 옵션이 표시되어 사이드 패널에서 카테고리를 접어서 축소시킬 수 있습니다.

이커머스 웹사이트의 카테고리 옵션

더 보기

품목

속성

속성은 색상이나 소재와 같은 품목의 특성을 나타내는 반면, 세부 옵션은 다양한 속성을 조합하는 경우를 말합니다. 속성과 세부 옵션에 대한 환경설정을 하려면 웹사이트 ‣ 이커머스 ‣ 품목 으로 이동하여 품목을 선택한 후 속성 및 세부 옵션 탭을 클릭합니다. 필요한 속성을 얼마든지 추가할 수 있습니다.

더 보기

제품 유형

품목 특성 및 세부사항

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.

속성 을 활성화하면 추가로 선택 항목이 나타납니다:

  • 가격 필터: 스위치를 토글하면 가격 범위 표시줄이 나타나서, 고객이 핸들을 끌어서 조정하면 지정된 가격 범위에 따라 품목에 필터를 적용할 수 있습니다.

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

  • 이커머스에 태그를 사용하려면 이커머스 ‣ 품목 태그 로 이동한 후 새로 만들기 를 클릭하세요. 품목 태그 양식에 있는 품목 템플릿 탭에서 해당 태그에 연결할 품목을 추가하세요. 품목 세부 옵션 탭에서 품목 세부 옵션을 추가하는 것도 가능하며 모든 품목 탭에서 선택한 모든 품목의 요약 정보를 확인할 수 있습니다.

  • Price filtering works independently from attributes and, therefore, can be enabled on its own, if desired.

품목 목록 영역

You can customize the layout of the entire shop page, as well as that of individual category pages.

또한 각각의 품목 페이지 를 맞춤 설정하는 것도 가능합니다.

In the website editor, choose the layout, and set the default layout to either Grid or List view.

다음 항목을 활용하여 레이아웃을 다르게 변경할 수 있습니다:

  • 사이즈: 페이지 및 줄마다 표시될 품목 수를 설정합니다.

  • 간격: 품목 간 간격을 지정합니다.

  • 스타일: 기본값, 카드, 썸네일 또는 그리드 를 선택합니다.

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

그리드 크기를 선택할 수 있지만 지나치게 많은 수의 제품을 표시하면 페이지의 전반적인 성능과 로딩 속도에 영향을 줄 수 있습니다.

또한 상점 페이지에서 품목 위치를 수동으로 변경하는 것도 가능합니다. 위치를 변경하려면 기본 상점 페이지로 이동하여 품목을 클릭하고 웹사이트 편집기를 실행합니다. 품목 섹션에서 화살표를 이용하여 품목 순서를 변경할 수 있습니다. << >> 버튼을 클릭하면 품목이 맨 왼쪽이나 오른쪽으로 이동하며, < > 버튼을 사용하면 한 칸씩 왼쪽이나 오른쪽으로 이동할 수 있습니다.

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.

제품 특징

품목을 강조 표시하여 상점 페이지에서 더욱 눈에 띄게 나타낼 수 있습니다. 강조하여 나타내려면 웹사이트 편집기로 이동하여 강조 표시할 품목을 클릭합니다. 품목 섹션에 있는 그리드를 클릭하여 품목 이미지의 크기를 선택할 수 있으며, 리본 을 추가하는 것도 가능합니다. 리본을 추가하면 품목 이미지 전체에 세일, 품절, 재고 없음 또는 신규! 와 같은 배너가 표시됩니다.

리본 하이라이트

새 리본을 생성하려면 리본` 필드 옆에 있는 초록색 (생성) 아이콘을 클릭합니다. 그런 다음 리본 이름 을 추가하고, 위치 를 지정한 다음, 배경텍스트 라벨을 선택합니다. 리본을 편집하려면 리본 라벨 옆에 있는 ) 아이콘을 클릭합니다.

새 리본 생성하기.

이제 모든 이커머스 품목에 리본을 사용할 수 있게 되었습니다.

  • 새 리본을 생성하는 다른 방법:

    • Go to Website ‣ eCommerce ‣ Product Ribbons 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.

  • 또한 특정한 품목 세부 옵션 에 리본을 추가하는 것도 가능합니다. 리본을 추가하려면 웹사이트 ‣ 이커머스 ‣ 품목 으로 이동하여 해당하는 품목을 선택합니다. 세부 옵션 스마트 버튼을 클릭하고 세부 옵션을 선택한 다음, 판매 섹션의 세부 옵션 리본 필드에 리본을 추가합니다.

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

Use building blocks to add content on the shop and/or category page.

카탈로그에 있는 상단이나 하단 섹션을 사용자 지정하여 전체 상점 페이지 혹은 특정한 카테고리에 맞게 설정할 수 있습니다. 후자의 경우 필터로 해당 카테고리를 지정하여 검색할 때만 블록이 표시됩니다. 이렇게 블록을 일반 쇼핑몰 페이지에 표시하려면 상단 또는 하단 섹션의 가장 위쪽이나 아래쪽에 이동시키고, 특정 카테고리로 필터링할 때만 표시하려면 카테고리 이름 위쪽의 영역이나 제품 목록 아래쪽에 배치합니다.

빌딩 블록을 머리글 또는 바닥글에 배치합니다.

  • 이커머스 카테고리 페이지에 콘텐츠를 추가할 경우 SEO 전략 면에서 큰 도움이 됩니다. 품목이나 이커머스 카테고리에 연결된 키워드를 활용하면 자연 유입을 통해 트래픽을 증대시킬 수 있습니다. 또한 각 카테고리에는 검색 엔진에서 링크하여 색인화할 수 있는 고유한 URL이 있습니다.

  • eCommerce categories can also be added as mega menu items for quick access.

추가 기능

장바구니에 추가 또는 위시리스트 버튼이나 :guilabel:`비교 목록`과 같은 추가 기능 버튼에 액세스하여 활성화할 수 있습니다. 이 버튼을 활용하려면 웹사이트 편집기를 열고 선택하려는 기능 버튼을 클릭합니다. 품목 이미지 위에 마우스를 가져가면 세 가지 버튼이 모두 나타납니다.

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

  • (위시리스트): 품목 추가 버튼을 위시리스트 에 추가합니다.

더 보기

품목