사용자 지정 CSS 추가하기

앱의 스타일 설정을 먼저 사용하고, 설정으로 해결되지 않는 몇 가지 경우에만 테마에 CSS를 추가하세요.

대부분의 스토어에는 앱의 스타일 설정만으로 충분합니다. 특정 모서리 둥글기나 모바일에서만 적용되어야 하는 조정처럼 설정으로 해결되지 않는 경우에는 직접 CSS를 추가할 수 있습니다.

기본 제공 설정부터 시작하기

CSS로 하려는 외관 변경 대부분은 이미 Quote settings > Customize의 설정으로 제공됩니다. 코드를 작성하기 전에 다음을 먼저 확인하세요.

위치	설정할 수 있는 항목
Button & widget > Style	Button type(Filled / Outline / Text link), Size(Medium / Large / Full width), Text color, Background color, Font size.
Quote form > Style	스타일 프리셋과 Match theme styling if possible.
Quote form > Customize text	Font style.
Quote form > Customize form color	Title bar color, Title bar background, Color, Background color, Border color, Quote popup primary color.
Quote cart page > Enable Quote Cart Widget	Text color와 Background color. 플로팅 위젯에서 설정할 수 있는 항목은 이 두 가지뿐입니다.

외관 변경 대부분은 이미 설정으로 제공됩니다. 여기서 시작하세요.

사용자 지정 CSS는 어디에 두든 나중에 찾아서 되돌릴 수 있는 곳에 보관하세요. 내 테마에 CSS를 보관하면 테마와 함께 버전이 관리된다는 장점이 있으므로, 편집하기 전에 테마를 복제해 두면 되돌릴 수 있는 사본이 생깁니다.

스토어프런트에서 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택하세요. 규칙을 작성할 클래스 이름을 확인할 수 있습니다.

브라우저에서 검사할 수 있는, Add to cart 아래에 견적 버튼이 있는 스토어프런트 제품 페이지

내 스토어프런트에서 견적 버튼을 검사해 대상을 찾으세요.

시작하기 전에 알아 둘 점이 두 가지 있습니다.

견적 버튼은 설정한 Button text로 표시되며, Button position에서 선택한 위치에 나타납니다. 버튼을 찾기 전에 Product page button position을 먼저 확인하세요.
Quote (n) 라벨이 붙은 플로팅 견적 위젯은 grfq-quote-widget-container 클래스를 가진 컨테이너 안에 있습니다.

규칙	이유
한 번에 하나씩 변경하기	문제가 생겼을 때 어떤 규칙 때문인지 알 수 있습니다.
모바일에서 테스트하기	견적 요청 대부분이 휴대폰에서 들어오며, 데스크톱 전용으로 조정한 내용은 모바일에서 깨지는 경우가 많습니다.
다른 곳에도 사본 보관하기	CSS를 메모에도 붙여 넣어 두면 필요할 때 복원할 수 있습니다.
가능하면 `!important` 피하기	당장은 우선 적용되지만 이후의 모든 변경을 더 어렵게 만듭니다.
모든 규칙에 주석 달기	6개월 뒤에는 설명이 없는 CSS 블록을 아무도 삭제하지 못합니다.

새 테마에서 먼저 앱 임베드를 확인하세요. 앱 임베드는 테마에서 켜져 있어야 하며, 켜지기 전에는 앱이 하는 어떤 일도 스토어프런트에 표시되지 않습니다. 테마에서 앱 켜기를 참고하세요.

그런 다음 CSS를 확인하세요. CSS는 사용 중인 테마의 마크업을 기준으로 작성되므로, 테마를 바꾸거나 큰 테마 업데이트를 한 뒤에는 견적 버튼, 견적 양식, 플로팅 위젯을 확인하세요. 규칙을 조정해야 할 수 있습니다.

도움이 되었나요?