CSS로 검색 결과를 사용자 지정하는 방법
검색 결과를 멋지게 꾸밀 준비가 되셨나요? 이 가이드에서는 CSS로 상품 검색 결과와 AI 요약 섹션의 스타일을 지정하는 방법을 알려드립니다. CSS가 처음이어도 걱정하지 마세요—필요한 내용을 모두 안내해 드립니다! 이미 CSS에 익숙하다면, 사용자 지정을 한 단계 더 발전시킬 수 있는 다양한 팁도 찾을 수 있습니다.
시작하기
Shoply AI Chat과 AI Search는 모두 검색 결과를 표시할 수 있으므로, 추가한 CSS 사용자 지정 옵션은 두 기능 모두에 적용됩니다. 참고: AI Summary 기능은 Shoply 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- 할인 전 원래 가격의 스타일을 지정합니다(기본적으로 취소선이 적용됨).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 요약 생성을 트리거하는 버튼의 스타일을 지정합니다.
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;
}상품 이미지 스타일 지정하기
테두리, 그림자 또는 hover 효과로 상품 이미지를 더 돋보이게 만들어 보세요:
/* 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 클래스를 사용하면 검색 결과의 모양을 완전히 제어할 수 있습니다. 자유롭게 실험하고, 테스트하고, 브랜드와 완벽하게 어울리는 검색 경험을 만들어 보세요!