이번 포스팅에서는 카페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 속성값 작성에 대한 내용은 아래 이전 포스팅을 참고해주시기 바랍니다.
css 수정 전, 좌측 상단에 붙어 있던 아이콘이 좌측과 상단 각각에서 10px 여백이 생겼습니다.
이렇게 css를 조절해서 다양한 아이콘을 썸네일 위에 표현할 수 있습니다.
이상 상품 이미지 꾸미기 사용 방법에 대해 알아보았습니다.
'카페24 디자인 수정하기' 카테고리의 다른 글
카페24 ) 파일질라 FTP 로 이미지 배너 넣기 - 2 (0) | 2020.09.03 |
---|---|
카페24 ) 파일질라 FTP 로 이미지 배너 넣기 - 1 (0) | 2020.08.29 |
카페24 ) 파비콘 만드는 방법 & 등록 방법 (0) | 2020.08.23 |
[html/css] background css 한 번에 작성하는 방법 (0) | 2020.08.21 |
카페24 ) 상세페이지 상단 하단에 공통 이미지 노출하기 (0) | 2020.08.17 |