현재 위치
  1. 게시판
  2. 유용한 웹 팁

유용한 웹 팁

쇼핑몰 운영에 도움이 되는 정보들입니다.

게시판 상세
제목 스마트 배너 관리 앱 사용하기 (모바일 디자인)
작성자 별모아디자인 (ip:)



스마트 배너 관리 앱 사용하는 방법 >


 

현재 고객님 쇼핑몰 모바일 디자인의 메인화면에서 메인 이미지들이 슬라이드 되고있는데, 

이는 카페24에서 제공하는 포토 슬라이드 v2 라는 앱을 이용하여 노출중입니다.

 

하지만 포토 슬라이드 v2 앱 서비스를 카페24에서 곧 종료시키게되어, 

2021년 9월 30일까지만 포토 슬라이드 v2앱을 사용 가능합니다.

 

그러므로 2021년 9월 30일 이전에 미리 포토 슬라이드v2 앱 사용을 중단하시고, 

카페24 기본 앱인 스마트 배너 관리 앱을 사용하여 메인 이미지 슬라이드를 메인화면에 

노출시켜주시기 바랍니다. 


9월30일 이후에는 이미지 복구 및 백업이 불가능므로

아래 설명을 보시고 미리 수정을 해주셔야 합니다.

 


일단 메인 이미지들을 준비해주세요.

기존에 포토 슬라이드 V2 앱에서 사용하시던 이미지들을 그대로 사용하셔도 됩니다.

디자인 관리 > 앱스토어 > 포토슬라이드 V2 앱 관리하기 > 모바일쇼핑몰 탭 > 슬라이드명 을 클릭하면

메인 이미지들이 작은 섬네일 이미지들로 보여지는데 

해당 섬네일 이미지들에 각각 마우스를 대고 마우스 우측 버튼을 클릭하여 다른 이름으로 그림 저장하셔서

컴퓨터에 저장해주세요. 이 이미지들을 아래 설명 보시면서 스마트 배너 관리 앱에 업로드 하셔야 합니다.



아래부터는 스마트 배너 관리 앱에 메인 이미지를 업로드하는 방법입니다.




1. 디자인관리 > 앱스토어 에서 스마트 배너 관리 앱의 관리하기 버튼을 클릭해주세요. 


 

 


 

 


 

2. 상단에 모바일 탭과 PC 탭이 있는데 모바일 탭이 선택된 상태에서 배너 영역 추가하기 라는 글자 위의 

버튼을 클릭해주세요. 


 

  

 

 



 

3. 스마트 배너 관리 앱 설정 화면이 나옵니다.

 

1) 영역명 : 본인이 원하는 제목을 넣어주시면 됩니다. 

2) 배너 크기 : 업로드하실 이미지 크기를 정확하게 입력해주세요. 

                  이미지 크기와 1px이라도 차이가 날 경우 화면상에서 화질이 흐릿해보이므로 정확하게 입력해주셔야 합니다.

3) 활성여부 : ‘활성’ 으로 설정해주셔야 이미지가 화면에 노출됩니다.

4) 슬라이드 사용 여부 : 이미지를 2장 이상 사용하실 경우에는 ‘사용’으로 설정하셔서 

 슬라이드 효과를 사용 가능합니다. 이미지를 한 장만 노출시킬 경우는 슬라이드 효과를 사용안함으로 설정해주시면 됩니다.

 

위의 설정들을 완료 후 저장 버튼을 클릭해주세요. 

 



 

4. 그리고 화면 아래 배너 등록 버튼을 클릭해주세요. 

 


 

 

 

 

5. 이미지 등록 > 찾아보기 버튼을 클릭하여 이미지를 업로드 해주시면 됩니다.

바로 아래 링크 URL 항목에서 이미지 클릭시 연결될 페이지 주소를 넣어주시고 

(쇼핑몰의 모든 페이지는 주소창에 각 페이지 고유의 주소가 있습니다. 복사하여 붙여넣어주시면 됩니다.)

그 아래 링크 방식은 쇼핑몰 내의 페이지로 링크를 할 경우 현재창에서 이동으로 선택해주시기 바랍니다. 

만약 타사이트로 링크시키려면 새 창 열기를 선택해주세요.

 

모두 설정 후 ‘저장’ 버튼을 클릭해주세요.

 

나머지 다른 이미지들도 배너등록 버튼을 클릭하셔서 동일한 방법으로 업로드 해주시면 됩니다.


 

 

 

 

 

 


 

6. 이미지 슬라이드 순서를 변경하시려면 순서변경을 클릭하셔서 원하시는 롤링 순서로 변경 가능합니다. 

 


 



7. 스마트 배너 관리 앱에서 모든 설정을 완료 후, 상단의 생성 코드 바로 옆에 소스 복사 버튼이 있습니다. 

해당 버튼을 반드시 클릭하여 소스를 복사해주세요.

 




 

디자인 관리 > 앱스토어 메뉴에서의 작업은 모두 완료되었고, 

아래부터는 스마트 디자인 편집창에서 소스를 수정해야합니다. 

소스를 수정하지않으면 메인화면에서 스마트 배너 관리 앱을 사용할 수 없습니다.

소스복사 버튼을 클릭하여 소스가 복사된 상태에서 아래 설명 보시면서 순서대로 따라해주시기 바랍니다.

 


 

 

8. 모바일쇼핑몰 > 디자인보관함 에서 대표 디자인의 수정 버튼을 클릭하시면 

   모바일 디자인의 스마트디자인 편집창이 뜨며 첫 화면에 쇼핑몰 메인화면(index.html) 이 보여집니다. 

 

메인화면의 HTML 소스들이 보이는데 소스 상단에 아래와 같은 소스가 있습니다. 디자인마다 소스가 조금씩 차이가 있을 수 있습니다. 
아래 빨강색 소스를 삭제해주시기 바랍니다. 

 

 

<!-- ★ 메인 이미지 슬라이드 ★  -->

<div module="photoslide2_mdisplay_1">

 {$slide_images}

</div>

<!-- ★ 메인 이미지 슬라이드 ★ // -->

 

 

 

 

빨강색 소스를 삭제하고, 삭제한 자리에 스마트 배너 관리 앱에서 복사해두었던 소스를 붙여넣어주세요.

<!--@import(/smart-banner/shop1/smart-banner-admin-MO00001.html)--> 

 




소스 수정이 완료되면, 편집창 상단 좌측의 ‘저장’ 버튼을 반드시 클릭해주세요.



 

 



작업을 모두 완료하신 후, 스마트폰으로 쇼핑몰에 접속하셔서 

모바일 디자인의 메인 이미지가 정상적으로 노출되는지 확인 바랍니다.

 


끝.


 

--------------------------------------------------------------------------------------------------------------------------------------------



(중요사항) 차후에 모바일 디자인의 메인 이미지들을 변경하고싶으실 경우 

소스 수정은 하실 필요없이 디자인관리 > 앱스토어 > 스마트 배너 관리 앱의 관리하기 버튼 클릭 후

이미 생성해놓으신 배너 영역을 클릭하셔서 배너 수정 버튼을 클릭하여 간단하게 이미지 변경해주시면 됩니다.







스마트 배너 관리에 관한 문의는 관리자 페이지 최상단 우측의 1:1 문의에 문의하셔도 카페24에서 답변 드립니다.


첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
댓글 수정

비밀번호 :

/ byte

비밀번호 : 확인 취소

댓글 입력
댓글달기 이름 : 비밀번호 : 관리자답변보기

영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자

/ byte

왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)

관리자에게만 댓글 작성 권한이 있습니다.