제품 빠른 보기, 이미지 확대 및 마우스오버 효과로 고객 경험을 향상하세요.

스토어 페이지에 빠른 보기, 이미지 확대, 마우스오버 효과와 같은 인터랙티브 기능을 추가하세요. 이러한 기능은 고객이 제품 이미지 위에 마우스 커서를 올리면 표시되어 제품을 자세히 볼 수 있도록 합니다.

팁: 웹사이트 전반에서 제품을 돋보이게 하고 매출을 높이는 방법을 알아보려면 스토어 매출 증대를 위한 디자인 팁 웨비나에 등록하세요.

스토어 페이지의 특별 기능

사용 가능한 스토어 페이지 특별 기능과 스타일 지정 방법 사이트에서 사용 중인 Squarespace 버전에 따라 달라집니다.

제품 이미지에 확대 기능 추가

이미지 확대 기능을 사용하면 제품 이미지가 더 크게 표시되어 고객이 소재, 질감 및 세부 사항을 자세히 살펴볼 수 있습니다. 이미지 확대 기능은 제품 상세 정보 페이지와 빠른 보기 라이트박스에서 사용할 수 있습니다.

이미지 위에 커서를 올리거나 클릭했을 때 확대되도록 설정할 수 있습니다.

제품 이미지 확대 기능 활성화

팁: 최상의 결과를 얻으려면 업로드하기 전에 웹 표시용으로 제품 이미지 형식을 지정하세요.

이미지 확대 기능은 모바일 기기에서는 사용할 수 없습니다. 데스크톱 보기에서 이미지 확대 기능을 활성화하는 방법은 사이트 버전에 따라 다릅니다.

참고: 투명 배경의 이미지(.png)는 확대된 버전 뒤에 원본 이미지가 표시됩니다.

제품에 빠른 보기 기능 추가

빠른 보기를 사용하면 고객은 현재 페이지에서 벗어나지 않고 버튼을 클릭해 라이트박스에서 제품 상세 정보를 확인할 수 있습니다. 이 기능은 고객이 스토어와 더욱 적극적으로 상호작용하고 더 많은 제품을 탐색하도록 유도합니다. 빠른 보기 버튼은 요약 블록, 제품 블록, 스토어 페이지에 표시될 수 있습니다.

제품 위에 커서를 올리면 버튼이 표시됩니다. 빠른 보기 라이트박스에는 제품 상세 정보, 이미지 및 해당 제품 페이지로 이동하는 전체 항목 보기 링크가 포함됩니다.

빠른 보기에서 원하지 않는 코드가 표시된다면, 제품 설명에 외부 텍스트 서식이 포함되어 있을 가능성이 높습니다. 이 서식을 제거하려면 제품 설명을 수동으로 다시 입력하거나, 일반 텍스트로 붙여넣기 하세요.

제품의 빠른 보기 버튼 활성화

스토어 페이지 또는 블록별로 빠른 보기 기능을 활성화할 수 있습니다. 여러 개의 스토어 페이지나 블록이 있는 경우, 각 항목에 빠른 보기 버튼을 개별적으로 추가해야 합니다.

제품 블록에 빠른 보기를 추가하는 방법:

1. 제품 블록 편집기에서 표시할 제품을 선택하세요.
2. 디자인 탭에서 제품 빠른 보기 토글을 켭니다.
3. 페이지 변경 사항을 저장하세요.

요약 블록에 빠른 보기를 추가하려면 다음 단계를 따르세요.

1. 요약 블록 에디터의 콘텐츠 탭에서 스토어 페이지가 선택되어 있는지 확인합니다.
2. 디자인 탭을 클릭하세요.
3. 제품 빠른 보기 활성화 토글을 켭니다. 제품 대표 이미지 위에 빠른 보기 버튼이 나타납니다.
4. 페이지 변경 사항을 저장하세요.

스토어 페이지에 빠른 보기를 추가하려면 다음 단계를 따르세요.

1. 해당 페이지의 설정을 엽니다.
2. 고급을 클릭하고 빠른 보기를 클릭한 다음, 빠른 보기 활성화 토글을 켭니다.
3. 스토어 페이지가 여러 개인 경우, 각 페이지에 대해 이 단계를 반복하세요.

참고: 빠른 보기 창의 색상은 사이트 스타일에 설정된 스토어 페이지 섹션의 배경색을 따릅니다.

제품에 마우스오버 효과 추가

호버 효과는 제품 이미지 위에 커서를 올렸을 때 정보를 표시하거나 움직임을 추가합니다. 사이트에서 사용할 수 있는 호버 옵션은 사이트의 버전에 따라 다릅니다.