AI Search 외관 사용자 지정 방법
Shoply AI 검색 결과를 맞춤 설정하는 방법은 두 가지입니다:
- 내장 옵션: 코드를 작성하지 않고도 Shoply AI Admin Console의 제어 기능으로 요약, 필터, 버튼, 색상, 상품 레이아웃을 변경할 수 있습니다. 내장 옵션과 미리보기 살펴보기.
- 사용자 지정 CSS: 이러한 제어 기능만으로 원하는 디자인이 나오지 않는다면, 웹페이지 스타일 언어인 CSS를 사용해 글꼴, 간격, 테두리 및 기타 시각적 세부 요소를 세밀하게 조정하세요. 내장 설정과 함께 사용할 수도 있습니다. CSS 가이드로 이동.
CSS가 전혀 필요 없을 수도 있습니다
검색 레이아웃과 모양에 대한 대부분의 변경 사항은 Shopify를 사용하든 다른 웹사이트 플랫폼을 사용하든, 이미 Shoply AI Admin Console의 Customize AI Search 아래에서 사용할 수 있습니다. 먼저 이러한 내장 옵션을 시도한 다음, 관리자에서 Save를 클릭해 선택 사항을 적용하세요. 이러한 제어 기능으로 다루지 않는 스타일링이 필요할 때만 CSS를 사용하세요.
아래의 인터랙티브 예시는 관리자와 동일한 미리보기를 사용합니다. 여기서 직접 시도해 볼 수 있는 예시일 뿐이며, 실제 스토어에는 변경 사항이 적용되지 않습니다.
- AI Summary: 요약 표시를 켜거나 끄고, 상품 결과 위 또는 아래에 표시할지 선택할 수 있습니다.
- 검색 필터: 필터 바를 표시하거나 숨기고, 필터를 상단, 왼쪽 또는 플로팅 패널에 배치할 수 있습니다. 왼쪽 레이아웃은 작은 화면에서는 결과 위로 이동합니다. 채팅 결과에 공통으로 적용되는 효과는 search filter visibility settings를 참고하세요.
- 상품 액션 버튼 및 색상: Add to Cart, View Product, 또는 No Button을 선택할 수 있습니다. 버튼의 배경색과 텍스트 색상을 지정하고, 스토어에 맞게 평점 별 색상도 변경할 수 있습니다.
- 한 줄당 상품 수: 데스크톱에서는 3열 또는 4열, 모바일에서는 1열 또는 2열을 선택할 수 있습니다. 열 수가 적을수록 각 상품 이미지에 더 많은 공간이 주어집니다.
- 표시되는 총 상품 수: 작은 모바일 화면, 큰 모바일 화면, 데스크톱에 대해 각각 다른 상품 수를 설정할 수 있습니다. 관리자에서는 3, 4, 6, 8, 9, 12, 15, 16, 18 또는 20개 상품을 제공합니다. 이는 열 수가 아니라 결과 개수를 제어합니다.
여전히 사용자 지정 디자인이 필요하다면, 아래의 CSS 가이드를 계속 읽어보세요.
시작하기
내장 옵션만으로 원하는 모양을 만들 수 없다면, 사용자 지정 CSS를 사용해 검색 결과를 세밀하게 조정하세요.
Shoply AI Chat과 AI Search는 모두 검색 결과를 표시할 수 있으므로, 추가한 CSS 맞춤 설정 옵션은 둘 다에 적용됩니다. 참고: AI Summary 기능은 Shoply AI Search에서만 사용할 수 있습니다.
먼저 스타일링하기 전에 AI Search를 활성화하여 실제 결과에서 변경 사항을 미리 확인할 수 있도록 하세요.
CSS를 추가하는 위치
전체 필터 바를 숨기려면 내장 제어 기능을 사용하세요: Customize AI Search → Search filters로 이동한 뒤 Show filters in search results를 끄고 Save를 클릭하세요. CSS는 필요하지 않습니다. 자세한 내용은 Hide Search Filters 를 참고하세요.
- Shoply 앱의 관리자 콘솔에서 Customize AI Search 섹션으로 이동합니다.
- CSS styles for search elements 텍스트 영역을 찾습니다
- 텍스트 영역에 사용자 지정 CSS 코드를 입력합니다
- Save를 클릭하여 변경 사항을 적용합니다
CSS 기초
CSS를 사용하면 색상, 글꼴, 간격, 테두리 등을 변경할 수 있습니다. 기본 구문은 다음과 같습니다:
.class-name {
property: value;
}예를 들어, 텍스트 색상을 진한 빨간색으로 변경하려면 다음과 같이 합니다:
.shoply-product-name {
color:rgb(82, 2, 2);
}Shoply 전용 CSS 클래스 이해하기
Shoply는 검색 결과의 مختلف 부분을 대상으로 지정할 수 있는 전용 CSS 클래스를 제공합니다. 각 클래스는 검색 결과의 특정 요소에 대응합니다.
Shoply는 이러한 클래스에 대해 일부 기본 스타일도 정의해 두었습니다. Chrome DevTools 를 사용해 해당 스타일을 확인하고 각 클래스를 검색할 수 있습니다. 기본 스타일을 덮어써야 한다면, MDN CSS !important documentation 에서 설명한 대로 CSS 규칙에 !important 선언을 추가하세요.
상품 카드 클래스
컨테이너용 스타일:
.shoply-product-image- 상품 이미지 스타일.shoply-product-card- 상품 카드 컨테이너 스타일
텍스트 정보용 스타일:
.shoply-product-brand- 상품 제목 위에 표시되는 상품 브랜드/판매자 이름 스타일.shoply-product-name- 상품 제목/이름 스타일
가격용 스타일:
.shoply-product-price- 상품 가격 스타일 (할인 적용 후).shoply-product-original-price-before-discount- 할인 전 원래 가격 스타일 (line-through장식이 기본값으로 적용됨).shoply-product-discount-percent- 할인율 텍스트 스타일 (기본적으로 굵은 빨간색 텍스트로 표시됨)
액션 버튼용 스타일:
.shoply-product-action-button- 기본 액션 버튼 스타일 (Add to Cart, View Product 등).shoply-product-action-button-sold-out- 상품 품절 시 액션 버튼 스타일 (비활성 상태)
참고: Shoply 앱 관리자 콘솔의 Customize AI Search 섹션에서 고객이 액션 버튼을 클릭했을 때 어떤 동작이 일어날지 설정할 수 있습니다. 상품을 장바구니에 추가하게 하거나, 상품 페이지로 이동시키거나, 액션 버튼 자체를 숨기도록 선택할 수 있습니다.
AI Summary 클래스
.shoply-ai-summary-box- AI 생성 요약의 컨테이너 박스 스타일.shoply-ai-summary-button- AI Summary 생성을 실행하는 버튼 스타일
CSS로 검색 결과의 상품 카드를 맞춤 설정하는 예시
상품 브랜드 스타일 변경하기
상품 브랜드는 상품 제목 위에 표시됩니다. 아래는 자주 사용하는 맞춤 설정 예시입니다:
/* Make brand name smaller and gray */
.shoply-product-brand {
font-size: 11px;
color: #888888;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}상품 제목 맞춤 설정하기
상품명은 가장 중요한 요소 중 하나입니다. 브랜드에 맞게 맞춤 설정해 보세요:
/* Make product title bold and larger */
.shoply-product-name {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
line-height: 1.4;
margin-bottom: 8px;
}
/* Add hover effect */
.shoply-product-name:hover {
color: #0066cc;
text-decoration: underline;
}상품 가격 스타일링 예시
사용자 지정 스타일로 가격이 더 눈에 띄게 만들어 보세요:
/* Style the current price (after discount) */
.shoply-product-price {
font-size: 20px;
font-weight: 700;
color: #e74c3c;
margin-top: 10px;
}
/* Style the original price (before discount) - greyed out with strikethrough */
.shoply-product-original-price-before-discount {
font-size: 14px;
color: #999999;
margin-left: 8px;
text-decoration: line-through;
}액션 버튼 맞춤 설정하기
액션 버튼(Add to Cart, View Product)은 스토어 디자인에 맞게 스타일링할 수 있습니다:
/* Style the main action button with blue background, white text, rounded corners, and smooth transitions */
.shoply-product-action-button {
background-color: #0066cc !important;
color: #ffffff !important;
border-radius: 6px;
padding: 12px 24px;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
border: none;
}
/* Add hover effect - darker blue background, slight lift, and shadow */
.shoply-product-action-button:hover {
background-color: #0052a3 !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3);
}
/* Style sold-out button - grey background, darker grey text, disabled cursor, and reduced opacity */
.shoply-product-action-button-sold-out {
background-color: #cccccc !important;
color: #666666 !important;
cursor: not-allowed;
opacity: 0.6;
}상품 이미지 스타일링하기
테두리, 그림자 또는 호버 효과로 상품 이미지를 더 돋보이게 하세요:
/* Add border and shadow to product images */
.shoply-product-image {
border-radius: 8px;
border: 2px solid #f0f0f0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
/* Add hover effect of the product image*/
.shoply-product-image:hover {
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}AI Summary 섹션 맞춤 설정 예시
AI Search를 활성화한 스토어에서는 AI Summary가 검색 결과 상단에 표시되며, 고객이 상품 목록을 스크롤하기도 전에 검색 결과를 바탕으로 무엇을 사야 하는지와 그 이유를 즉시 설명해 줍니다.
앱 관리자 콘솔의 Customize AI Search 페이지에서 AI Summary를 비활성화할 수 있습니다. 아래와 같이 CSS를 사용해 모양을 맞춤 설정할 수도 있습니다.
AI Summary 박스 스타일링하기
/* Style the AI summary box with purple gradient background, white text, rounded corners, shadow, and semi-transparent border */
.shoply-ai-summary-box {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
padding: 24px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Alternative: Light theme - light gray background with subtle border and shadow */
.shoply-ai-summary-box {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}AI Summary 버튼 맞춤 설정하기
기본적으로 AI Summary는 화면 공간을 절약하기 위해 짧고 간결하게 유지됩니다. 고객은 “AI Summary Button”을 클릭하여 펼치고 전체 내용을 볼 수 있습니다. 브랜드에 맞게 조정하고 싶으신가요? 이 버튼도 맞춤 설정할 수 있습니다! 아래 예시를 확인해 보세요.
/* Customize the summary button */
.shoply-ai-summary-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: #ffffff !important;
border: none;
border-radius: 20px;
padding: 10px 20px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
/* Add hover effect */
.shoply-ai-summary-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}문제 해결
CSS 변경 사항이 표시되지 않아요
- 오타 확인: CSS 클래스 이름이 올바르게 작성되었는지 확인하세요 (
.shoply-로 시작합니다) - 브라우저 캐시 삭제: 브라우저가 이전 스타일을 캐시하는 경우가 있습니다
- CSS 구문 확인: 모든 CSS 규칙이
}로 올바르게 닫혀 있는지 확인하세요 !important사용: 스타일이 적용되지 않는다면, 기본 스타일을 덮어쓰기 위해!important를 추가해야 할 수 있습니다:css.shoply-product-action-button { background-color: #ff0000 !important; }
모바일에서 스타일이 다르게 보여요
일부 스타일은 모바일 전용 조정이 필요할 수 있습니다. 미디어 쿼리를 사용하세요:
@media (max-width: 768px) {
.shoply-product-name {
font-size: 14px;
}
}기본 스타일로 되돌리고 싶어요
CSS 텍스트 영역을 비우고 저장하면 됩니다. 앱이 기본 스타일로 되돌아갑니다.
더 도움이 필요하신가요?
CSS 맞춤 설정에 대해 추가 도움이 필요하다면:
- 앱 설정의 시각적 예시(Product Card Preview 및 AI Summary Preview)를 확인하세요
- MDN Web Docs 같은 CSS 문서 자료를 참고하세요
- 맞춤형 도움이 필요하면 customer-obsession@shoplyai.ai 로 지원 팀에 문의하세요
즐겁게 맞춤 설정해 보세요! 🎨
이 CSS 클래스들을 사용하면 검색 결과의 모양을 완전히 제어할 수 있습니다. 실험하고, 테스트하고, 브랜드에 완벽하게 어울리는 검색 경험을 만들어 보세요!