사용팁
엑스슬라이더 목록페이지에 적용하기!
524 views
0 likes
2023-11-27
안녕하세요~
내 취향대로 스타일링하는 신개념 상품진열 템플릿 DP 엑스슬라이더입니다!
누구나 따라할 수 있는 엑스슬라이더 템플릿 사용 설명서!
엑스슬라이더를 이용하여 선택한 템플릿을 목록페이지에 노출하는 방법을 자세히 알려드릴게요~
엑스슬라이더 접속하시면 위의 사진과 같이 템플릿 샘플들을 볼 수 있어요!
1️⃣ 마음에 드는 템플릿을 선택한 후 제작하기 버튼을 클릭해주세요.
예시로 아래의 [수능끝!세일시작!] 이라는 템플릿을 선택하여 진행해 보겠습니다.
2️⃣ 슬라이더 제작페이지에서 먼저 멀티샵을 선택합니다.
현재 쇼핑몰 아이디로 로그인이 되어있기 때문에 쇼핑몰 내부의 멀티샵이 노출됩니다.
3️⃣ 다음은 메인페이지 & 목록페이지 중 노출할 페이지를 선택합니다.
목록페이지 설정에 대한 가이드이므로 목록페이지를 클릭해 주세요!
상품 등록 페이지에서 추천상품 카테고리를 자동으로 설정해 줍니다.
(메인진열처럼 따로 진열부분을 선택하지 않아도 된다는 장점이 있습니다😉)
많이 보셨을 상품 등록 페이지이죠?
상품등록 페이지의 상품분류에서 추천상품영역으로 체크 한 제품들이 노출됩니다!
여기서도 복사 붙여넣기 과정이 있습니다!
상품등록 페이지의 상품분류에서 추천상품영역으로 체크 한 제품들이 노출됩니다!
여기서도 복사 붙여넣기 과정이 있습니다!
복사 붙여넣기 설명은 하단에서 따로 해드리겠습니다~
4️⃣ 상품간단설명 타입을 선택합니다.
상품 설명 타입은 쇼핑몰마다 다른 경우가 많기때문에
요약설명과 간략설명 중 선택할 수 있도록 나뉘어져 있습니다.
내 쇼핑몰의 상품설명 타입 확인은 아래의 사진을 참고해주세요~
쇼핑몰을 운영하고 계시는 분이시라면 굉장히 익숙한 기본정보 화면입니다.
상품설명으로 사용있는 부분이 어떤 부분인지 확인하신 후 요약설명 or 간략설명 을 선택해주세요.
5️⃣ 상품 아이콘 타입을 선택합니다.
장바구니, 좋아요, 관심상품 등 해당 자사몰에서 사용하고 있는 아이콘을 템플릿에서도 그대로 사용하시고 싶다면 자사몰내의 아이콘 을
템플릿에 적용된 아이콘을 사용하고 싶다면 현재 슬라이더의 아이콘 을 선택해 주세요.
(템플릿에 최적화 되어있는 현재 슬라이더의 아이콘을 추천드립니다💙)
6️⃣ 상품 내용을 제외한 텍스트 내용 입력을 작성합니다.
템플릿에 따라 텍스트 위치와 입력창 개수만 달라질 뿐, 작성 방법은 동일합니다.
사진과 같이 번호 ①, ② 를 이용하여 텍스트 위치와 입력내용을 확인할 수 있습니다.
필요에 따라 자유롭게 작성해 주세요.
Tip. 내용 입력 부분을 응용하여 다양한 이벤트에 활용할 수 있습니다!
예를 들어 [수능끝!청춘시작!]은 수능 이벤트 템플릿이지만
입력 문구에 따라 입학, 졸업, 방학 관련 이벤트 상품진열 배너로로 사용이 가능합니다.
(기본으로 입력되어 있는 문구는 가이드 이므로, 반드시 텍스트를 새로 입력해 주세요!)
저장이 완료되면 마이페이지로 이동합니다.
엑스슬라이더 다운로드가 처음이라면, 필수 코스가 남아있습니다!
7️⃣ 마이페이지에서 붉은색 버튼 스크립트 파일설치 버튼을 꼭 눌러주세요!!!!
설치, 재설치 시에 한번만 진행해 주시면 됩니다!
쇼핑몰에 스크립트 파일이 설치가 완료되면 "스크립트파일이 설치되었습니다" 라는 문구가 표시됩니다.
여기까지 진행 하셨다면 템플릿 제작하기는 완료되었습니다!
제작한 템플릿은 마이페이지에서 확인 및 수정 가능합니다.
템플릿을 여러개 만드는 경우, 제작 순서대로 배치됩니다.
이제 코드복사 후 붙여넣기만 남았네요~😊
🔎 여기서 잠깐!
코드 복사 붙여넣기까지 완료된 템플릿에서 텍스트 내용 수정 같은 경우는
다시 코드를 복사하지 않아도 반영이 되지만
멀티샵, 메인페이지 & 목록페이지 , 메인진열타입 부분이 수정되었다면
코드 복사 및 붙여넣기를 반드시 다시 진행해 주셔야 합니다!
다시 코드를 복사하지 않아도 반영이 되지만
멀티샵, 메인페이지 & 목록페이지 , 메인진열타입 부분이 수정되었다면
코드 복사 및 붙여넣기를 반드시 다시 진행해 주셔야 합니다!
8️⃣ 코드복사 버튼을 클릭하여 코드를 복사합니다.
코드복사 버튼만 클릭하시면 위의 사진과 같이 코드가 자동으로 추출되어 복사됩니다.
9️⃣ 복사된 코드를 붙여넣기 합니다.
HTML 코드를 아~주 조금은 안다 → ⑴번 글을 읽어주세요.
HTML 코드를 1도 모른다! → ⑵번 글을 읽어주세요.
⑴ 코드 위치 정도는 찾을수 있는분들은 카페24의 디자인편집 메뉴로 접속합니다.
상품 분류페이지(list.html) 파일에서
원하는 위치 (가능한 상단에 위치하는것이 좋습니다)에 복사 붙여넣기를 진행해 주시면 완료입니다!
위치를 찾으셨다면 다른 코드 입력할 필요없이 붙여넣기만 진행해주세요!
이렇게 간단하게 엑스슬라이더로 메인화면 적용하기가 완료되었습니다👏
Tip. 상품진열 부분은 HTML, CSS 로 제작하기에 난이도가 조금 높습니다.
그래서 HTML코드를 조금 알아도 상품진열 부분에 활용하기는 어렵죠.
하지만 지금처럼 엑스슬라이더를 사용하시면 해당 부분에 복사 붙여넣기 만으로 상품 DP 완성~😀
다만, 쇼핑몰 스킨중에서 목록에 추천상품 영역부분이 이미 세팅이 되어있는 경우 추천상품 부분이 이중으로 보일수 있습니다.
그렇다면 해당 list 목록 페이지에서 해당 모듈이 작성되어있는 코드부분을 찾아서 그 부분을 삭제 및 주석처리를 해주시면 됩니다.
해당 모듈 module="product_listrecommend"
2) 붙여넣기 할 위치를 찾을수 없는, 도움이 필요한 분들은 디자인 유지보수 채널로 오세요.
엑스슬라이더의 디자인 유지보수 채널에 신청하시면 해당 위치에 직접 붙여넣기 해드립니다!!!
해당 링크에서 신청하시면
1회 5천원으로
PC, MOB 포함하여 총 8개! 까지 붙여넣기를 진행해 드립니다.
템플릿 제작 완료 후, 붙여넣고 싶은 위치와 해당 템플릿 번호를 알려주시면 직접 붙여넣기 해드리며
1회성으로 끝나지 않고, 이후에 혼자서도 충분히 수정 가능하도록 세팅 해드립니다!
Tip. 디자인유지보수 채널 이용 후 혼자서 세팅하는 방법
코드복사 완료 후
관리자페이지 -> 디자인 -> 디자인보관함 -> PC/ MOB -> (최상단에 위치한) 대표디자인 -> 편집 버튼 클릭
자주쓰는 화면 -> 엑스슬라이더_섹션1 클릭 (섹션 장면별로 1,2,3,4 형식으로 해당 부분이 생성되어있습니다.)
해당파일의 내용 전체를 삭제한 후 복사된 코드를 그대로 붙여넣기 후 저장합니다!
이와 같은 방법으로 템플릿 교체 및 수정 모두 가능합니다🆗
엑스슬라이더는 항상 고객님들이 템플릿을 이용하여 상품 DP를
🔹 쉽게
🔹 다양하게
이용하실수 있도록 최선을 다하겠습니다!!!
-
Link copied
엑스펙트
