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

유용한 웹 팁

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

게시판 상세
제목 메인화면에 상품진열 추가하는 방법
작성자 별모아디자인 (ip:)
  • 평점 0점  
  • 작성일 2019-12-30
  • 추천 추천하기
  • 조회수 164



< 메인화면에 상품진열 추가하기 >



상품관리 > 상품관리 > 메인 상품 진열관리에서
메인분류 관리 버튼을 클릭한 후 창이 뜨면
추가 버튼을 클릭하면 상품진열이 추가됩니다.

상품진열 추가 후 원하시는 이름으로 변경해주세요.



한 번 추가한 상품진열은 차후 필요없으시면 상품진열을 삭제하지마시고
해당 진열에 상품을 진열하지않으시면

메인화면에서 자동으로 진열이 노출이 안됩니다. (주간 베스트 제외)

(x버튼을 클릭하여 상품진열을 삭제하는 것은 자제해주세요.)


위의 방법대로 모두 설정했는데도 메인화면에 상품진열이 추가되어있지않으면

해당 진열에 상품을 진열해주시기 바랍니다.


(상품진열에 상품을 진열해도 메인화면에 해당 진열이 노출되지않는다면

스마트디자인 편집창에서 상품진열 소스를 추가해주어야 합니다.

이 부분은 디자이너에게 byulmoa@hanmail.net 으로 문의해주세요.)



상품진열 추가 하신 후 아래 설명대로 해주세요.




< 상품진열 항목 표시함,표시안함 설정하기 >



상품관리 > 상품표시관리 > 상품정보표시 설정에서

상단의 메인화면 탭이 선택된 상태에서

상세분류 선택 에서 추가하신 상품진열 이름 선택하신 후

30여개의 항목들을 표시함, 표시안함 설정을 해주세요.


기본적으로 상품명,소비자가,판매가,상품간략설명,상품요약설명,적립금 은 표시함으로 설정하시고

나머지 항목들은 표시안함 으로 설정해주세요. 더 필요하신 항목은 표시함으로 설정해주세요.


소비자가와 판매가는 텍스트 크기를 14px 로 설정해주시고

판매가 텍스트 컬러는 원하시는 색상코드를 입력하여 수정해주세요.




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


아래는 참고사항입니다.




< 추가한 상품진열의 타이틀을 이미지로 업로드 하기 >



위의 방법으로 상품진열을 추가하면

상품진열 타이틀이 텍스트로 자동으로 메인화면에 노출되므로

별도의 이미지 작업이 필요없습니다.


만약 상품진열 타이틀을 텍스트가 아닌 이미지로 업로드 하고싶을 경우

상품관리 > 상품관리 > 메인 상품 진열관리에서
메인분류 관리 버튼을 클릭한 후 창이 뜨면 원하시는 상품진열 이름 선택 후 오른쪽의 타이틀 디자인 항목에서

텍스트 사용으로 선택되어있는 것을 이미지 사용으로 선택하신 후 그 아래 등록 버튼을 클릭하여

타이틀 이미지를 업로드 해주시면 됩니다.



모바일에서 확인해보면 타이틀 이미지 크기가 너무 작게 보여집니다.

pc와 모바일은 화면 크기가 다르기때문에

pc화면에 최적화된 이미지를 모바일에서 연동하여 사용할 경우 크기가

너무 작게 보이게 됩니다.

모바일에서 타이틀 이미지 크기를 좀 더 크게 보여지게 하려면

모바일 쇼핑몰 > 디자인관리 > 디자인 보관함에서 수정 버튼을 클릭하여

모바일 디자인의 스마트디자인 편집창에서 하단 왼쪽의 화면명 검색에서

ec-base-product.css 를 검색하여 체크 후 선택파일 열기를 하신 후

소스 창에서 가장 윗 부분에

아래 소스를 복사한 후 붙여넣어주시고 편집창 상단 왼쪽의 저장 버튼을 클릭해주세요.


/* 메인화면 타이틀 이미지 */
.title h2 img { display:inline-block; min-width:250%; margin-left:-74%;}


/* 메인화면 상품진열 타이틀  */
.ec-base-product h2 {  text-align:center; }


/* 메인화면 상품진열 타이틀 상단 라인 */
.main_item_title hr { width:20px; border:1px solid #555555; }



위의 소스에서 74라는 숫자는 타이틀 이미지의 가운데 정렬을 조정하는 부분입니다.

화면을 봐가면서 숫자를 수정해주시면 됩니다.

250은 이미지의 크기를 나타냅니다.

역시 모바일에서 메인화면을 확인해가면서 원하시는 숫자로 수정해주세요.




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


위의 방법으로 타이틀 이미지를 업로드했을 때

모바일에서는 타이틀 이미지가 화질이 흐릿하게 보일 수 있습니다.

pc와 모바일은 화면 크기가 다르기 때문에

하나의 이미지로 연동시키는 것 보다는 각각 별개로 작업해주시는 것이 좋습니다.

모바일 디자인의 상품진열 타이틀 이미지는 별도로 만들어서 업로드 해주시면 됩니다.

아래 방법대로 해주세요.



< 모바일 디자인의 상품진열 타이틀 이미지를 이미지로 수정하기 >



- 이미지 작업하기 : 별모아에서 보내드린 파일들 중 모바일 폴더 > PSD 폴더 > 로고_배너 폴더에서

new_product_title 파일을 포토샵에서 열어 이미지 크기와 텍스트 크기 참고바랍니다.

이미지 확장자는 png 파일로 저장해주세요.


- 이미지 업로드 하기 : 관리자페이지 최상단 오른쪽의 FTP 접속 후

/web/upload/b_mobile53/images/ 의 경로에 이미지를 업로드 해주세요.

(빨간색 숫자는 구매하신 별모아 디자인 넘버입니다. 위의 53은 예시입니다.

디자인 보관함에 디자인명에 구매하신 디자인 넘버가 있습니다.)



- 소스 수정하기 :  모바일쇼핑몰 > 디자인관리 > 디자인보관함에서 수정 버튼 클릭하시면

스마트디자인 편집창이 뜹니다.

스마트 디자인 편집창에서 쇼핑몰 메인(index.html)의 소스창에서

추가하신 카테고리 소스들을 보면 아래와 같은 소스가 있습니다.

아래 소스가 상품진열 타이틀 소스입니다.


<div class="title">
        <h2>
            <span style="display: {$category_title_text_display};"><span class="main_item_title"><img src="/web/upload/byulmoa53/images/main_item_icon.gif"></span> {$category_title_text}</span>
            <span style="display: {$category_title_img_display};"><img src="{$category_title_img}" alt="{$category_title_text}" /></span>
        </h2>
      </div><br><br>



위 소스를 삭제하시고 그 자리에 아래 소스를 붙여넣어주세요.

아래 소스에서 빨간 부분은 이미지 파일명과 확장자입니다.

업로드하신 이미지에 맞게 수정해주세요.

(빨간색 숫자는 구매하신 별모아 디자인 넘버입니다. 53은 예시입니다.

구매하신 디자인 넘버에 맞게 빨간색 숫자를 수정해주시면 됩니다.)


  <h2 class="new_title"><img src="/web/upload/b_mobile53/images/이미지 파일명.png" alt="" border="0"></h2>


수정하신 후 스마트디자인 편집창 상단 왼쪽의 '저장'버튼을 반드시 클릭해주세요.





Tip) 스마트디자인 편집창에서 원하시는 상품진열 소스를 찾는 방법입니다.

상품관리 > 상품관리 > 메인 상품 진열관리 에서 메인분류 관리 버튼을 클릭한 후

창이 뜨면 왼쪽의 진열이름을 선택하면 오른쪽에 모듈코드가 보입니다.
예를들어 모듈코드에 product_listmain_3 으로 나와있다면

스마트디자인 편집창의 메인화면 상품진열 소스에서

module="product_listmain_3" 이라고 되어있는 진열이

해당 진열의 소스입니다.












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

비밀번호 :

/ byte

비밀번호 : 확인 취소

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

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

/ byte

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

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