# 이커머스 스토어의 검색창 요소(Search Bar Element)

이커머스 스토어 사용자들이 상품 목록을 탐색하는 것은 어려운 작업이었습니다. 많은 상품이 발견되지 않은 채로 남겨지고, 웹사이트의 사용자 경험도 복잡했습니다. 이 문제를 해결하기 위해 이커머스 스토어를 위한 새로운 요소(Element)인 검색창을 출시합니다! 스토어 소유자는 이제 2가지 방법으로 검색창 요소를 추가할 수 있습니다: 네비게이션 메뉴(Navigation menu)와 웹사이트의 독립적인 요소로 추가하는 방법입니다.

## **사용 방법**

* 스토어의 페이지 빌더(Page Builder)로 이동하여 검색창 요소(Search bar Element)를 추가하세요. 이는 "요소 추가(Add elements)" 섹션의 스토어(Store) 부분에 있습니다.
* 네비게이션 메뉴에서 검색창을 활성화하려면, 네비게이션 메뉴 설정에 있는 "검색창 표시(Show Search bar)" 토글을 사용하세요.
* 검색창의 속성을 설정하세요. 설정할 수 있는 속성들은 다음과 같습니다:
  * 검색 버튼 색상
  * 검색 입력 박스 텍스트 및 배경 색상
  * 검색 드롭다운 텍스트 및 배경 색상
  * 입력 필드와 드롭다운의 테두리 색상
  * 폰트 크기와 굵기
* 저장(Save)/발행(Publish)을 클릭하여 사이트에서 변경사항을 확인하세요!

## **참고사항:**

* 스토어가 있는 웹사이트만 이 요소를 모든 페이지(스토어 페이지, 비스토어 페이지)에 추가할 수 있습니다.
* 검색창의 네비게이션 메뉴 커스터마이징은 제한적입니다. 모든 커스터마이징 옵션은 독립형 요소에서만 사용할 수 있습니다.
* 검색 제안(드롭다운)은 상품의 제목/이름을 기준으로 검색 결과를 보여줍니다.
* 검색을 클릭하면 사용자는 제목뿐만 아니라 설명도 기준으로 검색한 결과를 보여주는 상품 목록 페이지로 이동합니다.

![검색창 요소 추가](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155028960790/original/_mF6NCoak8IG4kthR8PXfBu1FoAgR3_KjQ.jpeg?1720535191)

![네비게이션 메뉴의 검색창 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155028960795/original/0c2dMkFiwFkijaKEf-fAObxRFmxTCLX90A.jpeg?1720535191)

![검색창 속성 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155028960792/original/P7yEJCBhOUEIl17NkIPXdSr_8J0GrsDMxw.jpeg?1720535191)

![검색창 디자인 옵션](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155028960794/original/6CMb5tcUPhs7DgQgbM0gOx_ahbESwQ-lLQ.jpeg?1720535191)

![검색 드롭다운 예시](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155028960791/original/ACiz3YgVs-jbPYI6fRH53m2ria-zK30CGw.jpeg?1720535191)

![검색 결과 페이지](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155028960793/original/ROAVFXsbFxIZlERg9N1BWDpGw43D8yeZ-w.jpeg?1720535191)

***

*원문 최종 수정: 2024년 7월 9일* *Hyperclass 사용 가이드 — hyperclass.ai*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hyperclass.gitbook.io/hyperclass-docs/e-commerce/search-bar-element-in-ecommerce-stores.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.