Skip to main content
Aftersell Cart 디자인은 두 가지 수준에서 작동해요: 장바구니 전체의 스타일을 지정하는 전역 설정과, 개별 블록을 세밀하게 조정하는 블록별 재정의예요.

​
전역 디자인 설정

에디터 사이드바에서 Cart settings를 열어 장바구니의 전역 디자인에 접근하세요. 설정은 Design, Buttons, Layout으로 그룹화되어 있어요.

​
Design

​
Buttons

​
Layout

​
블록별 디자인 재정의

Custom code를 제외한 모든 블록은 설정 패널 하단에 자체 블록별 디자인 재정의가 있어요 — 모든 블록에서 Design이라는 제목이 붙지만, Express payments는 예외로 라벨이 없는 Style 및 Spacing 섹션에 재정의가 있어요. (Custom code는 설정 패널이 아예 없어요 — 블록 자체가 코드이므로 Code 탭만 표시돼요.) 이 설정은 스타일, 간격 및 기타 블록별 디자인 설정을 제어해요. 이 블록별 디자인 설정은 비어 있으면 해당 속성의 전역 설정으로 대체돼요. 또한 많은 블록의 Design 패널에는 Text 섹션이 포함되어 있어요. 이곳에서 해당 블록의 특정 텍스트 요소에 대한 타이포그래피 — 글꼴 패밀리, 크기, 줄 높이, 문자 간격 — 를 설정할 수 있어요. 텍스트 요소가 여러 개인 블록(Notes 및 Empty cart 등)에는 Text element 선택기가 표시되어 각 요소의 스타일을 독립적으로 지정할 수 있어요.
카트 에디터의 블록별 Design 설정 패널 애니메이션 미리보기

​
글꼴과 드로어 위치

  • 글꼴: 장바구니는 기본적으로 테마의 글꼴을 상속해요. 각 블록의 Design 설정에 있는 Text 섹션에서 선택 텍스트 요소(상품 제목, 업셀 헤딩 등)에 커스텀 폰트 패밀리를 지정할 수 있어요 — 자세한 내용은 Cart items 블록과 Upsells 블록을 참고하세요.
  • 드로어 위치: 드로어의 너비는 조정할 수 있어요(위의 Desktop width). 좌/우 위치 설정은 없어요.

​
동작 설정

스타일링 외에도 Cart settings에는 동작 옵션이 있어요 — 장바구니 추가 시 드로어 열기, 스토어프론트를 동기화하는 테마 선택자예요. 장바구니 설정을 참고하세요.

​
커스텀 CSS를 대신 사용해야 할 때

기본 제공 설정은 일반적인 경우를 다뤄요. 그 이상의 것 — 특정 요소 타겟팅, 커스텀 간격, 반응형 조정 — 에는 커스텀 CSS를 사용하세요.