> ## 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 커스터마이징 시작하기

> HTML, CSS, JavaScript를 사용하여 카트 드로어에 커스텀 기능과 스타일링을 구축하는 방법을 알아보세요.

⚠️ **중요 안내**

이 문서의 예시 커스터마이징은 Upcart 카트 모듈 V1.0에서만 작동해요. 최근에 카트를 Version 2로 업그레이드했다면 이 커스터마이징 코드는 작동하지 않아요. [마이그레이션 가이드](/ko/upcart/upcart_v20_migration_guide)에서 제공하는 Version 2용 새 선택자를 사용해야 해요.

V2.0 솔루션은 다른 커스터마이징 문서를 참고하세요.

<div id="overview">
  # 개요
</div>

Upcart는 **커스텀 HTML**, **커스텀 CSS**, **JavaScript**를 사용하여 카트의 외관과 동작을 수정할 수 있는 완전한 제어권을 제공해요. 이 도구들을 사용하면 새 기능을 추가하고, 브랜드에 맞게 카트를 스타일링하고, 카트 작동 방식을 개선하는 로직을 도입할 수 있어요.

이 가이드는 각각의 기본을 다루고 시작하는 방법을 보여줘요. 각 섹션에는 변경 사항이 실제로 어떻게 보이는지 이해하는 데 도움이 되는 간단한 시각적 예시가 포함되어 있어요.

***

시작하기 전에 팀에서 지원하는 것과 지원하지 않는 것을 알 수 있도록 [Upcart 커스터마이징 정책](/ko/upcart/upcart_customization_policy)을 꼭 검토하세요.

<div id="add-content-with-html">
  ## HTML로 콘텐츠 추가하기
</div>

HTML은 텍스트, 배너, 버튼 같은 정적 콘텐츠를 카트에 추가하는 데 사용돼요. **Custom HTML** 편집기에서 여러 HTML 위치(예: 체크아웃 버튼 위, 카트 하단, 아이템 사이) 중에서 선택할 수 있어요.

일반적인 사용 사례:

* 커스텀 메시지 추가
* 법적 고지 사항이나 정책 링크 삽입
* 배송 마감일이나 배송 정보 강조

**예시:**

```
<div style="text-align: center; font-weight: bold;">  
  Thanks for shopping with us!  
</div
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-thank-you-message.gif?s=a22b53d145994e29c3e327b272e1ce33" alt="체크아웃 버튼 위에 감사 메시지를 추가하는 Upcart Custom HTML 편집기" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-thank-you-message.gif" />

***

<div id="add-logic-with-javascript">
  ## JavaScript로 로직 추가하기
</div>

JavaScript는 카트 동작과 로직을 제어해요. 요소를 표시하거나 숨기고, 조건부로 스타일링을 적용하거나, 카트 변경에 실시간으로 반응하는 데 사용할 수 있어요.

코드를 `<script>` 태그로 감싸고 실행 시점에 따라 **Custom HTML > Scripts (Before Load)** 또는 **Above Announcements**에 배치하세요.

**예시: [카트를 한 번에 하나의 업셀로 제한하기](/ko/upcart/limit_the_cart_to_one_upsell_at_a_time):**

```
<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>
```

<Note>
  **레거시 참고:** `window.upcartOnItemRemoved`, `window.upcartOnAddUpsell`, `window.upcartOnCartLoaded` 콜백은 여전히 작동하지만 지원 중단(deprecated)되었으며 콘솔 경고를 기록해요. 새 스크립트에는 모두 `upcartSubscribeItemRemoved`, `upcartSubscribeUpsellsAddedToCart`, `upcartSubscribeCartLoaded`를 사용하세요.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-hide-upsells.gif?s=eec41b0784bb4db819ee4ae1cd8a25e5" alt="JavaScript로 업셀 모듈을 숨기는 Upcart Custom HTML Scripts Before Load 편집기" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-hide-upsells.gif" />

***

🔧 **개발자 참고:**\
Upcart는 고급 커스터마이징에 사용할 수 있는 모든 함수, 변수, 모범 사례 패턴을 나열한 전체 [Public API 문서](https://rokt.notion.site/upcart-public-api)를 제공해요. 더 복잡한 스크립트나 연동을 구축할 때 이를 검토하는 것을 권장해요.

***

<div id="style-your-cart-with-css">
  ## CSS로 카트 스타일링하기
</div>

CSS는 카트 요소의 모양과 느낌을 제어해요. 간격, 색상, 글자 크기를 조정하거나 원치 않는 요소를 숨기는 데 사용하세요. **Custom CSS**는 **Settings** 아래 탭 중 하나예요(탭 행이 넘치는 경우 **More settings** 뒤에 있어요).

일반적인 사용 사례:

* 제품 제목이나 버튼 색상 변경
* 글자 크기나 정렬 조정
* 섹션 사이 간격 추가

**예시: V1.0에서 업셀 제목 색상 변경하기:**

```
.upcart-upsells-title {  
  color: #C20075 !important;  
  font-size: 25px;  
  font-style: italic;  
  text-align: center;  
}
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-css-editor-styling.gif?s=f676b9eef6e30c6c122028c0e7a38b6e" alt="변경 사항 저장 확인과 함께 업셀 제목 색상을 스타일링하는 Upcart Custom CSS 편집기" width="2060" height="1080" data-path="images/upcart/customizations-custom-css-editor-styling.gif" />

***

<div id="additional-resources">
  ## 추가 자료
</div>

HTML, CSS, JavaScript 실력을 키우고 싶으신가요? 다음 무료 도구들을 확인해 보세요:

* [W3Schools](https://www.w3schools.com/)
* [Codecademy](https://www.codecademy.com/?g_network=g\&g_productchannel=\&g_adid=528849219280\&g_locinterest=\&g_keyword=codecademy\&g_acctid=243-039-7011\&g_adtype=\&g_keywordid=kwd-41065460761\&g_ifcreative=\&g_campaign=account\&g_locphysical=9001394\&g_adgroupid=70492864474\&g_productid=\&g_source=%7Bsourceid%7D\&g_merchantid=\&g_placement=\&g_partition=\&g_campaignid=1726903838\&g_ifproduct=\&utm_id=t_kwd-41065460761:ag_70492864474:cp_1726903838:n_g:d_c\&utm_source=google\&utm_medium=paid-search\&utm_term=codecademy\&utm_campaign=INTL_Brand_Exact\&utm_content=528849219280\&g_adtype=search\&g_acctid=243-039-7011\&gad_source=1\&gad_campaignid=1726903838\&gbraid=0AAAAAon8KZFBIKQJ4KKGpsSVHO3yi2Njl\&gclid=CjwKCAjwx-zHBhBhEiwA7Kjq61-cNVEH2PzXZCcjcqIZS-0mCe8EEyPBJYyj4QRn5bma8OMqd3IJrBoCwjoQAvD_BwE)
* [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/)

<div id="support-for-customizations">
  ## 커스터마이징 지원
</div>

Upcart 지원팀은 커스텀 코드 구현을 도와드릴 수 없어요. 더 고급 변경이 필요하면 [Shopify Expert](https://www.shopify.com/ca/partners/directory)를 고용하는 것을 권장해요.