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

# 홈페이지에서 고정 장바구니 버튼 숨기기

> 이 문서에서는 JavaScript와 CSS를 사용해 스토어 홈페이지에서 플로팅 장바구니 버튼을 숨기는 방법을 설명해요.

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

더 깔끔한 첫인상을 원하거나 홈페이지 레이아웃이 고정 장바구니 버튼과 충돌하는 경우, 간단한 코드 스니펫을 사용해 홈페이지에서만 버튼을 숨길 수 있어요.

이 설정은 고객이 현재 보고 있는 페이지를 확인하고, 홈페이지에 있는 경우 고정 장바구니 버튼을 제거해요.

***

<div id="when-to-use-this">
  ## 언제 사용하나요
</div>

* 홈페이지의 시각적 혼잡을 피하고 싶을 때
* 고정 장바구니와 겹치는 커스텀 히어로 섹션이나 레이아웃을 사용할 때
* 장바구니 버튼을 제품 페이지나 컬렉션에 집중시키고 싶을 때

***

<div id="step-1-add-the-script">
  ## 1단계: 스크립트 추가
</div>

1. **Upcart > Cart Editor > Settings > Custom HTML**로 이동하세요
2. **HTML Location** 드롭다운에서 **Scripts (Before Load)** 를 선택하세요
3. 다음 JavaScript를 붙여넣으세요:

```
<script>  
  var stickyCartButton = document.querySelector("#upCartStickyButton");  
  
  if (  
    stickyCartButton &&  
    (document.location.pathname === "/" + Shopify.locale ||  
     document.location.pathname === "/")  
  ) {  
    stickyCartButton.classList.add("hide-sticky-cart-button");  
  }  
</script>
```

이 스크립트는 현재 페이지의 경로를 확인하고, 고객이 홈페이지에 있는 경우 고정 버튼을 숨기는 클래스를 적용해요.

***

<div id="step-2-add-custom-css">
  ## 2단계: 커스텀 CSS 추가
</div>

1. **Upcart > Sticky Cart > Custom CSS (Cart Editor가 아니라 Sticky Cart라는 점에 유의하세요)** 로 이동하세요
2. 다음 CSS를 붙여넣으세요:

```
.hide-sticky-cart-button {     
  display: none;   
}
```

***

<div id="final-result">
  ## 최종 결과
</div>

* 고객이 홈페이지(`/` 또는 `/[locale]`)를 방문하면 고정 장바구니 버튼이 숨겨져요
* 다른 모든 페이지에서는 버튼이 계속 표시돼요