> ## 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="introduction">
  # 소개
</div>

체크아웃 버튼에 자물쇠 아이콘을 추가하는 것은 결제 정보가 안전하다는 것을 보여주어 고객의 신뢰를 높이는 간단하면서도 효과적인 방법이에요. 이 친숙한 심볼은 고객에게 데이터 보호에 대한 안심을 주어 체크아웃 과정에서 더 편안하게 느끼도록 해줘요. 이 튜토리얼에서는 CSS를 사용해 체크아웃 버튼에 자물쇠 아이콘을 추가하는 방법을 안내해 드릴게요. 이를 통해 보안성을 높이고 전반적인 사용자 경험을 개선할 수 있어요.

이 단계들은 CSS에 대한 기본적인 이해가 있는 스토어 운영자나 개발자에게 적합해요. 작지만 임팩트 있는 이 시각적 요소를 추가하면 Upcart 체크아웃 버튼을 사이트 디자인에 맞추고, 신뢰를 쌓아 고객이 구매를 완료하도록 유도할 수 있어요.

시작해 볼까요!

<div id="getting-started-choose-a-lock-icon">
  ## 시작하기: 자물쇠 아이콘 선택하기
</div>

먼저 스토어에 추가할 자물쇠 아이콘을 선택해야 해요. 아래에 사용하실 수 있는 아이콘들을 준비해 두었지만, 직접 준비하신 아이콘을 사용하셔도 좋아요. 직접 준비한 아이콘을 사용하려면 Shopify 스토어의 **Settings > Files**에 있는 Files 섹션에 업로드하고 URL을 복사하세요.

Upcart에는 체크아웃 버튼용 아이콘 필드가 없어요. 대신 HTML을 렌더링하는 **Checkout button text** 필드에 HTML 이미지 태그를 붙여넣으면 돼요 — 아래 스니펫 중 하나를 가져와서 `src`를 본인의 URL로 바꿔주세요.

<div id="here-are-lock-icons-we-have-available-for-you-to-select">
  ### 선택하실 수 있는 자물쇠 아이콘들이에요:
</div>

추가할 HTML:

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/checkout-lock-icon-white-solid-padlock.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=f503e3fad5399209c5a0147ee33be3da" alt="어두운 버튼 위 Checkout 텍스트 옆의 흰색 솔리드 자물쇠 아이콘" width="200" data-path="images/upcart/checkout-lock-icon-white-solid-padlock.png" />

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<img class="upcart-custom-lock-icon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/WhiteLock2.png?v=1683833338">
```

추가할 HTML:

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/checkout-lock-icon-white-outline-padlock.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=ddc6bcd1c3d225dc819b17365b635501" alt="어두운 버튼 위 Checkout 텍스트 옆의 흰색 아웃라인 자물쇠 아이콘" width="200" data-path="images/upcart/checkout-lock-icon-white-outline-padlock.png" />

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<img class="upcart-custom-lock-icon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/Lock_White_4.png?v=1688577328">
```

추가할 HTML:

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/checkout-lock-icon-white-padlock-keyhole.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=d21c4115964effe775c7560097e81d0d" alt="어두운 버튼 위 Checkout 옆의 열쇠 구멍이 있는 흰색 아웃라인 자물쇠" width="200" data-path="images/upcart/checkout-lock-icon-white-padlock-keyhole.png" />

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<img class="upcart-custom-lock-icon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/lock_icon_635ba3ed-7ec3-437e-8dce-cf53291aceb1.png?v=1681161869">
```

추가할 HTML:

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/checkout-lock-icon-black-solid-padlock.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=e3338e8e88fe2167e33b2358311333ed" alt="밝은 파란색 버튼 위 Checkout 텍스트 옆의 검은색 솔리드 자물쇠 아이콘" width="200" data-path="images/upcart/checkout-lock-icon-black-solid-padlock.png" />

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<img class="upcart-custom-lock-icon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/image_4.png?v=1694188629">
```

추가할 HTML:

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/checkout-lock-icon-black-padlock-keyhole.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=3fe4792f993cd6480529b9222b071008" alt="밝은 파란색 버튼 위 Checkout 옆의 열쇠 구멍이 있는 검은색 자물쇠" width="200" data-path="images/upcart/checkout-lock-icon-black-padlock-keyhole.png" />

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<img class="upcart-custom-lock-icon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/lock_icon_Black.png?v=1681162020">
```

<div id="placing-the-lock-icon">
  ## 자물쇠 아이콘 배치하기:
</div>

자물쇠 아이콘을 선택한 후 Manage All Carts > Edit > Settings > Edit copy로 이동해 **Checkout button text** 필드를 찾으세요. "Checkout"이라는 단어 앞이나 뒤에 붙여넣을 수 있어요. 또한 여기에서 "Checkout"이라는 단어를 "Secure Checkout" 같은 다른 문구로 변경할 수도 있어요.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/checkout-lock-icon-button-copy-editor.gif?s=f19a8a94edb2380d2996fb44104397ac" alt="Upcart에서 체크아웃 버튼 문구를 편집해 자물쇠 아이콘을 배치하는 모습" width="1016" height="1080" data-path="images/upcart/checkout-lock-icon-button-copy-editor.gif" />

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

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

1. 대시보드에서 **Upcart App**을 여세요.
2. **Cart Editor**로 이동하세요.
3. **Settings**를 열고 **Custom CSS** 탭을 선택하세요. Settings는 하나의 긴 페이지가 아니라 탭들의 행으로 되어 있어요 — Custom CSS가 보이지 않으면 **More settings** 안에 있어요.

<div id="applying-custom-css-to-show-the-lock-icon">
  ### **자물쇠 아이콘을 표시하기 위한 커스텀 CSS 적용하기:**
</div>

Custom CSS 섹션에 들어가면 아래 코드를 복사해 붙여넣어 자물쇠 아이콘을 표시하고 배치하세요. padding 숫자가 클수록 아이콘이 작아진다는 점을 참고해 주세요.

1. CSS 입력 영역을 찾으세요.
2. 다음 코드를 CSS 입력 영역에 복사해 붙여넣으세요:
3. 아이콘 크기를 바꾸려면 `.upcart-custom-lock-icon`의 `height`를 조정하세요. 더 큰 자물쇠 아이콘에는 `16px` 또는 `20px`를 권장해요

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.upcart-custom-lock-icon {  
  height: 12px;   
  margin-right: 6px;   
}   
  
.upcart-checkout-button {   
  display: flex !important;  
  align-items: center;   
  justify-content: center;   
}
```

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

이 단계를 따라 하시면 체크아웃 버튼에 자물쇠 아이콘을 성공적으로 추가하신 거예요. 고객이 구매 과정에서 더 안전하고 확신 있게 느낄 수 있게 되죠. 이 작은 변화가 스토어에 대한 인식에 큰 차이를 만들어 신뢰를 쌓고 전반적인 쇼핑 경험을 개선하는 데 도움이 돼요.

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

커스터마이징에 도움이 필요하시면, 카트 드로어에 HTML, CSS, JavaScript를 추가하는 것에 대해 Shopify Expert와 상담해 보시길 권장해요.

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