> ## 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.

# 모바일 장바구니 너비를 커스터마이징하는 방법

> 이 문서에서는 CSS를 사용해 모바일 장바구니 너비를 커스터마이징하는 방법을 안내해요.

<div id="introduction">
  # **소개**
</div>

취향에 맞게 모바일 장바구니 너비를 커스터마이징하는 이 튜토리얼에 오신 것을 환영해요! 모바일 장바구니 너비를 조정하면 작은 화면에서도 장바구니를 쉽게 보고 상호작용할 수 있어 고객의 쇼핑 경험을 크게 향상시킬 수 있어요. 이 커스터마이징을 통해 레이아웃을 제어하여 전체 스토어 디자인과 자연스럽게 어울리고 깔끔하고 정돈된 모습을 유지할 수 있어요.

이 단계들은 기본 CSS 지식이 있는 스토어 운영자나 개발자를 위해 설계되었어요. 모바일 장바구니 너비를 조정하면 사용성을 개선하고 고객의 체크아웃 과정을 더 매끄럽게 만들어 전환율과 고객 만족도를 높일 수 있어요.

지금 바로 시작해서 모바일 장바구니를 원하는 대로 보이고 작동하게 만들어 보세요!

<div id="accessing-custom-css-settings">
  ## **커스텀 CSS 설정 접근하기**
</div>

Upcart의 CSS 커스터마이징을 시작하려면 다음 단계를 따르세요:

1. 대시보드에서 **Upcart 앱**을 여세요.
2. **Cart Editor**로 이동하세요.
3. **Settings**를 열고 **Custom CSS** 탭을 선택하세요 (탭 행이 넘치는 경우 **More settings** 뒤에 있어요).

<div id="applying-custom-css">
  ## **커스텀 CSS 적용하기**
</div>

Custom CSS 섹션에 들어가면 아래 단계에 따라 모바일 장바구니 너비를 변경할 수 있어요. 숫자를 90%에서 원하는 숫자로 변경하세요. 숫자가 클수록 장바구니가 화면에서 차지하는 공간이 커져요. (참고: V1.0과 V2.0 Upcart 모두에 적용돼요)

1. CSS 입력 영역을 찾으세요.
2. 다음 코드를 복사해 CSS 입력 영역에 붙여넣으세요:

```
.upcart-cart {   
  --widthOfMobileCart: 90%;   
}   
  
/* MOBILE WIDTH STYLING*/   
@media only screen and (max-width: 600px) {              
  [class*="styles_CartPreview__right__"] {   
    right: calc(var(--widthOfMobileCart) * -1);   
  }   
  
  [class*="styles_CartPreview__right__"]  
  [class*="styles_active__"] {   
    right: var(--widthOfMobileCart);   
  }   
  
  [class*="styles_CartPreview__"] {  
    width: var(--widthOfMobileCart);   
  }  
  
  .upcart-backdrop,  
  [class*="styles_CartPreview__empty__"],   
  [class*="styles_CartPreview__card__"],   
  [class*="styles_CartPreview__upsells__"],      
  [class*="styles_CartPreview__bottomModules__"],  
  .upcart-cart-body {   
    width: 100% !important;   
  }  
}
```

<div id="conclusion">
  # **마무리**
</div>

이 튜토리얼을 따라 하면서 모바일 장바구니 너비를 성공적으로 커스터마이징하여 더 사용자 친화적이고 스토어 디자인에 맞게 만들었어요. 이러한 작은 변경이 고객의 쇼핑 경험에 큰 영향을 미쳐 모바일 기기에서 더 쉽게 둘러보고 구매할 수 있게 해줘요.

<div id="still-need-help">
  ## 여전히 도움이 필요하신가요?
</div>

커스터마이징에 도움이 필요하시면, 장바구니 드로어에 HTML, CSS, 그리고 JavaScript까지 추가하는 것에 대해 Shopify Expert와 상담하시는 것을 권장해요.

[Shopify Experts 보기](https://www.shopify.com/partners/directory)