Storefront 테마: 설치 및 구성 방법

게시 됨: 2018-01-12

Storefront는 WordPress를 사용하여 WooCommerce 스토어를 시작할 때 가장 유연하고 확장 가능한 테마 중 하나입니다.

깔끔한 코드 아키텍처로 인해 사용자들 사이에서 큰 인기를 얻었으며 현재 100,000개 이상의 온라인 상점에서 Storefront를 WordPress 테마로 사용합니다.

WooCommerce Storefront 테마 설치

WP 대시보드에서 테마를 검색하거나 수동으로 테마를 업로드하는 두 가지 방법으로 Storefront 테마를 설치할 수 있습니다.

WordPress 대시보드를 사용하여 설치

Storefront를 설치하는 가장 빠른 방법은 WordPress 대시보드를 사용하는 것입니다. 다음 단계에 따라 WordPress 대시보드를 통해 Storefront를 설치하십시오.

모양 > 테마 > 새로 추가 로 이동
검색 상자에 ' storefront '를 입력하고 Enter 키를 누릅니다.
스토어프론트 스크린샷 위로 마우스를 가져갑니다.
' 설치 ' 버튼을 선택합니다.
활성화 를 클릭하십시오

스토어프론트 수동 설치

wordpress.org에서 최신 버전의 Storefront를 다운로드하십시오.
모양 > 테마 > 새로 추가 로 이동
테마 업로드를 클릭하고 이전에 다운로드한 zip 파일을 선택합니다.
지금 설치 를 클릭하십시오
활성화 를 클릭하십시오

홈페이지 설정

Storefront에는 잘 고려된 내장 홈페이지 템플릿이 있습니다. 깔끔한 구조로 청중이 판매하는 제품을 쉽게 찾을 수 있습니다.

기본 Storefront 홈페이지 템플릿에는 6개의 섹션이 있습니다. 그러나 필요에 따라 섹션을 추가하거나 삭제할 수 있습니다.

기본 홈페이지 섹션:

페이지 콘텐츠
제품 카테고리
최근 제품
주요 제품
인기 상품
판매 중인 제품
베스트 셀러 제품

홈페이지 템플릿 할당

홈페이지 템플릿을 설정하려면 다음 단계를 따르세요.

대시보드 -> 페이지 로 이동하여 " 홈 "이라는 제목의 페이지 또는 원하는 페이지를 만드십시오.
원하는 환영 콘텐츠를 추가하면 제품 위에 표시됩니다.
오른쪽에 " 페이지 속성 " 이라는 상자가 있습니다.
" 템플릿 " 드롭다운에서 " 홈페이지 " 를 선택합니다.
게시 또는 업데이트 를 클릭하여 변경 사항을 저장합니다.

홈페이지 템플릿 표시

페이지를 게시한 후 이제 이 홈페이지를 웹사이트의 첫 페이지로 표시해야 합니다. 따라서 귀하의 웹사이트를 방문하는 모든 사람은 먼저 이 페이지를 봅니다. 이를 설정하려면 다음 단계를 따르세요.

대시보드 > 설정 > 읽기 로 이동합니다.
홈페이지 표시 아래에서 정적 페이지(아래 선택)를 선택합니다.
홈페이지 드롭다운에서 이전 홈페이지 템플릿 할당 페이지를 선택합니다.
변경 사항 저장 을 클릭하십시오

스토어프론트 홈페이지 섹션 재정렬

후크를 사용하거나 Homepage Control이라는 플러그인을 사용하여 Storefront Homepage 섹션의 순서를 변경할 수 있습니다. 홈페이지 섹션을 재정렬하려면 아래 단계를 따르십시오.

홈페이지 컨트롤 다운로드 및 설치
모양 -> 사용자 정의 -> 홈페이지 제어 로 이동하십시오.
필요에 따라 섹션을 끌어서 재정렬합니다.
저장 및 게시 를 클릭하여 변경 사항을 저장합니다.

탐색 메뉴 구성

Storefront 테마에서는 3개의 위치에 메뉴를 표시할 수 있습니다.

기본 메뉴 – 사이트 로고 바로 아래에 나타납니다.
보조 메뉴 – 검색 상자 근처 로고 옆.
휴대용 메뉴 – 모바일 장치용 메뉴.

메뉴 설정

기본적으로 특정 기본 메뉴가 설정되지 않은 경우 WordPress는 모든 페이지를 기본 메뉴로 표시합니다. 때때로 그것은 사용자를 혼란스럽게 하고 이 페이지가 메뉴에 어떻게 올랐는지 알아내는 데 어려움을 줍니다.

새 메뉴 생성 및 페이지 추가

관리자 패널로 이동한 다음 모양 > 메뉴로 이동합니다.
상단에 메뉴 이름 필드가 있습니다. 여기에 메뉴 이름을 쓰세요.
왼쪽에서 페이지를 클릭합니다(메뉴에 페이지를 추가한다고 가정).
모두 보기를 클릭하여 게시된 모든 페이지 목록을 가져옵니다.
메뉴에 표시할 페이지를 선택하십시오.
페이지 선택 후 메뉴에 추가 버튼을 클릭합니다.
메뉴 항목을 드래그 앤 드롭하여 원하는 대로 재정렬합니다.
메뉴 저장 클릭

메뉴 할당

메뉴를 생성한 후 표시할 위치에 메뉴를 할당합니다. 모양 > 메뉴 > 메뉴 설정 으로 이동하여 표시 위치 확인란에서 위치를 확인합니다.

메뉴에 제품 카테고리 추가하기

관리자 패널로 이동한 다음 모양 > 메뉴 로 이동합니다.
왼쪽 상단에서 화면 옵션 을 클릭하고 제품 카테고리 를 확인하십시오.
이제 왼쪽 창에 제품 카테고리 탭이 표시됩니다.
제품 카테고리 탭을 클릭하여 확장하고 카테고리를 선택하십시오.
선택 후 메뉴에 추가 버튼을 클릭합니다.
메뉴 항목을 드래그 앤 드롭하여 원하는 대로 재정렬합니다.
저장 메뉴 클릭

위젯 설정

Storefront를 사용하면 3개의 다른 영역에 6개의 위젯 영역을 표시할 수 있습니다.

사이드바 – 메인 사이트 콘텐츠의 왼쪽 또는 오른쪽,
헤더 아래 – 사이트 헤더 바로 아래 및 콘텐츠 위.
바닥글 열 1 – 바닥글 영역
바닥글 열 2 - 바닥글 영역
바닥글 열 3 – 바닥글 영역
바닥글 열 4 – 바닥글 영역

WooCommerce 설정

WooCommerce 설치

대시보드 > 플러그인 > 새로 추가 > 플러그인 검색으로 이동합니다.
"우커머스"를 검색하세요.
지금 설치 를 클릭합니다.
활성화 를 클릭합니다.

WooCommerce 구성

WooCommerce를 활성화하면 마법사를 사용하여 WooCommerce를 설치하라는 메시지가 표시됩니다. 모든 초기 설정을 처리합니다. 6파트로 나누어져 있습니다.

페이지 설정 – 필수 페이지(쇼핑, 장바구니, 결제, 내 계정)를 자동으로 구성합니다.
매장 위치 – 매장 위치, 통화 및 판매세 구성
배송 – 중량 단위 및 치수 단위 구성
결제 – 결제 게이트웨이를 설정합니다.
테마 – WooCommerce 호환 테마를 설치합니다.
준비 – (선택 사항) WooCommerce가 사용 정보를 수집하도록 허용합니다.

WooCommerce 대시보드에서 언제든지 이 모든 설정을 할 수 있습니다.

WooCommerce에 제품 추가

워드프레스 대시보드로 이동
제품 > 새로 추가 를 클릭하십시오.
제품 이름 필드에 제품 이름 또는 제목을 입력합니다.
아래 편집기에 제품 설명을 작성하십시오.
이제 제품의 추천 이미지 하나와 추가 이미지를 제품 갤러리에 업로드해야 합니다.
오른쪽에 제품 이미지 및 제품 갤러리라는 제목의 상자가 있습니다.
추천 이미지를 제품 이미지에 업로드하고 추가 이미지를 제품 갤러리에 업로드합니다.
게시 를 클릭합니다.

제품 가격 및 속성 설정

제품 가격을 설정하려면 대시보드 > 제품으로 이동하여 원하는 제품을 선택하세요. 그런 다음 제품 데이터 섹션까지 아래로 스크롤합니다. 다음은 모든 제품 데이터 섹션 설정에 대한 간단한 설명입니다.

상품 유형

심플 상품 : 심플한 싱글 상품.
그룹화된 제품 : 컬렉션의 일부인 제품입니다.
외부/제휴 상품 : 귀하의 스토어에 등록되어 있지만 실제 상품은 다른 곳에서 판매되는 상품입니다.
Variable product : 바리에이션(크기, 색상)이 있는 제품
가상 상품 : 배송이 필요 없는 상품입니다.
다운로드 가능한 제품 : 다운로드 가능한 파일을 제공해야 하는 제품입니다.

일반적인

정가 : 제품 정가입니다.
판매가 : 할인된 가격입니다.

SKU : SKU(Stock Keep Unit) 추적 제품
재고 관리 : 재고 관리 활성화
재고현황 : 상품의 재고가 있는지 없는지.
낱개 판매 : 1개 주문으로 판매 가능합니다.

배송

무게: 제품의 무게입니다.
치수: 제품의 길이, 너비 및 높이.
배송 등급: 특정 배송 방법과 유사한 유형의 제품을 그룹화합니다.

연결된 제품

상향 판매 : 제품 세부 정보 페이지 아래에 관련 제품을 표시합니다.
교차 판매 : 장바구니 페이지에 관련 상품을 표시합니다.
속성 : 제품 전역 속성을 선택합니다.

고급의

구매시 참고사항 : 구매완료 후 고객님께 발송하기 위한 참고사항입니다.
메뉴 주문 : 이 제품에 대한 맞춤 주문 위치입니다.
리뷰 활성화 : 제품 리뷰를 활성화하거나 비활성화합니다.

스토어프론트 커스터마이징

로고를 추가하는 방법

웹사이트에 로고를 추가하고 표시하려면 다음 단계를 따르십시오.
1. WordPress 관리자로 이동한 다음 모양 > 사용자 정의
2. 그런 다음 사이트 ID > 로고로 이동합니다.
3. 로고 선택을 클릭하여 로고 이미지를 업로드합니다. (권장 이미지 크기: 470px X 110px)
4. 게시를 클릭합니다.

사이트 파비콘을 업로드할 위치

웹사이트에 파비콘을 추가하고 표시하려면 다음 단계를 따르십시오.
1. WordPress 관리자로 이동한 다음 모양 > 사용자 정의
2. 그런 다음 사이트 ID > 사이트 아이콘으로 이동합니다.
3. 이미지 선택을 클릭하여 로고 이미지를 업로드합니다. (권장 이미지 크기: 512px X 512px)
4. 게시를 클릭합니다.

게시물 아카이브 또는 블로그 레이아웃을 변경하는 방법

모양 > 사용자 정의 > 블로그 사용자 정의 > 게시물 아카이브 로 이동
포스트 아카이브 레이아웃 에서 레이아웃 선택
게시 를 클릭하십시오

게시물 아카이브 또는 블로그 열을 변경하는 방법

모양 > 사용자 정의 > 블로그 사용자 정의 > 게시물 아카이브 로 이동
게시물 아카이브 열 에서 열 번호(전체 너비, 2열, 3열 및 4열) 선택
게시 를 클릭하십시오

단일 게시물 또는 기사 레이아웃을 변경하는 방법

모양 > 사용자 정의 > 블로그 사용자 정의 > 단일 게시물 로 이동
단일 포스트 레이아웃 에서 레이아웃 선택
게시 를 클릭하십시오

글꼴을 변경하는 방법

모양 > 사용자 정의 > 일반 스타일 > 타이포그래피 로 이동합니다.
글꼴 페어링 에서 글꼴 선택
게시 를 클릭하십시오

우커머스 커스터마이징

상점 페이지 레이아웃을 변경하는 방법

모양 > 사용자 정의 > WooCommerce > 쇼핑 페이지 – 제품 목록 으로 이동
제품 아카이브 레이아웃 에서 레이아웃 선택
게시 를 클릭하십시오

상품 상세 페이지 레이아웃 변경 방법

모양 > 사용자 정의 > WooCommerce > 쇼핑 페이지 – 제품 목록 으로 이동
제품 아카이브 레이아웃 에서 레이아웃 선택
게시 를 클릭하십시오