> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 디자인 모듈

> 이 문서에서는 Upcart 디자인 설정을 커스터마이징하는 방법을 설명해요.

디자인 모듈에서는 레이아웃, 브랜드 색상, 버튼 스타일 등 카트의 외관을 커스터마이징할 수 있어요.

<div id="general">
  # 일반
</div>

<div id="inherit-fonts-from-theme">
  ## 테마에서 폰트 상속하기
</div>

이 설정을 사용하면 Upcart가 Shopify 테마 설정에 정의된 폰트를 사용해요. 현재 폰트 선택을 확인하려면 [Shopify 테마 편집기](https://help.shopify.com/en/manual/online-store/themes/customizing-themes#access-the-theme-editor)를 열고 Typography 섹션으로 이동하세요.

<div id="cart-preview">
  ## **🚧 카트 미리보기 🚧**
</div>

테마에서 상속된 폰트는 Upcart 미리보기 창에는 나타나지 않지만, 라이브 스토어프론트에서는 올바르게 표시돼요.

<div id="show-strikethrough-prices">
  ## 취소선 가격 표시하기
</div>

이 설정을 활성화하면 카트의 각 아이템 옆에 취소선 가격([Compare At Price](https://help.shopify.com/en/manual/discounts/sales#set-a-compare-at-price-for-a-product)라고도 불려요)이 표시돼요. 제품 페이지와 마찬가지로 할인된 가격을 반영해요.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/design-cart-item-strikethrough-price.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=1139c85449399309a710241ea0239907" alt="할인 가격과 절약 금액 옆에 취소선이 그어진 원래 가격이 표시된 카트 아이템" width="567" height="213" data-path="images/upcart/design-cart-item-strikethrough-price.png" />

<div id="enable-subtotal-line">
  ## 소계 라인 활성화하기
</div>

카트에 소계 라인을 추가해요. 이 설정을 켜면 **Colors** 아래에 **Subtotal text color** 필드도 나타나서 소계를 나머지 카트 텍스트와 별도로 스타일링할 수 있어요. 설정을 끄면 해당 색상 필드가 숨겨져요.

<div id="cart-width">
  ## 카트 너비
</div>

드로어의 너비를 제어하며, 뷰포트별로 별도로 설정돼요:

* **데스크톱** - **Default** 또는 **Wide**
* **모바일** - **Full**(가장자리에서 가장자리까지) 또는 **Nearly full**(가장자리에 약간의 간격)

***

<div id="colors">
  # 색상
</div>

<div id="background-color">
  ## 배경 색상
</div>

푸터와 업셀 카드를 제외한 카트의 기본 배경 색상을 설정해요.

<div id="cart-accent-color">
  ## 카트 강조 색상
</div>

카트 푸터와 업셀 아이템 카드의 배경 색상을 제어해요.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/design-colors-settings-cart-accent.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=997641ba05508c369cd6cea9f23e7a60" alt="분홍색 업셀 카드에 카트 강조 색상이 적용된 Upcart Colors 설정" width="1307" height="589" data-path="images/upcart/design-colors-settings-cart-accent.png" />

<div id="cart-text-color">
  ## 카트 텍스트 색상
</div>

별도로 제어되는 버튼 텍스트와 절약 금액 텍스트를 제외한 모든 카트 텍스트의 색상을 정의해요.

<div id="savings-text-color">
  ## 절약 금액 텍스트 색상
</div>

제품 가격 아래에 표시되는 절약 금액 텍스트의 색상을 설정해요.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/design-cart-item-savings-amount.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=17965a9012294f1399f7d40f583828ec" alt="절약 금액 텍스트가 마젠타색으로 강조된 카트 아이템" width="572" height="220" data-path="images/upcart/design-cart-item-savings-amount.png" />

<div id="subtotal-text-color">
  ## 소계 텍스트 색상
</div>

소계 라인의 색상을 설정해요. 이 필드는 **General**에서 **Enable subtotal line**이 켜져 있을 때만 나타나요.

<div id="cart-preview-2">
  ## 🚧 **카트 미리보기** 🚧
</div>

미리보기 편집기는 최종 스타일링을 정확하게 반영하지 않을 수 있어요. 스토어 테마에 텍스트 크기나 색상에 영향을 주는 커스텀 CSS가 포함되어 있을 수 있어요. 항상 라이브 스토어프론트에서 변경 사항을 확인하세요.

***

<div id="button-settings">
  # 버튼 설정
</div>

Upcart는 체크아웃 버튼 전용 커스터마이징을 포함한 고급 버튼 스타일링 옵션을 제공해요. 여기에는 CSS 조정 방법과 Shopify 브랜딩 도구 연동이 포함돼요.

<div id="corner-radius">
  ## 모서리 반경
</div>

버튼 모서리의 둥근 정도를 **0px에서 40px**까지 조정해요. `0`은 날카로운 사각형 모서리를 만들고, `40`은 슬라이더가 제공하는 가장 둥근 값이에요. 이 값은 체크아웃 버튼, 업셀 버튼, 할인 버튼, 업그레이드 버튼에 함께 적용돼요.

<Note>
  슬라이더는 40px에서 멈춰요. 완전한 알약 모양 버튼을 만들려면 [커스텀 CSS](/ko/upcart/custom_css)가 필요해요 — 아래의 [고급 CSS 커스터마이징](#advanced-css-customization-for-checkout-buttons)을 참고하세요.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/design-corner-radius-slider-16.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=6dadda55065cefb425b9e7b4a10df34c" alt="체크아웃 버튼을 둥글게 만드는 16픽셀로 설정된 모서리 반경 슬라이더" width="1314" height="461" data-path="images/upcart/design-corner-radius-slider-16.png" />

<div id="button-color">
  ## 버튼 색상
</div>

다음을 포함한 카트의 모든 버튼 배경 색상을 설정해요:

* 체크아웃 버튼
* 업셀 "Add to Cart" 버튼
* 할인 "Apply" 버튼
* 구독 업그레이드 버튼. 이 버튼들의 색상은 Cart Editor에서 커스터마이징할 수 있어요. CSS 수정 같은 더 고급 커스터마이징은 고급 커스터마이징 섹션을 참고하세요.

<div id="button-text-color">
  ## 버튼 텍스트 색상
</div>

모든 카트 버튼에 사용되는 텍스트 색상을 지정해요.

<div id="button-text-hover-color">
  ## 버튼 텍스트 호버 색상
</div>

고객이 마우스를 올렸을 때 버튼 텍스트의 색상을 제어해요. 예를 들어 초록색으로 설정하면 호버 시 텍스트가 초록색으로 변해요.

<div id="show-continue-shopping-button">
  ## Continue Shopping 버튼 표시하기
</div>

카트에 **Continue shopping** 버튼을 추가하여, 고객이 닫기 아이콘을 사용하지 않고도 드로어를 닫고 쇼핑으로 돌아갈 수 있게 해요.

<div id="advanced-css-customization-for-checkout-buttons">
  # 체크아웃 버튼을 위한 고급 CSS 커스터마이징
</div>

큰 폭의 디자인 변경이 필요하면 Custom CSS 코드로 체크아웃 버튼을 수정할 수 있어요:

1. Cart Editor에서 **Settings**를 열고 **Custom CSS** 탭을 선택하세요.
2. `.checkout` 같은 관련 CSS 선택자를 활용하세요. CSS 스니펫 예시: 알약 모양 버튼을 만들려면:
   ```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   .checkout {    border-radius: 9999px !important;}
   ```
   검은색 테두리를 추가하려면:
   ```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   .checkout {    border: 2px solid black !important;}
   ```
   `.checkout`을 실제 버튼의 CSS 클래스로 바꾸세요. 호버 효과, 패딩, 텍스트 색상, 폰트 등 추가 스타일링도 가능해요.

<div id="integrating-shopify-branding-for-button-customization">
  # 버튼 커스터마이징을 위한 Shopify 브랜딩 연동하기
</div>

Shopify를 사용 중이라면 Shopify 관리자에서 체크아웃 버튼 디자인을 업데이트할 수 있어요:

1. Shopify 관리자에 로그인하세요.
2. `Settings > Checkout > Customize`로 이동하세요.
3. 브랜딩 옵션을 활용하여 폰트, 둥근 정도, 색상을 수정해 일관된 디자인을 만드세요.

<Frame>
  <img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/design-cart-drawer-preview.gif?s=5ccbb7ec1acafc03803d5a7842455582" alt="업셀 Add 버튼과 체크아웃 버튼이 있는 Upcart 카트 드로어 미리보기" width="1784" height="1080" data-path="images/upcart/design-cart-drawer-preview.gif" />
</Frame>