카페24 ) 상품 이미지 꾸미기 (썸네일에 아이콘 넣기)

 

 

 

 

 

이번 포스팅에서는 카페24 상품 이미지 꾸미기 기능에 대해 알아보겠습니다.

 

 

 

 

 

 

 

# 상품 이미지 꾸미기 기능

카페24 쇼핑몰에서 상품에 아이콘을 적용하는 방법은 크게 두 가지입니다.

하나는 상품 썸네일 아래 상품 정보 부분에 아이콘을 추가하는 방법이고, 이 부분은 쇼핑몰 운영시 거의 대부분이 많이 알고 또 사용하고 있는 기능입니다.

나머지 하나는 아이콘을 상품 썸네일 위에 겹쳐서 노출할 수 있는 '상품 이미지 꾸미기' 기능인데 이 기능은 잘 모르는 분들이 많으신 것 같습니다.

 

 

 

이 기능을 이용하면 썸네일 위에 할인이나 자체제작 또는 품절 상품 등의 아이콘을 운영 방식에 따라 다양하게 이용할 수 있습니다.

또 아이콘이 적용되는 기간을 설정할 수 있어 할인 기간이 정해져 있거나, 판매 전 사전 공개 제품 등에 이용하면 편리합니다.

 

 

 

 

 

 

 

# '상품 이미지 꾸미기' 기능 적용해보기

이 기능은 상품등록 창에서 상품 각각에 개별로 적용할 수 있습니다.

먼저 기존에 등록되어 있던 상품에 아이콘을 적용해보겠습니다.

상품 수정창으로 접속한 다음 이미지정보 탭 > 추가이미지등록 항목 아래에 '상품 이미지 꾸미기' 항목이 있습니다.

 

 

 

 

저는 상품을 업데이트하고 나서 48시간 동안 적용되는 신상품 5% 할인 아이콘을 추가해보겠습니다.

 

 1  이미지 직접 추가하기 버튼을 클릭한 다음 미리 만들어 둔 아이콘을 불러옵니다.

 2  아이콘을 추가하면 해당 아이콘을 썸네일의 x축, y축을 기준으로 어디에 위치시킬지 지정할 수 있습니다.

저는 상단 왼쪽에 위치시켜 보겠습니다.

 

 

 

 3  아이콘의 체크박스에 체크표시를 하면 우측의 미리보기 화면에서 상품에 적용된 모습을 미리 체크할 수 있습니다.

실제로 상품에 적용을 원하면 해당 아이콘의 체크박스에 체크표시가 되어 있어야 하고,

 4  그다음 상품 수정 버튼까지 클릭해주어야 실제로 아이콘이 적용됩니다.

*유의사항 : 아이콘 자체를 삭제해버리면 모든 상품에서 해당 아이콘이 삭제됩니다. 해당 상품에만 적용을 원치 않을 때에는 체크박스에 체크를 풀어주면 됩니다.

 

 

 

쇼핑몰에서 상품을 확인해보면 이와 같이 적용된 것을 볼 수 있습니다.

 

 

 

이때, 아이콘이 위치를 썸네일 가장자리와 조금 여유를 두고 위치시키고 싶거나 아예 걸쳐있는 느낌으로 위치시키고 싶다면 css를 수정해주어야 합니다.

 

 

 

 

 

 

 

# css 수정해보기

카페24 기본 스마트디자인 스킨에서 수정을 진행하였습니다.

상품과 관련된 대부분의 css는 기본 css 파일인 'ec-base-product.css' 에 작성되어 있습니다.

ec-base-product.css 파일을 열어보니 썸네일 아이콘 위치에 관련된 css 는 제일 하단에 작성되어 있는 것을 확인할 수 있습니다.

 

각 클래스명 끝에 작성된 LT, LC, LB ~ CB 는 각각 x축, y축의 위치 값이 조합된 것입니다.

예를 들어 LT 는 Left+Top 이고, CB 는 Center+Bottom 입니다.

 

 

 

앞서 적용했던 아이콘은 상단 좌측, 즉 LT 이므로 .ec-product-bgLT 의 css 를 변경해보겠습니다.

좌측에서 10px, 상단에서 10px 위치로 옮겨보겠습니다.

 

background-position 속성값 작성에 대한 내용은 아래 이전 포스팅을 참고해주시기 바랍니다.

[html/css] background css 한 번에 작성하는 방법

 

 

 

css 수정 전, 좌측 상단에 붙어 있던 아이콘이 좌측과 상단 각각에서 10px 여백이 생겼습니다.

 

 

 

이렇게 css를 조절해서 다양한 아이콘을 썸네일 위에 표현할 수 있습니다.

이상 상품 이미지 꾸미기 사용 방법에 대해 알아보았습니다.