쇼핑몰 매출을 끌어올리는 비결 중 하나는 ‘매력적인 상품 썸네일’을 제작하는 것입니다. 거기에 아임웹 디자인모드의 롤오버(Hover) 기능까지 추가한다면? 방문자가 마우스를 무심코 올렸을 때 상품 이미지가 자동으로 변경되어, 나도 모르게 클릭하게 되는 마법의 상품 썸네일을 만들 수 있죠!
이번 아임웹 레시피에서는 복이 가득한 선물을 만드는 디자인 브랜드 <Sarangbang(사랑방)>의 사례를 통해 롤오버 설정법을 알아보겠습니다. 사랑방은 상품 썸네일에 커서를 올렸을 때 배경 이펙트를 넣어 상품에 시선을 집중시키고 있는데요.
Sarangbang(사랑방)의 레시피, 지금 알아볼까요?👩🍳
📌이런 분이라면 특히 주목해 주세요!
- 상품 판매를 더욱 활성화하고 싶은 분
- 상품 진열 페이지를 완성도 있게 구성하고 싶은 분
- 판매 상품/서비스에 대한 방문자의 관심도를 높이고 싶은 분
준비물
상품 이미지와 배경색이 깔린 이미지. 총 2장을 준비해 주세요.
STEP 1
[관리자페이지] > [쇼핑] > [상품 관리]에 접속하여 이미지를 변경할 상품을 클릭해주세요. [이미지 추가]를 클릭하여 준비한 이미지 2개를 추가해 주세요.
✋여기서 잠깐!
배경색이 깔린 이미지는 두 번째에 배치해 주세요.
STEP 2
상품 이미지를 설정했다면, [디자인 모드]에 접속하여 [쇼핑 기획전] 위젯에서 마우스 오른쪽 버튼을 클릭 후 [쇼핑 설정]을 클릭해 주세요.
STEP 3
[디자인 설정]에서 [Hover] 항목 중 ‘두 번째 이미지 표시’를 클릭하면 끝이에요!
💡TIP
상품 썸네일 외에도 텍스트, 이미지, 버튼 등에 마우스 포인터가 올라갔을 때 전환 효과를 줄 수 있어요. 웹사이트 무드에 맞게 다양한 옵션을 설정해 보세요!
다른 브랜드들은 이 기능을 어떻게 활용했을까요?
🔎 디어니스(Dierneas)
상품 착용컷이나 연출컷을 보여주었어요.
🔎 에디션덴마크
상품의 구성품을 자세히 보여주었어요.
✅ 롤오버(Hover), 이런 용도로도 활용할 수 있어요!
- 상품 썸네일 - 일부 상품 강조하기 (ex. 신제품, 한정 상품 등 특별 상품에만 롤오버 적용)
- 상단 메뉴/버튼 - 마우스 포인터 올렸을 때 형태 변경하기 (ex. 텍스트/버튼 색상 변경, 텍스트 내용 변경 등)
우리 브랜드만의 감도 높은 웹사이트, 쉽고 빠르게 만들어 보세요!
아임웹은 웹사이트, 온라인 쇼핑몰 제작을 고민하는 여러분들을 위해 70여 개의 템플릿을 무료로 제공하고 있어요. 조금만 수정해도 꽤 그럴듯한 웹사이트가 완성되죠! 마음에 드는 템플릿을 발견했다면, 지금 바로 가볍게 만들어 보세요👇
