주 콘텐츠로 건너뛰기

[원터치 주문서]원터치 주문서 디자인 변경 자주 묻는 질문

콘텐츠 목차

ㆍ원터치 주문서의 스타일을 변경하고 싶어요.

ㆍ원터치 주문서의 라디오 버튼 / 체크박스 디자인을 변경하고 싶어요.

원터치 주문서의 스타일을 변경하고 싶어요.

 

CSS 스타일 변경 방법

  1. 사용자 스타일 수정이 필요한 경우 [관리자] 디자인 > 디자인 보관함 에서 스마트 디자인 편집창으로 접속 후 좌측의 화면 추가를 클릭해주세요.

  2. 쇼핑몰 화면 추가를 클릭 후 'css > 모듈(module) > 주문(order)' 폴더를 선택하시고,
    파일명에 'form_onetouch_user.css' 이름의 신규 CSS 파일을 생성하세요.

  3. 해당 파일에 수정이 필요한 정보를 입력해 주세요. 이 때, form_onetouch_user.css에서 #userStyle #mCafe24Order { }를 사용해야 스타일 적용이 가능해요.

  4. 주문서 작성(orderform.html)을 아래와 같이 세팅할 경우 form_onetouch_user.css의 입력 내용이 우선 적용되어요. 정의되지 않은 스타일의 경우 form_onetouch.css의 자동 업그레이드 스타일이 적용되어요.

    ▼ 아래와 같이 파란색 소스를 추가해 주세요.

      <!--@css(/css/module/order/form_onetouch.css)-->
      <!--@css(/css/module/order/form_onetouch_user.css)-->

     

 

Note

  • 원본 CSS 파일인 'form_onetouch.css'에 기입된 내용을 참고하여 'form_onetouch_user.css'에 원하는 값을 입력하면 더욱 쉽게 작업할 수 있어요.

  • 커스텀 파일인 form_onetouch_user.css의 경우 자동 업그레이드되지 않아요.

  • form_onetouch.css의 참조 문구를 삭제하게 되면 주문서 기능 업그레이드 시 신규 기능 관련 디자인이 정상 작동하지 않을 수 있으므로 유의해 주세요.

원터치 주문서의 라디오 버튼 / 체크박스 디자인을 변경하고 싶어요.

 

원터치 주문서에 사용되는 선택 요소

편리한 모바일 쇼핑 경험을 제공하기 위해 원터치 주문서는 일반적인 라디오 버튼과 체크 박스 디자인보다 큰 디자인을 사용하고 있어요. 이로 인해 작은 모바일 화면 내에서도 선택 및 취소 액션을 쉽게 할 수 있어요.

 

라디오 버튼 / 체크 박스 디자인 변경 방법

    1. FTP를 이용하여 변경하려는 라디오 버튼과 체크박스 디자인을 업로드 하세요.

    2. [관리자] 디자인 > 디자인 보관함 에서 스마트 디자인 편집창으로 접속 후 좌측의 화면 추가를 클릭해주세요.

    3. 쇼핑몰 화면 추가를 클릭 후 'css > 모듈(module) > 주문(order)' 폴더를 선택하시고,

      파일명에 'form_onetouch_user.css' 이름의 신규 CSS 파일을 생성하세요.
    4. ▼ 아래와 같이 파란색 소스를 추가해 주세요.

      #mCafe24Order input[type="checkbox"] {margin:0; width:24px; height:24px; border:0; cursor:pointer; background:url("체크박스(미선택 상태) 이미지 경로 및 파일명 입력") no-repeat 0 0; background-size:24px 24px; -webkit-appearance:none; }
      #mCafe24Order input[type="radio"] { margin:0; width:25px; height:25px; border:0; cursor:pointer; background:url("일반 라디오 버튼(미선택 상태) 이미지 경로 및 파일명 입력") no-repeat 0 0; background-size:25px 25px; -webkit-appearance:none; }
      #mCafe24Order .fRadio[type="radio"] { width:33px; height:33px; background-image:url("배송지 목록/결제수단에 표시될 라디오 버튼(미선택 상태) 이미지 경로 및 파일명 입력"); background-size:33px 33px; }
      #mCafe24Order input:not(:disabled):checked[type="checkbox"] { background-image:url("체크박스(선택 상태) 이미지 경로 및 파일명 입력"); -webkit-appearance:none; }
      #mCafe24Order input:not(:disabled):checked[type="radio"] { background-image:url("일반 라디오 버튼(선택 상태) 이미지 경로 및 파일명 입력"); -webkit-appearance:none; }
      #mCafe24Order .fRadio:not(:disabled):checked[type="radio"],
      #mCafe24Order .selected > .fRadio { background-image:url("배송지 목록/결제수단에 표시될 라디오 버튼(선택 상태) 이미지 경로 및 파일명 입력"); }
      #mCafe24Order input:disabled[type="checkbox"] { background-image:url("체크박스(비활성화 상태) 이미지 경로 및 파일명 입력"); -webkit-appearance:none; }

       

    5. 주문서 작성(orderform.html)를 아래와 같이 세팅할 경우 form_onetouch_user.css의 입력 내용이 우선 적용되어요. 정의되지 않은 스타일의 경우 form_onetouch.css의 자동 업그레이드 스타일이 적용되어요.

      ▼ 아래와 같이 파란색 소스를 추가해 주세요.

        <!--@css(/css/module/order/form_onetouch.css)-->
        <!--@css(/css/module/order/form_onetouch_user.css)-->

       

 

Note

  • 미선택 또는 비활성화 상태의 라디오 버튼과 체크 박스 디자인을 변경하지 않을 경우 'form_onetouch_user.css'에서 관련 선언을 제거하세요.
  • 원본 CSS 파일인 'form_onetouch.css'에 기입된 내용을 참고하여 'form_onetouch_user.css'에 원하는 값을 입력하면 더욱 쉽게 작업할 수 있어요.

  • 커스텀 파일인 form_onetouch_user.css의 경우 자동 업그레이드되지 않아요.

  • form_onetouch.css 참조 문구를 삭제하게 되면 주문서 기능 업그레이드 시 신규 기능 관련 디자인이 정상 작동하지 않을 수 있으므로 유의해 주세요.

이 페이지가 도움이 되었나요?
현재 콘텐츠