제품 갤러리는 판매하는 제품을 전시하는 방식입니다. 사이트 페이지에 갤러리를 추가하고 전체 제품 또는 특정 카테고리 표시 여부를 선택할 수 있습니다.
아래와 같이 원하는 대로 그리드 갤러리와 슬라이더 갤러리 중에서 선택할 수 있습니다.
그리드 갤러리에 카테고리 표시하기
그리드 제품 갤러리는 많은 수의 제품을 표시하기에 적합합니다. 제품은 여러 열과 행이 있는 그리드에 표시됩니다.
그리드 갤러리를 추가해 표시할 카테고리를 선택하려면:
- 갤러리를 추가할 페이지로 이동합니다.
- 에디터의 요소 추가 패널을 엽니다.
- Wix 에디터: 에디터 왼쪽에서 요소 추가
를 클릭합니다. - 에디터 X: 에디터 X 상단 바에서 요소 추가
를 클릭합니다.
- 쇼핑몰을 클릭합니다.
- 그리드 제품 갤러리를 클릭합니다.
- 사이트 페이지의 해당 위치에 그리드 갤러리를 끌어다 놓습니다.
- 에디터에서 갤러리를 클릭합니다.
- 카테고리 선택을 클릭합니다.
- 옵션을 선택합니다.
- 전체 제품을 표시하려면: 전체 제품 카테고리를 선택했는지 확인합니다.
- 하나의 카테고리를 표시하려면: 카테고리를 클릭해 선택합니다.
그리드 갤러리 사용자 지정하기
갤러리는 고객이 첫 번째로 보게되는 매장의 요소입니다. 갤러리를 사용자 지정해 멋진 인상을 남길 수 있도록 만드세요.
그리드 갤러리를 사용자 지정하려면:
- 에디터에서 사용자 지정을 할 갤러리가 있는 페이지로 이동합니다.
- 제품 갤러리를 클릭합니다.
- 설정
아이콘을 클릭합니다. - 원하는 작업을 선택합니다.
레이아웃 탭을 클릭해 갤러리를 다음과 같은 옵션으로 갤러리를 사용자 지정합니다.
- 와이드 스크린 사용하기: 버튼을 클릭해 갤러리가 브라우저 내에서 확장되도록 설정합니다. 활성화한 경우 갤러리의 여백 크기를 설정하세요. 와이드 스크린 사용하기를 활성화한 경우 갤러리 레이아웃 섹션의 그리드 동작 아래에 있는 반응형을 선택할 것을 권장합니다.
- 갤러리 레이아웃: 표시 스타일을 선택한 후 텍스트 정렬, 열과 행의 수, 간격을 선택합니다.
- 이미지 레이아웃: 업로드한 이미지의 표시 방식을 선택합니다. 자세히 보기
- 리본 레이아웃: 리본이 표시되는 위치를 선택합니다.
- 페이지 번호: 페이지 번호의 스타일을 선택하고 화살표 및 정렬을 사용자 지정합니다.
참고: 설정 탭에서 페이지 번호를 선택한 경우에만 사용할 수 있습니다.
설정 탭을 클릭해 다음과 같은 옵션을 사용자 지정합니다.
- 마우스오버 시: 고객이 제품 위에 마우스오버 시 나타나는 효과를 설정합니다.
- 표시 정보: 갤러리 요소를 표시 및 비공개로 설정합니다.
- 제품 더보기: 고객이 페이지 밑으로 스크롤할 때 나타나는 효과를 선택합니다. 자세히 보기
참고: 모바일 환경에서 "더보기" 버튼은 제품 10개가 로드된 후에 표시됩니다. - 카트에 추가 버튼: 버튼을 표시해 고객이 제품 페이지로 이동하지 않고도 쇼핑카트에 제품을 추가할 수 있도록 설정합니다. 선택한 경우 버튼을 사용자 지정합니다.
- 마우스오버 시 표시: 선택하면 고객이 마우스오버 시 버튼을 표시합니다.
- 버튼 클릭 시: 고객이 카트에 추가 버튼을 클릭하면 어디로 이동할지 선택합니다.
- 수량 표시: 선택 시 고객이 카트에 2개 이상의 같은 제품을 추가할 수 있습니다.
- 옵션 표시: 활성화 시 색상, 사이즈와 같은 제품 옵션을 표시합니다.
텍스트 탭을 클릭해 다음과 같은 요소를 사용자 지정합니다.
- 카트에 추가 버튼 텍스트: 카트에 추가 버튼이 활성화된 경우 편집할 수 있습니다.
- 품절 메시지 텍스트: 제품의 재고가 없는 경우 표시되는 메시지입니다.
- 더보기 버튼 텍스트: 고객이 페이지 밑으로 스크롤을 내릴 때 더보기 버튼 설정을 활성화한 경우 사용할 수 있습니다.
디자인 탭을 클릭해 갤러리를 다음과 같은 옵션으로 갤러리를 사용자 지정합니다.
도움말: 설정과 제품보기 탭에서 활성화한 기능에 따라 사용할 수 있는 옵션이 다를 수 있습니다.
- 일반: 갤러리의 배경 색상을 선택하고 필터 및 정렬 디자인을 사용자 지정합니다.
- 더보기 버튼 / 페이지 번호: 설정 탭에서 선택한 "더보기 버튼" 또는 "페이지 번호" 옵션을 사용자 지정합니다.
- 제품 표시: 제품의 배경 색상을 선택하고, 테두리를 추가하고, 갤러리 텍스트를 사용자 지정합니다.
- 카트에 추가 버튼: 기본 및 마우스오버 시 디자인을 선택합니다.
- 리본: 리본 모양, 색상, 글꼴을 선택합니다. 자세히 보기
- 제품 옵션 및 수량: 색상 및 드롭다운의 제품 옵션 유형을 사용자 지정합니다.
- 제품명 및 가격 구분선: 제품명과 가격 사이의 구분선을 사용자 지정합니다.
- 제품 보기 버튼: 제품에 마우스오버 시 이미지 위에 제품 보기 버튼이 표시됩니다. 이를 확인하려면 사이트를 미리보기합니다.
필터를 활성화하면 고객이 원하는 제품을 쉽게 찾을 수 있습니다.
자세히 보기
정렬 옵션을 통해 고객이 제품을 가격, 이름, 신상 순으로 정렬할 수 있습니다.
자세히 보기
제품 보기를 통해 고객이 쇼핑몰 페이지에서 벗어나지 않고 팝업으로 제품의 상세 정보를 확인할 수 있습니다.
제품 보기를 비활성화하려면:
- 제품보기 탭을 클릭합니다.
- 제품 보기 표시 버튼을 클릭해 비활성화합니다.
제품 보기 사용자 지정에 대한 자세한 정보는
여기를 클릭해 확인하세요.
모바일 그리드 갤러리 사용자 지정하기
휴대 기기에서도 갤러리가 멋지게 나타날 수 있도록 설정하세요.더 작은 화면에 맞게 디자인을 조정하고 고객이 갤러리를 벗어나지 않고도 쇼핑 카트에 빠르게 제품을 추가할 수 있도록 할 수 있습니다.
모바일 그리드 갤러리를 사용자 지정하려면:
- 사용자 지정할 그리드 갤러리가 있는 페이지로 이동합니다.
- 에디터 상단에서 모바일
아이콘을 클릭합니다.
- 그리드 갤러리를 클릭합니다.
- 설정을 클릭합니다.
- 다음의 옵션을 사용해 모바일 갤러리를 사용자 지정합니다.
- 카트에 추가 버튼 표시: 활성화 시 고객이 제품 페이지로 이동하지 않아도 트에 제품을 추가할 수 있습니다. 활성화한 경우, 수량 표시 버튼을 클릭해 고객이 한 개 이상의 제품을 쇼핑 카트에 추가할 수 있도록 설정합니다.
- 제품 옵션 표시: 사이즈 및 색상과 같은 제품 옵션 표시를 활성화합니다.
- 레이아웃 사용자 지정: 제품 표시를 1단 또는 2단으로 .
- 디자인 사용자 지정: 버튼을 끌어 모바일 환경의 텍스트 크기를 조정합니다.
슬라이더 갤러리에 카테고리 표시하기
슬라이더 갤러리는 제품을 선보일 수 있는 완벽한 도구입니다. 고객은 탐색 화살표를 클릭해 더 많은 제품을 확인할 수 있습니다.
슬라이더 갤러리를 추가해 표시할 카테고리를 선택하려면:
- 갤러리를 추가할 페이지로 이동합니다.
- 에디터의 요소 추가 패널을 엽니다.
- Wix 에디터: 에디터 왼쪽에서 요소 추가를 클릭합니다.
- 에디터 X: 에디터 X 상단 바에서 요소 추가를 클릭합니다.
- 쇼핑몰을 클릭합니다.
- 슬라이더 제품 갤러리를 클릭합니다.
- 슬라이더 제품 갤러리를 배치하고자 하는 위치에 끌어다 놓습니다.
- 에디터에서 갤러리를 클릭합니다.
- 설정을 클릭합니다.
- 옵션을 선택합니다.
- 전체 제품을 표시하려면: 전체 제품 카테고리를 선택했는지 확인합니다.
- 하나의 카테고리를 표시하려면: 카테고리 선택 섹션에서 카테고리를 선택합니다.
슬라이더 갤러리 사용자 지정하기
슬라이더 제품 갤러리를 완벽한 모습으로 사용자 지정하세요. 갤러리의 텍스트 및 디자인을 맞춤형으로 만들고 표시할 요소를 선택하는 등 (예: 카트에 추가 버튼) 다양한 작업을 할 수 있습니다.
슬라이더 갤러리를 사용자 지정하려면:
- 슬라이더 제품 갤러리를 클릭합니다.
- 설정을 클릭합니다.
- 원하는 작업을 선택합니다.
레이아웃 탭을 클릭해 갤러리를 다음과 같은 옵션으로 갤러리를 사용자 지정합니다.
- 와이드 스크린 사용하기: 버튼을 클릭해 슬라이더 갤러리가 표시되는 방식을 선택합니다.
- 활성: 요소가 방문자 브라우저의 전체 너비로 늘어납니다.
- 여백: 갤러리 가장자리의 여백 크기를 설정합니다.
- 비활성: 요소가 브라우저 전체로 확장되지 않습니다.
- 제품 표시 스타일: 제품 정보가 표시되는 방식을 선택합니다.
- 제품 정보 정렬: 텍스트 정렬을 왼쪽, 가운데, 오른쪽 중 선택합니다.
- 갤러리 제목 정렬: 설정 탭에서 제목을 비활성화할 수 있습니다.
- 제품 수: 표시되는 제품 수를 결정하는 방법을 선택합니다.
- 고정형: 선택한 제품 수가 모든 사이트 방문자에게 표시됩니다.
- 반응형: 방문자의 화면 크기에 따라 표시되는 제품 수가 조정됩니다. 이 설정은 위에서 와이드 스크린 사용하기 옵션을 선택한 경우에 한해 사용할 수 있습니다.
- 제품 간격: 제품 사이의 여백 크기를 조정합니다.
- 제품 정보 여백: 제품 정보의 왼쪽 및 오른쪽 여백을 조정합니다.
- 이미지 레이아웃: 업로드한 이미지의 표시 방식을 선택합니다. 자세히 보기
- 리본 레이아웃: 리본이 표시되는 위치를 선택합니다.
설정 탭을 클릭해 다음과 같은 옵션을 사용자 지정합니다.
- 마우스오버 시: 고객이 제품 위에 마우스오버 시 나타나는 효과를 설정합니다.
- 표시 정보: 갤러리 요소를 표시 및 비공개로 설정합니다.
- 카트에 추가 버튼: 버튼을 표시해 고객이 제품 페이지로 이동하지 않고도 쇼핑카트에 제품을 추가할 수 있도록 설정합니다. 선택한 경우 버튼을 사용자 지정합니다.
- 마우스오버 시 표시: 체크 상자를 선택하면 고객이 마우스오버 시 버튼을 표시합니다.
- 버튼 클릭 시: 고객이 카트에 추가 버튼을 클릭하면 어디로 이동할지 선택합니다.
- 수량 표시: 선택 시 고객이 카트에 2개 이상의 같은 제품을 추가할 수 있습니다.
텍스트 탭을 클릭해 다음과 같은 요소를 사용자 지정합니다.
- 갤러리 제목 텍스트: 제목이 활성화된 경우 사용할 수 있는 설정입니다.
- 카트에 추가 버튼 텍스트: 카트에 추가 버튼이 활성화된 경우 편집할 수 있습니다.
- 품절 메시지 텍스트: 제품의 재고가 없는 경우 표시되는 메시지입니다.
디자인 탭을 클릭해 갤러리를 다음과 같은 옵션으로 갤러리를 사용자 지정합니다.
도움말: 설정과 제품보기 탭에서 활성화한 기능에 따라 사용할 수 있는 옵션이 다를 수 있습니다.
- 일반: 갤러리의 배경 색상과 제목 글꼴 및 색상을 선택하고 슬라이더 갤러리 화살표를 사용자 지정합니다.
- 제품 표시: 제품의 배경 색상을 선택하고, 테두리를 추가하고, 갤러리 텍스트를 사용자 지정합니다.
- 카트에 추가 버튼: 기본 및 마우스오버 시 디자인을 선택합니다.
- 리본: 리본 모양, 색상, 글꼴을 선택합니다. 자세히 보기
- 제품명 및 가격 구분선: 제품명과 가격 사이의 구분선을 사용자 지정합니다.
- 제품 보기 버튼: 제품에 마우스오버 시 이미지 위에 제품 보기 버튼이 표시됩니다. 이를 확인하려면 사이트를 미리보기합니다.
제품 보기를 통해 고객이 쇼핑몰 페이지에서 벗어나지 않고 팝업으로 제품의 상세 정보를 확인할 수 있습니다.
제품 보기를 비활성화하려면:
- 제품보기 탭을 클릭합니다.
- 제품 보기 표시 버튼
을 클릭해 비활성화합니다.
제품 보기 옵션의 사용자 지정에 대한 자세한 정보는
여기를 클릭해 확인하세요.
