# 쇼핑몰 레이아웃 9개 URL: https://canvaswp.com/ko/templates/shop/ Updated: 2026-11-03 템플릿 WooCommerce 카탈로그 레이아웃: 열 개수와 사이드바 위치, 카테고리 페이지, 필터 페이지, 그다음 장바구니와 결제. [라이브 쇼케이스 열기](https://demos.canvaswp.com/classic/) [데모 웹사이트 둘러보기](https://canvaswp.com/ko/demos/) 최종 업데이트 2026년 11월 3일 - [4열 (새 탭에서 열림)](https://demos.canvaswp.com/classic/shop/) - [3열 (새 탭에서 열림)](https://demos.canvaswp.com/classic/shop-3/) - [2열 (새 탭에서 열림)](https://demos.canvaswp.com/classic/shop-2-right-sidebar/) - [1열 (새 탭에서 열림)](https://demos.canvaswp.com/classic/shop-1/) - [상품 레이아웃 (새 탭에서 열림)](https://demos.canvaswp.com/classic/product/pink-printed-dress/) - [카테고리 - Parallax (새 탭에서 열림)](https://demos.canvaswp.com/classic/shop-category-parallax/) - [조합 필터 (새 탭에서 열림)](https://demos.canvaswp.com/classic/shop-combination-filter/) - [장바구니 (새 탭에서 열림)](https://demos.canvaswp.com/classic/cart/) - [결제 (새 탭에서 열림)](https://demos.canvaswp.com/xmas/xmas-checkout/) 모든 링크는 실시간 쇼케이스의 실제 페이지를 열며, 여러분이 설치하는 것과 같은 테마와 블록으로 만들어져 있습니다. 각 페이지의 구성 요소 ## 블록과 템플릿으로 만든 스토어 페이지 WooCommerce는 상품, 재고, 장바구니, 결제 등 스토어 운영을 담당합니다. Canvas는 쇼핑객이 거치는 페이지를 디자인하며, 이 모든 레이아웃은 테마와 플러그인에 포함된 구성 요소로 만들어집니다. ### 카탈로그 열 네 열 페이지는 테마의 제품 아카이브 템플릿이 출력하는 WooCommerce 쇼핑몰 페이지 자체입니다. 세 열, 두 열, 한 열 페이지에는 Canvas Products 블록이 들어 있으며, 블록의 열 설정이 한 행에 표시되는 항목 수를 결정합니다. 이 블록은 네 가지 쇼핑몰 템플릿 중 하나를 사용하는 페이지에 넣으며, 템플릿은 전체 너비, 왼쪽 사이드바, 오른쪽 사이드바, 양쪽 사이드바 중에서 고를 수 있습니다. ### 상품 페이지 제품은 편집할 때 선택하는 템플릿에서 레이아웃을 가져옵니다. 기본 페이지 외에도 한쪽 또는 양쪽에 사이드바가 있는 버전, 고정형 요약, 색상 견본, 사양 목록이 포함된 버전이 제공됩니다. 또한 캐러셀로도 제공되는 Linked Gallery 템플릿이 있습니다. ### 카테고리 배너 여러 개의 전체 높이 Parallax Image 블록이 쌓여 있으며, 카테고리마다 이미지 하나씩 배치되고 페이지를 스크롤할 때 각각 움직입니다. 블록에는 고유한 오버레이와 콘텐츠를 넣을 수 있어, 제목과 버튼으로 쇼핑객을 매장의 해당 구역으로 안내할 수 있습니다. ### 조합 필터 Canvas Products 블록 위에 Grid Filter 바 두 개가 있으며, 하나는 ‘카테고리 선택’, 다른 하나는 ‘정렬 기준’이라는 레이블이 붙어 있습니다. 이를 통해 쇼핑객은 페이지 새로고침 없이 바로 한 가지 유형으로 카탈로그를 좁히고 이름 또는 가격순으로 정렬할 수 있습니다. ### 장바구니 쇼케이스 장바구니는 WooCommerce가 제공하는 장바구니 블록을 사용합니다. Canvas는 블록 단위로 장바구니 페이지를 구성하려는 스토어를 위해 자체 Cart Table 및 Cart Totals 블록을 추가로 제공합니다. ### 결제 빈 장바구니에는 보여 줄 결제 화면이 없으므로, 이 링크는 Canvas Checkout Billing 및 Checkout Order Review 블록으로 만든 Christmas Store 데모의 결제 화면을 엽니다. 이 데모를 가져오면 제품과 이 결제 화면도 함께 설정됩니다. 고르는 방법 ## 제품 카탈로그에 맞는 쇼핑몰 레이아웃은 무엇인가요? 상품 수에 따라 레이아웃을 정하세요. 사진이 돋보이는 적은 수의 상품은 넓은 카드에 한 줄당 두세 개씩 배치하는 것이 가장 잘 어울리며, 상품마다 설명 단락이 필요하면 한 열로 배치하세요. 상품이 많은 카탈로그는 한 번에 더 많은 항목을 화면에 보여줘야 하며, 이때 네 열 쇼핑 페이지가 그 역할을 합니다. 쇼핑객이 종류와 가격이라는 두 가지 기준을 동시에 떠올릴 때는 조합 필터를 사용하세요. 카테고리 배너는 홈 페이지나 룩북에 배치하세요. 상품 그리드보다 이미지가 먼저 구매를 이끌어내는 곳입니다. 제품 페이지에서는 고객의 구매 동기에 따라 템플릿을 고르세요. 의류는 색상으로 팔리므로 색상 견본 버전이 유용합니다. 기술 제품은 세부 정보로 팔리므로 사양 목록이 그 역할을 합니다. 긴 페이지에서는 고정형 요약 영역이 가격과 버튼을 계속 보이게 합니다. 88개 데모 웹사이트 중 21개는 WooCommerce 스토어로 가져오며, 제품, 카테고리, 장바구니 및 결제 페이지가 함께 설정됩니다. ### 스토어 기능 WooCommerce 블록 24개와 스토어 템플릿 18개를 제공하며, 제품 갤러리부터 주문 검토까지 포함합니다. - [Canvas의 WooCommerce](https://canvaswp.com/ko/woocommerce/) ### 단계별 안내 상품, 쇼핑 페이지, 상품 페이지, 장바구니, 결제를 실제로 구축하는 순서대로 소개합니다. - [WooCommerce 스토어 시작하기](https://canvaswp.com/ko/guides/start-a-woocommerce-store-with-wordpress/) ### 쇼핑몰 데모 패션, 도자기, 가구 등을 다루는 데모를 제공하며, 가져오기 전에 모든 페이지를 하나씩 미리 볼 수 있습니다. - [이커머스 데모 비교](https://canvaswp.com/ko/wordpress-themes/ecommerce/) 더 많은 템플릿 ## 라이브러리의 나머지 - [페이지 템플릿 13](https://canvaswp.com/ko/templates/page-templates/) - [숏코드 및 요소 57](https://canvaswp.com/ko/templates/shortcodes/) - [포트폴리오 레이아웃 27](https://canvaswp.com/ko/templates/portfolio/) - [블로그 레이아웃 35](https://canvaswp.com/ko/templates/blog/)