📌

데스크톱에서 스크롤 시 블록 고정 기능 살펴보기

이미지를 클릭하여 크게 확인해 보세요!

데스크톱에서 스크롤 시 블록 고정(sticky) 기능이란?

스크롤을 내려도 특정 블록이 화면에 계속 보이도록 고정하는 기능입니다.

→ 예를 들어 상품 상세 페이지에서 상품 정보 영역(가격, 구매 버튼)을 고정하여, 새로운 디자인을 연출할 수 있습니다. 자세한 활용 방법은 상세 페이지 활용 예시를 살펴봐 주세요.

데스크톱에서 스크롤 시 블록 고정 기능을 사용할 수 있는 영역

•

상품 상세 페이지 (참고: 기본 제공 페이지 편집하기)

•

커스텀 섹션 (참고: 커스텀 섹션 활용하기)

Step 1. 디자인 에디터 [페이지 > 상품 상세]에서 [섹션 > 상품 필수 정보]를 선택 후, 오른쪽 패널의 ‘데스크톱에서 스크롤 시 블록 고정’ 기능을 사용합니다.

Step 2. 왼쪽/오른쪽 블록 중 높이가 짧은 방향을 체크하면, 스크롤이 끝날 때까지 화면에 유지됩니다.

예시로, 아래 영상은 왼쪽의 나열형 상품 썸네일보다 길이가 짧은 오른쪽 상품 정보/옵션, 수량 컨트롤/구매 버튼/보조 설명 그룹을 고정하여, 스크롤 시 오른쪽 화면이 유지됩니다.

Step 1. 디자인 에디터 [페이지]에서 작업할 페이지를 클릭합니다. 이어서 [섹션 > 커스텀 섹션]을 선택 후 오른쪽 패널의 ‘데스크톱에서 스크롤 시 블록 고정’ 기능을 사용합니다.

커스텀 섹션이 추가되어 있지 않다면, 본문 영역 옆 [+]를 클릭하여 추가해 주세요.

Step 2. 왼쪽/오른쪽 블록 중 높이가 짧은 방향을 체크하면, 스크롤이 끝날 때까지 화면에 유지됩니다.

예시로, 아래 영상은 왼쪽의 이미지 그룹보다 길이가 짧은 오른쪽 이미지 블록을 고정하여, 스크롤 시 오른쪽 화면이 유지됩니다.

고정된 블록의 높이가 [자동]으로 설정되어 있다면 동작하지 않습니다.

아래 이미지를 참고하여, 고정하려는(짧은) 블록의 데스크톱 높이를 [콘텐츠에 맞춤]으로 변경해 주세요.

•

[상품 상세 페이지 - 상품 필수 정보의 설정 경로]

•

[커스텀 섹션의 설정 경로]

여러 블록을 한번에 묶으려면 그룹 블록 기능을 이용합니다.

작업 중인 상품 필수 정보 섹션/커스텀 섹션 하위 [+](블록 추가)를 클릭하여 그룹 블록을 만들어 주세요. 이후 추가할 여러 블록들을 그룹 블록 하위로 밀어넣으면, 하나의 그룹으로 묶을 수 있습니다.

TIP! 그룹 내부 블록들을 세로로 나열하고 싶다면, 그룹 레이아웃의 정렬 방향을 [세로]로 선택합니다. (영상 참고)

섹션 안에 블록이 3열 이상이라면, 설정에 따라 가장 첫 번째 블록이 고정됩니다.

예시로, 아래 이미지처럼 A, B 그룹 블록과 C 블록을 이용 중일 때 [오른쪽] 블록을 고정한다면 가장 우측의 C 블록이 고정됩니다.

상품 정보를 스크롤하는 동안 왼쪽의 상품 이미지는 고정됩니다.

작업 방법

 상품 이미지와  상품 정보 그룹이 잘 분리되어 있는지 재확인합니다.

상품 필수 정보 섹션의 데스크톱에서 스크롤 시 블록 고정 기능을 [왼쪽]으로 설정합니다.

상품 이미지를 스크롤하는 동안 오른쪽의 상품 정보는 고정됩니다.

작업 방법

 상품 이미지와  상품 정보 그룹이 잘 분리되어 있는지 재확인합니다.

 상품 이미지가 길게 나열되어야 스크롤 효과가 극대화되므로, 상품 이미지의 데스크톱 레이아웃은 [나열]로 설정합니다.

상품 필수 정보 섹션의 데스크톱에서 스크롤 시 블록 고정 기능을 [오른쪽]으로 설정합니다.

상품 이미지를 스크롤하는 동안 오른쪽의 상품 정보는 고정됩니다. 또한 상품 상세 설명과 리뷰도 이미지 하단에 배치하여, 상세 페이지 전체를 2열로 운영하는 방식입니다.

작업 방법

상품 필수 정보 섹션 안에 그룹 블록을 생성하여  상품 이미지 블록을 해당 그룹 하위로 배치합니다. 이때  상품 정보 그룹에는 영향이 없어야 합니다.

기존의 상품 상세 정보 섹션과 리뷰 섹션은 우측의 눈 모양 아이콘을 클릭하여 숨겨 두고, 조금 전 생성한 그룹 블록 하위에 상품 상세 설명 블록과 상품 리뷰 블록을 추가합니다.

상품 필수 정보 섹션의 데스크톱에서 스크롤 시 블록 고정 기능을 [오른쪽]으로 설정합니다.