사이트의 스토어 페이지와 제품 상세 정보 페이지를 사용자 지정하세요.
브랜드의 디자인과 표현 방식에 맞게 사이트에 제품이 표시되는 방식을 사용자 지정할 수 있습니다. 이 가이드를 사용하여 사이트 버전에 따라 스토어 페이지와 제품 상세 정보 페이지의 스타일 옵션을 찾아보세요.
접근성 높은 스타일 변경에 대해 자세히 알아보려면 접근성 높은 커머스 사이트 만들기를 참조하세요.
스토어 페이지와 제품 상세 정보 페이지 비교
제품의 스타일을 지정하기 전에 Squarespace가 모든 사이트에서 제품을 어떻게 구조화하는지 이해하는 것이 좋습니다. 제품은 탐색 가능한 랜딩 페이지를 만드는 스토어 페이지와 개별 제품 상세 정보 페이지의 두 부분으로 구성됩니다. 이러한 영역은 몇 가지 스타일 조정을 공유하며 고유한 스타일 옵션이 있습니다. 자세히 알아보려면 스토어에 제품 추가를 참조하세요.
스타일 옵션 열기
스토어 페이지와 제품 상세 정보 페이지 스타일 옵션은 두 곳에서 변경할 수 있습니다.
- 스토어 페이지 - 사이트 미리 보기에서 편집을 클릭한 다음 스토어 섹션에서 섹션 편집을 클릭하여 레이아웃 및 디자인 옵션을 변경하세요. 각 스토어 페이지에는 고유한 섹션 스타일이 있습니다.
- 제품 상세 정보 페이지 - 편집하려는 제품 상세 정보 페이지를 여세요. 편집을 클릭한 다음 제품 상세 정보 섹션에서 섹션 편집을 클릭하여 레이아웃 및 디자인 옵션을 변경하세요. 이 스타일 설정은 동일한 스토어 페이지의 모든 제품 상세 정보 페이지에 적용됩니다.
스토어 페이지와 제품 상세 정보 페이지 모두에서 편집을 클릭한 다음 페인트 브러시 아이콘을 클릭하여 글꼴 및 색상과 같은 사이트 스타일을 변경하세요. 사이트 스타일의 일부 옵션은 특정 페이지에만 적용되며, 다른 옵션은 전체 사이트에 영향을 미칩니다.
스토어 페이지의 스타일을 지정하는 방법은 다음과 같습니다.
- 편집하려는 스토어 페이지를 엽니다.
- 웹사이트 패널로 돌아가 디자인을 클릭한 다음 사이트 스타일을 클릭합니다.
- 제품 섹션의 조정을 사용하여 랜딩 페이지 스타일을 변경합니다.
- 개별 제품 상세 정보 페이지에 대한 조정의 경우 사이트 스타일을 종료하고 제품을 연 다음 사이트 스타일로 다시 들어갑니다.
팁:
스토어 페이지
스토어 페이지 방문자는 그리드 형태로 배열된 모든 제품 아이템 대표 이미지를 확인할 수 있습니다. 스토어 페이지에는 최대 200개의 제품이 표시됩니다. 제품이 200개를 초과하는 경우 고객은 다음을 클릭해 더 많은 제품을 볼 수 있습니다.
스토어 페이지 섹션의 스타일을 지정하는 방법은 다음과 같습니다.
- 편집하려는 스토어 페이지를 엽니다.
- 왼쪽 상단 모서리에서 편집을 클릭한 다음 스토어 섹션에서 섹션 편집을 클릭합니다. 아래에서 세부 정보를 사용자 지정할 수 있습니다. 변경 사항은 이 스토어 섹션에만 적용됩니다.
요소 탭에서는 다음을 설정할 수 있습니다.
- 카테고리 제목 - 섹션 상단에 페이지 제목을 표시합니다.
- 브레드크럼 - 방문자가 현재 페이지에 방문하기 전에 어떤 경로를 통해 이동했는지 탐색 경로를 표시합니다(관련 제품과 필터링된 카테고리 페이지 제외).
- 가격 - 제품 섬네일에 가격을 표시하거나 숨깁니다.
- 제품 설명 - 목록 레이아웃이 있을 때 제품 설명을 표시하거나 숨깁니다.
- 장바구니에 추가 버튼 - 제품에 옵션이 한 개만 있거나 없는 경우, 제품 상세 정보 페이지뿐만 아니라 스토어 페이지에도 장바구니에 추가 버튼이 표시됩니다. 제품에 옵션이 두 개 이상 있는 경우, 스토어 페이지에 옵션 보기 버튼이 표시됩니다. 이 옵션은 그리드 레이아웃을 사용할 때 표시됩니다.
디자인 탭에서는 다음을 설정할 수 있습니다.
- 메뉴 배치 - 섹션 상단이나 사이드바에 카테고리 탐색을 표시합니다. 카테고리 탐색은 숨길 수 없습니다.
- 머리말 텍스트 정렬
- 레이아웃 - 제품 섬네일을 그리드 또는 목록으로 표시합니다. 목록 레이아웃에서는 제품 설명을 미리 보기로 표시할 수 있습니다.
- 그리드 레이아웃의 열 수(최소 2열)
- 열과 행 간격
- 텍스트 정렬
- 배경 - 그림 매트처럼 제품 섬네일의 바탕이 되는 배경을 표시하거나 숨깁니다. 배경색을 설정하고, 모서리를 곡선으로 만들고, 획의 유형과 색상, 두께를 선택하세요.
- 버튼 스타일 지정 및 정렬
- 이미지 종횡비 및 텍스트 간격
- 모서리 - 섬네일 배경과 제품 이미지를 각진 코너 또는 둥근 코너로 설정합니다. 둥글게 만들려는 모서리를 클릭한 후 숫자를 입력하세요. 숫자가 높을수록 둥글기가 완만해집니다.
- 섹션 너비 및 세로 패딩(여백.
- 구분선 - 페이지의 스토어 섹션과 다른 섹션 사이에 구분선을 표시합니다. 구분선의 모양과 획 유형, 색상, 두께를 선택하세요.
색상 탭에서:
- 스토어 섹션의 섹션 테마를 선택하세요.
- 테마에서 연필 아이콘을 클릭하여 사용자 지정하세요. 이는 테마를 사용하는 모든 섹션에 영향을 미친다는 점에 유의하세요.
아래 표를 사용하여 다음 템플릿 그룹의 스타일 옵션을 찾아보세요.
- 고급 - Brine, Farro, Skye, Tremont, York
- 클래식 - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
- 고유 - Galapagos와 Supply는 서로 다른 스타일 조정을 따릅니다. 제품 스타일 지정에 대한 자세한 내용은 템플릿 가이드를 참조하세요.
레이아웃
스토어 페이지 방문자는 그리드 형태로 배열된 모든 제품 아이템 대표 이미지를 확인할 수 있습니다. 다음 조정을 사용해 그리드의 스타일을 지정하세요.
사이트 스타일 섹션
- 고급 - 제품: 레이아웃
- 클래식 - 제품
| 설명 | 고급 | 클래식 |
| 행당 아이템 수를 변경합니다. | 행당 아이템 수 | 행당 제품 수 |
| 행의 각 아이템 사이의 간격을 변경합니다. | 아이템 간격 | n/a |
| 이미지 모양을 변경합니다. 이미지는 모양에 맞게 잘립니다. | 이미지 종횡비 | n/a |
| 이미지 컨테이너의 모양을 설정합니다. | n/a | 제품 아이템 크기 |
| 이미지 컨테이너를 채우도록 이미지를 자를지 여부를 선택합니다. | n/a | 제품 이미지 자동 자르기 |
| 컨테이너 크기에 맞게 잘리지 않은 이미지 뒤에 표시되는 색상을 변경합니다. | n/a | 제품 배경 색상 |
제품 정보
고급 스토어 페이지에 대한 모바일 조정을 표시하려면 위치: 오버레이를 선택하세요.
사이트 스타일 섹션
- 고급 - 제품: 상세 정보
- 클래식 - 제품
| 설명 | 고급 | 클래식 |
| 제목과 가격이 이미지 아래 또는 커서를 올리면 표시되도록 설정합니다. | 위치: 아래, 오버레이 | 제품 목록 제목: 아래, 오버레이 |
| 제품 목록 제목: 아래를 활성화한 경우 텍스트를 정렬합니다. | n/a | 제품 목록 정렬: 가운데, 왼쪽 |
| 제품 목록 제목: 오버레이를 선택한 경우 마우스오버 시 오버레이의 색상을 설정합니다. 슬라이더를 조정하여 투명도를 설정하세요. | n/a | 제품 오버레이 색상 |
| 모바일 브라우저에서 텍스트가 표시될 위치를 선택합니다. | 위치(모바일): 아래, 오버레이 | n/a |
| 텍스트 정렬 방법을 선택합니다. | 정렬 | n/a |
| 위치: 오버레이를 선택한 경우 마우스오버 시 오버레이의 색상을 설정합니다. 슬라이더를 이동하여 투명도를 설정하세요. | 오버레이 색상 | n/a |
| 커서를 올리면 표시되도록 설정한 경우 텍스트의 정렬을 추가로 변경합니다. | 오버레이 패딩 | n/a |
| 각 행 아래의 간격을 변경합니다. | 간격 | n/a |
| 아이템 제목을 숨기려면 선택 해제하세요. | 제목 표시 | n/a |
| 제목 글꼴을 설정합니다. | 제목 글꼴 | n/a |
| 제목 색상을 설정합니다. | 제목 색상 | n/a |
| 모바일에서 제목 색상을 설정합니다. | 제목 색상(모바일) | n/a |
| 위치: 아래로 설정한 경우 텍스트와 이미지 사이의 간격을 설정합니다. | 제목 간격 | n/a |
| 가격을 숨기려면 선택 해제하세요. | 가격 보기 | 제품 가격 표시 |
| 가격 글꼴을 설정합니다. | 가격 글꼴 | n/a |
| 컴퓨터에서 가격 색상을 설정합니다. | 가격 색상 | n/a |
| 모바일에서 가격 색상을 설정합니다. | 가격 색상(모바일) | n/a |
| 컴퓨터에서 할인 가격 색상을 설정합니다. | 할인 가격 색상 | n/a |
| 모바일에서 할인 가격 색상을 설정합니다. | 할인 가격 색상(모바일) | n/a |
| 가격과 제목 사이의 간격을 설정합니다. | 가격 간격 | n/a |
제품 상세 정보 페이지
제품 상세 정보 페이지의 스타일을 지정하는 방법은 다음과 같습니다.
- 편집하려는 제품 상세 정보 페이지를 엽니다.
- 왼쪽 상단 모서리에서 편집을 클릭한 다음 섹션 편집을 클릭합니다. 아래에서 세부 정보를 사용자 지정할 수 있습니다. 모든 변경 사항은 동일한 스토어 페이지의 모든 제품 상세 정보 페이지에 적용됩니다.
형식 탭에서 다음 레이아웃 옵션 중에서 선택하세요.
- 단순 - 제품 이미지와 설명이 공백으로 둘러싸여 나란히 표시됩니다.
- 감싸기 - 제품 이미지가 설명 주위를 감쌉니다. 이미지는 항상 왼쪽으로 정렬됩니다.
- 절반 - 제품 이미지가 설명과 함께 페이지를 분할합니다. 이미지는 항상 왼쪽으로 정렬됩니다.
- 전체 - 제품 이미지가 설명 위에 여백 없음 캐러셀로 표시됩니다.
단순 레이아웃을 선택하면 다음 옵션도 사용자 지정할 수 있습니다.
- 콘텐츠 너비.
- 이미지 디자인 - 제품에 이미지가 여러 개 있으면 슬라이드쇼, 스택 또는 캐러셀 디자인 중에서 선택하세요. 디자인이 슬라이드쇼인 경우 다른 제품 이미지의 섬네일이 표시됩니다.
- 옵션 표시.
- 텍스트 정렬.
- 콘텐츠 정렬 - 상단 또는 가운데 중에서 선택하세요. 상단 정렬은 제품 이미지 상단과 텍스트 사이에 패딩(여백)을 표시할 수 있습니다. 콘텐츠 정렬은 슬라이드쇼 및 캐러셀 디자인에 사용할 수 있으며, 스택에는 사용할 수 없습니다.
- 양식 너비.
- 제품 탐색 스타일.
- 설명 위치 - 제품 설명이 표시되는 위치입니다.
- 장바구니에 추가 버튼 - 인라인 옵션은 수량 필드 옆에 버튼을 배치합니다.
- 갤러리 종횡비(슬라이드쇼 및 캐러셀 디자인만 해당) - 캐러셀 디자인에서 종횡비는 이미지 컨테이너의 비율을 설정하지만, 이미지가 잘려서 컨테이너를 채우지 못할 수도 있습니다. 종횡비가 설정에서 선택한 종횡비와 동일한 이미지를 추가하는 것이 좋습니다.
- 갤러리 배치.
- 갤러리 섬네일 배치 - 디자인이 슬라이드쇼인 경우 제품 대표 이미지의 위치입니다.
- 갤러리 너비.
- 이미지 간격.
- 캐러셀 화살표 크기(슬라이드쇼 및 캐러셀 디자인만 해당).
- 클릭 동작 - 디자인에 따라 없음, 확대 또는 라이트박스 중에서 선택하세요.
- 마우스오버 시 동작(슬라이드쇼 및 스택 디자인만 해당) - 없음 또는 확대 중에서 선택하세요.
- 이미지 확대 비율.
색상 탭에서:
- 스토어 섹션의 섹션 테마를 선택하세요.
- 테마에서 연필 아이콘을 클릭하여 사용자 지정하세요. 이는 테마를 사용하는 모든 섹션에 영향을 미친다는 점에 유의하세요.
옵션 표시
단순 레이아웃에서는 옵션을 버튼이나 드롭다운 메뉴로 표시할 수 있습니다. 다른 모든 레이아웃은 드롭다운 메뉴로 옵션을 표시합니다.
옵션 버튼은 사이트의 보조 버튼 스타일 조정을 따릅니다. 옵션 드롭다운 메뉴는 옵션 필드 글꼴 집합을 따르며, 색상은 섹션의 색상 테마에 따라 달라집니다.
제품 대기 목록에 가입하는 옵션은 드롭다운 메뉴에 옵션이 표시될 때만 나타난다는 점에 유의하세요.
장바구니에 추가 및 결제 버튼
장바구니에 추가 버튼은 스토어 페이지와 개별 제품 상세 정보 페이지의 제품 섬네일 아래에 표시될 수 있습니다.
제품 상세 정보 페이지의 외관과 느낌을 유지하기 위해 가로 패딩 조정은 장바구니에 추가 버튼에 영향을 미치지 않습니다. 버전 7.1에서는 장바구니에 추가 버튼을 숨길 수 없습니다. 제품이 품절되면 장바구니에 추가 버튼이 흐리게 표시됩니다.
스토어 페이지에서 버튼 색상은 제품 텍스트와 배경 색상을 따릅니다. 제품 상세 정보 페이지의 장바구니에 추가 버튼과 장바구니 페이지의 결제 버튼은 모두 기본 버튼 스타일 조정 및 사이트의 색상 설정을 따릅니다. 버튼 스타일 옵션은 일관된 외관과 느낌을 보장하기 위해 사이트의 대부분의 버튼에 적용된다는 점에 유의하세요.
이러한 버튼은 항상 고객을 Squarespace 장바구니 및 결제 페이지로 안내합니다. 이러한 버튼을 사용하여 외부 사이트로 연결할 수 없습니다.
수량 필드
수량 필드는 다음과 같은 경우 제품 상세 정보 페이지에 표시됩니다.
- 제품의 재고 수준이 1보다 큽니다.
- 개별 옵션의 재고 수준에 관계없이 옵션이 있습니다.
제품 상세 정보 페이지에서 각 옵션의 현재 재고 수준을 표시하려면 재고 수량 한정 레이블을 활성화하세요. 이렇게 하면 재고 수준이 1개일 때 고객이 장바구니에 두 개 이상의 제품을 추가하려고 시도하는 것을 막을 수 있습니다. 수량 필드의 크기는 변경할 수 없습니다.
관련 제품
제품 상세 정보 페이지의 관련 제품 섹션은 스토어 섹션 스타일의 조정 및 사이트 전체 글꼴 조정을 따릅니다. 제품 상세 정보 페이지에서 스토어 섹션 스타일에 액세스하려면 스토어 페이지로 돌아가 왼쪽 상단 모서리에서 편집을 클릭하세요.
구독 빈도
구독 제품을 판매하는 경우 제품 상세 정보 페이지의 구독 빈도 섹션에 표시되는 색상을 변경할 수 있습니다. 사이트의 색상 테마를 열고 제품 상세 정보 페이지: 구독에서 색상을 변경하세요.
아래 표를 사용하여 다음 템플릿 그룹의 스타일 옵션을 찾아보세요.
- 고급 - Brine, Farro, Skye, Tremont, York
- 클래식 - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
- 고유 - Galapagos와 Supply는 서로 다른 스타일 조정을 따릅니다. 제품 스타일 지정에 대한 자세한 내용은 템플릿 가이드를 참조하세요.
레이아웃
사이트 스타일 섹션
- 고급 - 제품: 레이아웃
- 클래식 - 제품
| 설명 | 고급 | 클래식 |
| 아이템 간격을 변경합니다. | 간격 | n/a |
| 페이지 상단에 빈 공간을 추가합니다. | 상단 패딩 | n/a |
|
페이지 매김 표시를 변경합니다. |
탐색 표시: 브레드크럼만, 페이지 매김만, 브레드크럼 및 페이지 매김, 없음 | 제품 아이템 탐색 표시 |
| 페이지 매김 텍스트를 변경합니다. | 페이지 매김 스타일: 이전/다음, 제목 | n/a |
| 페이지 매김 텍스트를 변경합니다. | 탐색 정렬: 왼쪽, 가운데, 오른쪽, 분할 | n/a |
| 페이지 매김 글꼴을 변경합니다. | 탐색 글꼴 | n/a |
| 페이지 매김 색상을 변경합니다. | 탐색 색상 | n/a |
| 탐색에서 페이지 제목 사이의 화살표 색상을 변경합니다. | 탐색 구분선 색상 | n/a |
페이지 매김 팁:
- 제품 주문은 스토어 페이지에 표시되는 위치에 따라 설정됩니다. 왼쪽에서 오른쪽으로 정렬됩니다.
- 페이지 매김을 특정 카테고리로 제한할 수 없습니다. 페이지 매김은 모든 제품을 표시합니다.
이미지
개별 아이템을 볼 때 고객은 제품 이미지를 봅니다.
사이트 스타일 섹션
- 고급 - 제품: 갤러리
- 클래식 - 제품
| 설명 | 고급 | 클래식 |
| 이미지 정렬을 변경합니다. | 위치: 왼쪽, 오른쪽 | n/a |
| 갤러리 스타일을 변경합니다. | 디자인: 슬라이드쇼, 스택 | n/a |
| 이미지 너비를 변경합니다. | 너비 | n/a |
| 이미지 모양을 설정합니다. | 종횡비 | 제품 갤러리 크기 |
| 이미지 컨테이너를 채우도록 제품 이미지를 자를지 여부를 선택합니다. 그렇지 않으면 제품 배경 색상이 이미지 뒤에 표시됩니다. | n/a | 제품 갤러리 자동 자르기 |
| 디자인: 슬라이드쇼를 선택한 경우 이미지 아래에 표시되는 탐색 섬네일에 영향을 미치는 섬네일 조정입니다. | 섬네일 정렬: 왼쪽, 가운데, 오른쪽 | n/a |
| 섬네일 너비를 변경합니다. | 섬네일 너비 | n/a |
| 섬네일 간격을 변경합니다. | 섬네일 간격 | n/a |
| 디자인: 스택을 선택한 경우 이미지 사이의 간격을 변경합니다. | 간격 | n/a |
제품 정보
사이트 스타일 섹션
- 고급 - 제품: 상세 정보
- 클래식 - 제품
| 설명 | 고급 | 클래식 |
| 페이지에서 상세 정보가 배치되는 위치를 변경합니다. | 정렬: 왼쪽, 가운데, 오른쪽 | n/a |
| 줄 높이를 변경합니다. |
줄 높이 본문: 글꼴 섹션의 줄 높이 조정은 여기 줄 높이에도 영향을 미칩니다. |
n/a |
| 글자 간격을 변경합니다. | 간격 | n/a |
| 제품 제목을 표시하거나 숨깁니다. | 제목 표시 | n/a |
| 제품 제목 글꼴을 변경합니다. | 제목 글꼴 | n/a |
| 제품 제목 색상을 변경합니다. | 제목 색상 | n/a |
| 가격을 표시하거나 숨깁니다. | 가격 보기 | n/a |
| 가격 글꼴을 변경합니다. | 가격 글꼴 | n/a |
| 가격 색상을 변경합니다. | 가격 색상 | n/a |
| 할인 아이템의 색상을 변경합니다. | 할인 가격 색상 | n/a |
| 제품 설명이 표시되는 위치를 선택합니다. | 요약 위치: 가격 위, 가격 아래, 장바구니에 추가 버튼 아래 | n/a |
| 제품 설명 글꼴을 변경합니다. | 요약 글꼴 | n/a |
| 제품 설명 색상을 변경합니다. | 요약 색상 | n/a |
| 제품 설명 링크 색상을 변경합니다. | 요약 링크 색상 | n/a |
| 공유 버튼을 숨기거나 표시합니다. | 공유 버튼 표시 | 제품 소셜 공유 |
| 공유 버튼 섹션의 조정을 사용합니다. | 스타일 공유 버튼 | 스타일 공유 버튼 |
수량 및 옵션
사이트 스타일 섹션
- 고급 - 제품: 옵션
- 클래식 - 주요 콘텐츠
| 설명 | 고급 | 클래식 |
| 옵션을 표시하거나 숨깁니다. | 옵션 표시 | n/a |
| 수량을 표시하거나 숨깁니다. 수량은 사용 가능한 품목이 여러 개일 때만 표시됩니다. | 수량 표시 | n/a |
| 수량 표시를 변경합니다. | 스타일: 텍스트만, 정사각형, 둥근 사각형, 알약 | n/a |
| 수량 표시에 테두리 색상을 추가합니다. | 테두리 색상 | n/a |
| 수량 표시에 배경 색상을 추가합니다. | 배경 색상 | n/a |
| 수량 표시 글꼴을 변경합니다. | 레이블 글꼴 | n/a |
| 수량 표시 색상을 변경합니다. | 레이블 색상 | n/a |
| 수량 및 옵션 글꼴을 설정합니다. | 글꼴 | 사이트 전체 머리말 또는 표제 요소 1 조정을 따릅니다. |
| 수량 및 옵션 텍스트 색상을 설정합니다. | 텍스트 색상 | n/a |
| 옵션 표시 글꼴을 변경합니다. 메뉴 아이템 글꼴은 변경할 수 없습니다. | 글꼴 | n/a |
수량 필드
수량 필드는 다음과 같은 경우 제품 상세 정보 페이지에 표시됩니다.
- 제품의 재고 수준이 1보다 큽니다.
- 개별 옵션의 재고 수준에 관계없이 옵션이 있습니다.
제품 상세 정보 페이지에서 각 옵션의 현재 재고 수준을 표시하려면 재고 수량 한정 레이블을 활성화하세요. 이렇게 하면 재고 수준이 1개일 때 고객이 장바구니에 두 개 이상의 제품을 추가하려고 시도하는 것을 막을 수 있습니다.
장바구니에 추가 버튼
사이트 스타일 섹션
- 고급 - 버튼 표시
- 클래식 - 버튼
| 설명 | 고급 | 클래식 |
| 버튼을 숨깁니다. | 버튼 표시 선택 해제 | n/a |
| 버튼 스타일을 변경합니다. | 스타일: 실선, 아웃라인, 입체 | 스타일: 기본, 실선, 아웃라인, 입체 |
| 버튼 모양을 변경합니다. | 모양: 정사각형, 둥근 사각형, 알약 | 모양: 정사각형, 둥근 사각형, 알약 |
| 버튼 패딩을 추가하거나 제거합니다. | 패딩(여백): 작음, 중간, 큼 | n/a |
| 버튼 색상을 변경합니다. | 색상 | 버튼 색상 |
| 버튼 텍스트 색상을 변경합니다. | 텍스트 색상 | 텍스트 색상 |
| 버튼 글꼴을 변경합니다. | 글꼴 | 글꼴 |
팁: 제품이 품절되면 장바구니에 추가 버튼이 흐리게 표시됩니다.
결제 버튼
장바구니 페이지에 표시되는 결제 버튼은 사이트의 색상 설정을 따릅니다. 모양이나 글꼴을 사용자 지정할 수 없습니다.
관련 제품
관련 제품은 페이지 하단의 그리드에 표시됩니다. 다음 조정을 사용하여 외관을 변경할 수 있습니다.
사이트 스타일 섹션
- 고급 - 제품: 관련 제품
- 클래식 - 제품
| 설명 | 고급 | 클래식 |
| 행당 아이템 수를 변경합니다. | 행당 아이템 수 | 행당 아이템 수 |
| 아이템 간격을 추가하거나 제거합니다. | 아이템 간격 | 아이템 간격 |
| 이미지 종횡비를 설정합니다. | 이미지 종횡비 | 이미지 종횡비 |
| 텍스트 정렬을 변경합니다. | 세부 사항 정렬: 가운데, 왼쪽 | 세부 사항 정렬: 가운데, 왼쪽 |
| 제목 간격을 변경합니다. | 제목 간격 | 제목 간격 |
장바구니
아이콘은 기본적으로 사이트 머리말에 장바구니로 표시됩니다. 장바구니 아이콘을 숨기면 고객이 장바구니에 아이템을 추가할 때 페이지 하단에 표시됩니다. 자세히 알아보려면 장바구니 아이콘 표시를 참조하세요.
모든 템플릿은 고객의 장바구니에 담긴 아이템 수를 표시하고 결제 페이지로 연결되는 장바구니 버튼을 지원합니다. 장바구니가 표시되지 않으면 문제 해결 팁을 참조하세요. 템플릿의 장바구니 아이콘 스타일을 지정하는 방법을 알아보려면 장바구니 아이콘 표시를 참조하세요.
카테고리 탐색
제품에 카테고리를 추가하면 랜딩 페이지 상단에 탐색 메뉴가 생성됩니다. 고객은 이러한 링크를 사용하여 관심 있는 제품을 필터링할 수 있습니다. 두 버전 모두에서 카테고리 탐색은 다음과 같다는 점에 유의하세요.
- 하나 이상의 카테고리를 추가한 후에만 표시됩니다.
- 상세 정보 페이지에 표시되지 않습니다.
- 숨겨진 제품에 연결된 카테고리를 포함한 모든 카테고리를 표시합니다.
카테고리 탐색은 스토어 페이지 상단이나 사이드바에 표시될 수 있습니다. 모바일 기기에서는 카테고리 탐색이 항상 상단에 표시됩니다.
카테고리 탐색 글꼴은 단락 스타일을 따릅니다. 색상은 사이트 스타일의 제품: 기본 그리드 아래에 있는 카테고리 탐색 조정을 따릅니다.
위치를 변경하려면 섹션 스타일을 연 다음 카테고리 유형에서 사이드바 또는 상단을 클릭하세요. 탐색 순서를 변경하려면 카테고리 관리자에서 카테고리를 클릭하고 드래그하세요. 위치에 따라 하위 카테고리가 중첩 메뉴에 표시됩니다.
- 사이드바 - 하위 카테고리가 스토어 페이지와 필터링된 카테고리 페이지의 중첩 메뉴에 표시됩니다.
- 상단 - 하위 카테고리가 필터링된 주요 카테고리 페이지에는 표시되지만 필터링된 하위 카테고리 페이지에는 표시되지 않습니다.
카테고리 탐색을 숨기려면 카테고리 설정을 열고 필터 표시 여부 옆의 토글을 끄세요. 모든 카테고리에 대해 이 작업을 반복하세요. 자세한 내용은 제품 구성을 참조하세요.
카테고리 탐색은 알파벳순으로 표시됩니다. 아래 표를 사용하여 다음 템플릿 그룹의 스타일 옵션을 찾아보세요.
- 고급 - Brine, Farro, Skye, Tremont, York
- 클래식 - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
- 고유 - Galapagos와 Supply는 서로 다른 스타일 조정을 따릅니다. 이러한 템플릿에서는 카테고리 탐색을 숨길 수 없습니다. 카테고리 탐색 스타일 지정에 대한 자세한 내용은 템플릿 가이드를 참조하세요.
사이트 스타일 섹션
- 고급 - 제품: 정렬 + 필터
- 클래식 - 제품
| 설명 | 고급 | 클래식 |
| 카테고리 탐색을 숨깁니다. | 표시: 숨기기 | 카테고리 탐색 표시 선택 해제 |
| 카테고리 탐색을 활성화, 비활성화, 정렬합니다. | 표시: 상단, 왼쪽 측면, 오른쪽 측면, 숨기기 | n/a |
| 카테고리 탐색이 왼쪽 또는 오른쪽에 있는 경우 너비를 설정합니다. | 너비 | n/a |
| 탐색 아래의 간격을 변경합니다. | 여백 | n/a |
| 행의 각 아이템 사이의 간격을 변경합니다. | 아이템 간격 | n/a |
| 텍스트 정렬을 설정합니다. | 정렬: 왼쪽, 가운데, 오른쪽 | n/a |
| 탐색 글꼴을 설정합니다. | 글꼴 |
카테고리: 탐색 글꼴 (Bedford, Five, Ishimoto, Montauk, Native에서는 사용할 수 없음) |
| 탐색 색상을 설정합니다. | 색상 |
카테고리 탐색 색상 (Bedford, Five, Ishimoto, Montauk, Native에서는 사용할 수 없음) |
| 커서를 올리면 표시되는 링크의 색상을 선택합니다. | 활성 색상 |
카테고리 탐색 활성 색상 (Bedford, Five, Ishimoto, Montauk, Native에서는 사용할 수 없음) |
할인 중, 품절, 재고 수량 한정 레이블
품절된 아이템에는 항상 사용자 지정 가능한 품절 레이블이 표시됩니다. 두 버전 모두에서 레이블 텍스트와 글꼴 및 색상을 변경할 수 있습니다. 버전 7.0에서는 레이블의 모양과 위치를 변경할 수 있습니다.
할인 및 재고 수량 한정 레이블을 활성화한 경우 해당 레이블도 표시됩니다. 수량 한정 패널에서 재고 수량 한정 레이블 텍스트를 변경할 수 있지만 할인 중 레이블 텍스트는 변경할 수 없습니다. 스타일을 지정하는 방법은 사이트 버전에 따라 달라집니다.
- 품절된 아이템은 항상 스토어 페이지와 제품 상세 정보 페이지의 제품 이미지 아래에 상태 배지가 표시됩니다.
- 할인 및 재고 수량 한정 레이블은 사이트의 색상 및 기타 글꼴 조정을 따릅니다.
아래 표를 사용하여 다음 템플릿 그룹의 스타일 옵션을 찾아보세요.
- 고급 - Brine, Farro, Skye, Tremont, York
- 클래식 - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
- 고유 - Galapagos와 Supply는 서로 다른 스타일 조정을 따릅니다. 제품 스타일 지정에 대한 자세한 내용은 템플릿 가이드를 참조하세요.
이러한 스타일 조정에 액세스하려면 사이트 스타일을 열기 전에 편집하려는 스토어 페이지로 이동하세요.
사이트 스타일 섹션
- 고급 - 제품: 상태 배지
- 클래식 - 제품
| 설명 | 고급 | 클래식 |
| 배지를 숨깁니다. | 스타일: 없음 | n/a |
| 배지 스타일을 설정합니다. | 스타일: 직사각형, 정사각형, 원형, 없음 | n/a |
| 할인 배지 색상을 설정합니다. | 할인 색상 | n/a |
| 품절 배지 색상을 설정합니다. | 품절 색상 | n/a |
| 배지 글꼴을 설정합니다. | 글꼴 | n/a |
| 패딩을 추가하거나 제거합니다. | 패딩 | n/a |
| 배지 위치를 설정합니다. | 위치: 왼쪽 상단, 상단 가운데, 오른쪽 상단, 왼쪽 가운데, 가운데, 오른쪽 가운데, 왼쪽 하단, 하단 가운데, 오른쪽 하단 | n/a |
| 배지를 제품 이미지와 겹칩니다. | 인셋: 플로팅, 플러시, 세로로 도킹, 가로로 도킹 | n/a |
| 배지 크기를 변경합니다. | 인셋 크기 | n/a |
| 할인 가격 색상 | 제품: 상세 정보 섹션에서 할인 가격 색상 사용 | n/a |
| 상태 배지 색상 | 배지 배경 색상에 따라 검은색 또는 흰색으로만 설정할 수 있음 | n/a |
| 재고 수량 한정 레이블 색상 | 재고 수량 한정 레이블 색상 | 재고 수량 한정 레이블 색상 |
| 재고 수량 한정 레이블 글꼴 | 재고 수량 한정 레이블 글꼴 | 재고 수량 한정 레이블 글꼴 |
이미지 확대, 빠른 보기, 마우스오버 시 효과
제품에 이미지가 두 개 이상 있는 경우 스토어 페이지에서 커서를 올리면 항상 대체 제품 이미지가 표시됩니다. 제품 상세 정보는 항상 제품 이미지 아래에 표시됩니다. 페이지 또는 블록 설정에서 빠른 보기를 활성화할 수 있습니다. 빠른 보기 라이트박스의 배경 색상은 스토어 섹션의 색상을 따릅니다.
스토어 페이지에서는 이미지 확대를 사용할 수 없습니다. 그러나 제품 상세 정보 페이지에서 라이트박스와 클릭 시 및 마우스오버 시 이미지 확대를 활성화할 수 있습니다. 제품 아이템 패널에서 이러한 효과를 활성화하세요.
- 라이트박스 - 클릭 시 라이트박스 창에서 이미지가 열립니다.
- 확대 - 클릭 시 또는 마우스오버 시 이미지 세부 정보가 확대됩니다.
아래 표를 사용하여 다음 템플릿 그룹의 스타일 옵션을 찾아보세요.
- 고급 - Brine, Farro, Skye, Tremont, York
- 클래식 - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
- Galapagos는 대체 이미지 및 제품 정보 오버레이 옵션을 지원합니다.
- Supply는 고유한 제품 정보 오버레이 옵션을 지원합니다.
마우스오버 시 효과
고급 스토어 페이지에서 마우스오버 시 아이템 동작 조정을 표시하려면 제품: 세부 정보 섹션으로 이동하여 위치: 아래를 선택하세요.
사이트 스타일 섹션
- 고급 - 제품: 레이아웃
- 클래식 - 제품
| 설명 | 고급 | 클래식 |
| 마우스오버 시 동작을 설정합니다. |
마우스오버 시 아이템 동작(제품: 세부 정보 위치가 아래로 설정된 경우 표시됨) |
n/a |
| 커서를 올리면 제품 에디터에서 표시하는 두 번째 이미지를 표시합니다. | 마우스오버 시 아이템 동작: 대체 이미지 표시 | n/a |
| 커서를 올리면 제품 상세 정보 표시가 사라집니다. |
마우스오버 시 아이템 동작: 페이드 |
n/a |
| 마우스오버 시 효과가 없습니다. |
제품: 세부 정보 섹션에서 위치: 아래를 선택하고 제품: 레이아웃 섹션에서 마우스오버 시 아이템 동작: 없음 선택 |
제품 목록 제목: 아래 |
| 커서를 올리면 대체 이미지나 페이드 대신 제품 상세 정보를 표시합니다. |
제품: 세부 정보 섹션에서 위치: 오버레이 선택 |
제품 목록 제목: 오버레이 |
| 제품 이미지 아래에 제품 제목을 표시합니다. | n/a | 제품 목록 제목: 아래 |
| 마우스오버 시 오버레이 색상을 변경합니다. | n/a | 제품 오버레이 색상 |
| 마우스오버 시 제품 가격을 표시하거나 숨깁니다. | n/a | 제품 가격 표시 |
대체 이미지 팁:
- 두 번째 제품 이미지에 투명한 영역이 있는 경우 커서를 올리면 첫 번째 이미지가 해당 영역에 표시됩니다.
이미지 확대
사이트 스타일 섹션
- 고급 - 제품: 이미지 확대
- 클래식 - n/a
| 설명 | 고급 | 클래식 |
| 이미지 확대를 활성화하거나 비활성화합니다. | 이미지 확대 활성화 | n/a |
| 이미지 확대 비율을 설정합니다. | 이미지 확대 비율 | n/a |
| 클릭 시 또는 마우스오버 시 이미지 확대가 활성화되도록 설정합니다. | 확대 활성화 | n/a |
| 라이트박스에서 열리도록 제품 이미지를 설정합니다. |
라이트박스를 활성화합니다. 라이트박스 활성화 설정이 표시되지 않으면 이미지 확대를 활성화하고 마우스오버 시 확대가 활성화되도록 설정하세요. 이렇게 하면 라이트박스 활성화 설정이 표시될 것입니다. 라이트박스를 활성화한 후 이미지 확대를 비활성화할 수 있습니다. 이미지 확대와 라이트박스를 모두 사용하려면 이미지 확대가 마우스오버 시 활성화되도록 설정해야 합니다. |
n/a |
이미지 확대 팁:
- 배경이 투명한 이미지(.png)는 확대된 버전 뒤에 원본 이미지가 표시됩니다.
빠른 보기
빠른 보기를 활성화하면 사이트 스타일 패널에 새로운 섹션이 표시됩니다. 스타일 설정은 일관된 외관을 만들기 위해 사이트 전체에 적용됩니다.
방문자는 제품 빠른 보기를 사용하여 스토어 페이지에서 벗어나지 않고도 라이트박스의 아이템 세부 정보를 볼 수 있습니다. 이 기능은 클래식 스토어 페이지에서는 사용할 수 없지만, 이러한 템플릿의 제품 상세 정보 페이지에서는 제품 이미지가 라이트박스에서 열립니다.
사이트 스타일 섹션
- 고급 - 제품: 빠른 보기 버튼
- 클래식 - n/a
| 설명 | 고급 | 클래식 |
| 빠른 보기 버튼의 스타일, 색상, 글꼴, 패딩, 위치 및 크기를 사용자 지정합니다. | 위치 | n/a |
| 라이트박스의 외관을 사용자 지정합니다. | 제품: 빠른 보기 라이트박스 | n/a |
| 제품 설명을 표시합니다. | 요약 표시: 잘라내기 | n/a |
| 라이트박스 뒤의 스토어 페이지에 색상 필터를 추가합니다. | 오버레이 색상 | n/a |
| 라이트박스 외부에 표시되는 탐색 및 닫기 버튼을 변경합니다. | 제어 | n/a |
| 빠른 보기 제목 글꼴을 변경합니다. | 제품: 상세 정보 섹션에서 제목 글꼴 선택 | n/a |
빠른 보기 팁
- 빠른 보기 텍스트에 서식 지정 문제가 있는 경우 대신 일반 텍스트로 제품 상세 정보를 추가해 보세요.
- 모바일 기기에서는 빠른 보기를 사용할 수 없습니다.
- "빠른 보기" 버튼 텍스트는 사용자 지정할 수 없습니다.
- 제품 이미지는 빠른 보기에서 잘린 정사각형으로 표시됩니다.
- 제품 설명은 빠른 보기에서 특수 서식(예: 머리말 스타일 지정, 굵게, 이탤릭체, 또는 글머리 기호 목록) 없이 표시됩니다.
글꼴 및 색상
스토어 페이지와 제품 상세 정보 페이지의 색상과 글꼴은 사이트 전체의 글꼴 및 색상 조정을 따릅니다. 섹션 스타일 에디터에서 특정 스토어 섹션의 색상을 변경할 수도 있습니다. 제품 상세 정보 페이지는 스토어 섹션의 색상 테마를 따릅니다.
- 스토어 페이지에서 디자인 편집을 클릭한 다음 사이트 스타일을 엽니다.
- 글꼴을 클릭합니다.
- 글꼴을 선택한 후
을 클릭하여 사이트의 특정 부분에 글꼴을 적용합니다.
다음 조정을 사용하여 스토어 페이지와 제품 상세 정보 페이지의 글꼴을 변경하세요.
| 섹션 | 스토어 페이지 요소 |
| 표제 요소 | 페이지 제목, 관련 제품 섹션 제목, 제품 제목 |
| 단락 | 제품 설명, 가격, 페이지 탐색 |
| 버튼 | 버튼 |
| 메타 | 기타 스타일(예: 태그 및 가격) |
| 고급: 제품: 목록 | 목록 제목, 목록 가격, 목록 상태 |
| 고급: 제품 상세 정보 페이지 | 아이템 제목, 아이템 가격, 아이템 설명, 옵션 필드 |
아래 표를 사용하여 다음 템플릿 그룹의 스타일 옵션을 찾아보세요.
- 고급 - Brine, Farro, Skye, Tremont, York
- 클래식 - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
클래식 스토어 페이지
클래식 스토어 페이지의 텍스트는 사이트의 다른 텍스트와 동일한 스타일 조정을 따릅니다. 예를 들어 아이템 제목의 글꼴이나 색상을 변경하려면 머리말 또는 표제 요소 1 조정을 사용하세요. 카테고리 탐색과 같은 일부 요소에는 스타일을 지정하는 요소에 따라 이 가이드 전반에 걸쳐 나열된 자체 글꼴 조정이 있습니다.
옵션 드롭다운 메뉴는 모든 클래식 스토어 페이지에서 동일한 글꼴을 사용하므로 예외입니다. 이 글꼴은 사이트 스타일에서 변경할 수 없습니다.
고급 스토어 페이지
고급 스토어 페이지의 글꼴은 사이트의 다른 스타일 조정을 따르지만, 스토어 페이지의 특정 요소에 대한 추가 글꼴 조정이 있습니다. 이러한 조정은 스타일을 지정하는 요소에 따라 이 가이드 전반에 걸쳐 나열되어 있습니다.
모바일
제품 아이템과 정보는 스마트폰, 태블릿 및 좁은 브라우저에서 세로로 쌓입니다.
- 현재 모바일에서는 빠른 보기 및 이미지 확대를 사용할 수 없습니다.
- 제목과 가격은 항상 스토어 페이지에서 제품 이미지 아래에 표시됩니다.
- 오버레이 색상, 대체 이미지, 페이드 효과는 표시되지 않습니다.
- 카테고리 탐색이 한 줄에 모두 들어가지 않으면 방문자가 스와이프하여 볼 수 있는 가로 스크롤 목록으로 표시됩니다.
버전 7.1에서:
- 제품 상세 정보 페이지의 이미지는 고객이 스와이프하여 볼 수 있도록 항상 슬라이드쇼로 표시됩니다. 섬네일 이미지는 슬라이드쇼 아래에 표시되지 않습니다.
- 장바구니에 추가 버튼은 전체 및 단순 레이아웃의 제품 페이지에서 설명 앞에 표시됩니다.
- 카테고리 탐색은 쇼핑객이 스와이프하여 볼 수 있도록 가로로 표시됩니다.
- 제품은 한 개 또는 두 개의 열로 표시됩니다. 모바일 보기에서 편집을 클릭한 다음 섹션 편집을 클릭하세요. + 또는 - 아이콘을 클릭하여 표시되는 열 수를 변경하세요.
- 모바일 기기에서는 방문자가 스토어 랜딩 페이지에서 카테고리 태그를 클릭하면 브레드크럼 탐색이 표시됩니다. 방문자가 스토어 페이지에서 제품을 직접 클릭할 때는 브레드크럼 탐색이 표시되지 않습니다.
- 제품 상세 정보 페이지의 이미지는 레이아웃에 관계없이 1:1 종횡비로 표시됩니다.
버전 7.0에서:
- 고급 스토어 페이지에는 아이템 제목, 가격, 및 할인 가격에 고유한 모바일 색상이 적용됩니다.
- 제품은 두 개 이상의 열로 표시됩니다.
템플릿의 다른 모바일 옵션에 대해 알아보려면 버전 7.0 고급 모바일 스타일을 참조하세요. 버전 7.1에는 별도의 모바일 스타일이 없습니다.
스토어 페이지 코드 업데이트 및 사용자 지정 CSS(7.1 버전)
이 업데이트는 7.1 버전용입니다. 7.0 버전의 스토어 페이지는 영향을 받지 않습니다.
2025년 9월 2일에 스토어 페이지, 제품 상세 정보 페이지, 제품 블록을 구동하는 코드를 업데이트할 예정입니다. 운영 체제 업데이트와 마찬가지로 이 업데이트는 필수적인 플랫폼 유지 관리의 일환이며 새로운 커머스 기능을 계속 개발하는 데 도움이 될 것입니다. 변경되는 사항에 대한 자세한 내용은 개발자 문서를 방문하여 확인하세요.
새로운 코드는 사용자 지정 CSS를 지원하지만, 이러한 페이지의 스타일을 지정하는 데 사용하는 기존 사용자 지정 코드를 손상시킬 가능성이 높습니다. 업데이트 후 콘텐츠가 올바르게 표시되도록 사용자 지정 CSS를 편집해야 할 수 있습니다.
2025년 6월 30일부터 2025년 8월 30일까지 업데이트에 참여할 시기를 선택할 수 있습니다.
참여 방법은 다음과 같습니다.
- 판매 패널을 엽니다.
- 제품 설정을 클릭합니다.
- 시작하기를 클릭한 다음 업데이트 시작을 클릭합니다.
업데이트를 완료한 후에는 사이트를 이전 버전으로 되돌릴 수 없습니다.
2025년 9월 2일 이후에는 모든 스토어 페이지, 제품 상세 정보 페이지, 제품 블록이 자동으로 업데이트됩니다.
참고: CSS를 포함한 사용자 지정 코드는 Squarespace의 지원 범위를 벗어납니다. 이는 설정이나 문제 해결에 대해 더 이상 도움을 드릴 수 없음을 의미합니다.