Skip to main content

​
개요

이 섹션에서는 기존 카트 요소의 모양과 느낌을 변경하거나 편집기를 통해 추가한 커스텀 HTML에 스타일을 적용할 수 있어요.

​
위치 안내

다음 경로로 이동하세요:
Upcart > Cart Editor > Settings > Custom CSS
Settings는 탭이 나열된 행이며, Custom CSS는 Custom HTML과 함께 그중 하나예요. 보이지 않는다면 More settings 뒤에 숨어 있어요.

​
작동 방식

다음과 같은 용도로 CSS를 추가할 수 있어요:
  • 기본 카트 요소에 스타일 지정
  • 커스텀 HTML의 모양 수정
  • 간격, 정렬, 타이포그래피 등 조정
입력하는 동안 자동 완성 팝업이 유효한 Upcart 선택자를 제안하여 편집 속도를 높여줘요. 제안을 선택하면 규칙이 자동 완성되고 코드 구조를 잡는 데 도움이 돼요. 변경 사항이 예상대로 나타나지 않으면 브라우저와 Upcart 편집기 양쪽의 캐시 새로 고침, CSS 배치 확인, CSS 규칙의 적절한 특이성 확보 등 일반적인 문제 해결 방법을 확인해 보세요.

​
선택자 사용하기

Upcart는 다양한 커스텀 선택자를 제공해요. **“Show list”**를 클릭하면 사용 가능한 모든 옵션을 볼 수 있어요. 스토어프론트에 의도치 않은 변경이 생기지 않도록 .upcart-cart로 범위를 지정하지 않은 body, div, h3 같은 전역 선택자는 사용을 피하세요. 스타일이 올바르게 적용되지 않는 경우에는 CSS 특이성을 높이거나 CSS 규칙에 !important를 추가하는 것을 고려하세요. 이렇게 하면 충돌하는 스타일을 확실히 재정의할 수 있어요. 예시:
예시 (안전한 선택자):

​
예시: 감사 메시지 스타일링

체크아웃 버튼 아래에 다음 커스텀 HTML을 추가했다고 가정해 볼게요:
CSS가 없으면 메시지가 밋밋하게 보여요. 스타일을 지정하려면:

​
자주 발생하는 문제와 해결 방법

​
모바일 기기에서 CSS가 나타나지 않는 경우

커스텀 텍스트나 스타일이 모바일에서 보이지 않는다면:
  • Upcart Editor와 모바일 브라우저 양쪽에서 페이지를 새로 고침하여 캐시된 버전을 지우세요.
  • 최신 게시된 카트 버전이 활성화되어 있는지 확인하세요.
  • CSS가 Upcart > Cart Editor > Settings의 Custom CSS 탭에 저장되어 있는지 확인하세요.

​
편집기와 라이브 스토어 간 차이

편집기에서는 스타일이 올바르게 표시되지만 라이브 사이트에서는 그렇지 않다면, 선택자 특이성을 높이거나 핵심 규칙에 !important를 추가해야 할 수 있어요.

​
잘못된 CSS 선택자 사용

올바른 클래스나 ID를 대상으로 지정했는지 확인하세요. 의도치 않은 결과를 피하려면 Upcart 전용 요소에는 항상 .upcart- 같은 접두사를 포함하세요. 스타일이 예상대로 적용되지 않으면 .thank-you-message 선택자가 의도한 HTML 요소를 정확히 대상으로 하는지 확인하고, CSS 코드가 올바른 탭(Upcart > Cart Editor > Settings > Custom CSS)에 배치되어 있는지 점검하세요.
커스터마이징 관련 지원: Upcart 지원팀은 커스텀 CSS의 구현이나 디버깅을 도와드릴 수 없어요. 고급 스타일링 지원이 필요하면 Shopify Expert와 협업하는 것을 권장해요. 커스텀 CSS 문제 해결은 모바일 기기에서 스타일이 누락되는 문제, 편집기 미리보기와 라이브 스토어프론트 간 차이, 선택자 배치 오류 등의 해결 방법이 안내된 자주 발생하는 문제 섹션을 참고하세요.