카페24 ) 상세페이지 상단 하단에 공통 이미지 노출하기

 

 

 

모든 상품 상세페이지의 상단 또는 하단에 공통적으로

배송, 쇼핑몰 이용 관련 안내 이미지나 중요한 공지 이미지를 노출하는 방법입니다.

 

 

 

 

 

 

 

#1 FTP 에 이미지 업로드

 1  먼저 이미지를 준비한 후 FTP에 업로드합니다.

저는 web 폴더 내 upload 폴더에 test 라는 폴더를 만든 후 test 폴더에 detailImg.jpg 라는 이미지 파일을 업로드했습니다.

이제 스킨 소스창에 접속하여 이 이미지가 노출될 수 있도록 이미지 태그를 작성해보겠습니다.

 

 

 

 

 

 

 

#2 이미지 태그 작성하기

기본 이미지 태그는 아래와 같이 작성됩니다.

<img src="경로/파일명" alt="이미지 설명" title="부가 설명">

 

앞서 /web/upload/ 폴더에 test 폴더를 만든 후 test 폴더에 이미지를 업로드했으니 경로는 /web/upload/test 가 되고,

이미지 파일명(확장자 포함)은 detailImg.jpg 가 됩니다.

alt와 title은 사이트 이용자가 식별할 수 있도록 관련 정보를 작성해줍니다.

따라서 이미지 태그는 아래와 같이 작성할 수 있습니다.

<img src="/web/upload/test/detailImg.jpg" alt="배송공지" title="오후2시 이전 주문시 당일발송 됩니다"> 

 

 

 

 

 

 

 

#3 상세페이지 소스파일에서 상세설명 모듈 찾기

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

이미지 태그를 넣기 위해 상품 상세페이지 소스 파일을 열어줍니다.

 

 2  상품 상세페이지 소스파일은 소스 수정창에서 좌측 검색 product/detail.html 로 검색하거나

 

 

 

 

 3  좌측 '자주쓰는화면' 목록 중 상품상세를 클릭하여 열 수 있습니다.

 

 

 

 

 4  상세페이지 소스 파일을 열었으면 여기에서 {$product_detail} 라는 모듈을 찾아야 합니다.

이 모듈이 바로 관리자페이지에서 상품 등록 시 상품 상세설명에 작성하는 내용과 연동되는 모듈입니다.

이 모듈 위 또는 아래에 앞서 만들었던 이미지 태그를 작성해주면 모든 상세페이지에서 공통적으로 노출되게 됩니다.

 

ctrl+F 를 클릭하여 {$product_detail} 모듈을 검색하면 해당 모듈을 쉽게 찾을 수 있습니다.

소스파일에 내용이 길면 한번에 찾아지지 않는 경우가 많으니 스크롤을 내려가면서 여러 번 검색해줍니다

기본 스마트디자인 기준으로 558번째 줄에 있는 것을 확인하였습니다.

 

 

 

 

 

 

 

#4 상세설명 모듈 위 또는 아래에 이미지 태그 넣기

저는 상품 상세설명에 작성한 내용이 모두 끝난 뒤에 노출될 수 있도록 {$product_detail} 상세설명 모듈 밑에 아래와 같이 이미지 태그를 작성하겠습니다.

인라인 요소보다는 블럭 요소로 감싸지는 것이 안정적이기 때문에 div 나 p 태그로 감싸주는 것도 좋습니다.

그래서 저는 p 태그로 감싸준 다음, 모듈 아래에 위 태그를 작성해주었습니다.

<p><img src="/web/upload/test/detailImg.jpg" alt="배송공지" title="오후2시 이전 주문시 당일발송 됩니다"></p>

 

 

 

 

모든 상품의 상세페이지 내 상세설명 하단에 고정 이미지가 노출되고 있습니다.

적용된 이미지를 확인해보니 상품 상세설명과 고정 이미지 사이에 여백이 필요해 보입니다.

이 부분을 추가로 적용해보겠습니다.

 

 

 

 

 

 

 

#5 스타일(css) 더해주기

아래와 같이 태그에 style 을 바로 적용할 수도 있지만

<p style="스타일작성"><img src="/web/upload/test/detailImg.jpg" alt="배송공지" title="오후2시 이전 주문시 당일발송 됩니다"></p>

추후 다른 공통 이미지를 추가로 적용하였을 때에도 함께 스타일을 적용할 수 있도록

p 태그에 클래스를 주어 css 파일에서 스타일을 적용해보겠습니다.

 

 

 

 5  저는 p 태그에 detailFixImg 라는 클래스를 주었습니다.

 

 

 

그런 다음 상세설명 모듈 위쪽 즈음에 노출되는 additional.css 파일에 아래와 같이 스타일을 작성하겠습니다

.detailFixedImg img { width:100%; height:auto; padding:20px 0; }

원하는 표현방식에 따라 border를 추가하거나 앞서 작성했던 img 태그에 a 태그를 감싸서 링크를 연결할 수도 있습니다.

 

 

 

 

 

 

 

#6 확인하기

 

이제 상세설명 고정 이미지 사이에 여백이 생긴 것을 볼 수 있습니다.

이상 상세페이지에 공통 고정 이미지를 노출하는 방법을 알아보았습니다.