Cách Tùy chỉnh Kết quả Tìm kiếm của Bạn bằng CSS

Sẵn sàng để làm cho kết quả tìm kiếm của bạn trông thật ấn tượng chưa? Hướng dẫn này sẽ chỉ cho bạn cách tạo kiểu cho kết quả tìm kiếm sản phẩm và các phần tóm tắt AI bằng CSS. Đừng lo nếu bạn mới làm quen với CSS—chúng tôi sẽ hướng dẫn bạn! Và nếu bạn đã thành thạo, bạn cũng sẽ tìm thấy rất nhiều mẹo để đưa việc tùy chỉnh của mình lên một tầm cao mới.

Bắt đầu

Cả Shoply AI Chat và AI Search đều có thể hiển thị kết quả tìm kiếm, vì vậy các tùy chọn tùy chỉnh CSS mà bạn thêm vào sẽ áp dụng cho cả hai. Lưu ý: tính năng AI Summary chỉ khả dụng trong Shoply AI Search.

Thêm CSS ở đâu

Để ẩn toàn bộ thanh bộ lọc, hãy sử dụng điều khiển tích hợp sẵn: vào Customize AI Search → Search filters, tắt Show filters in search results, rồi nhấp Save. Không cần CSS. Xem Hide Search Filters  để biết chi tiết.

1. Điều hướng đến phần Customize AI Search trong bảng điều khiển quản trị của ứng dụng Shoply.
2. Tìm vùng văn bản CSS styles for search elements
3. Nhập mã CSS tùy chỉnh của bạn vào vùng văn bản
4. Nhấp Save để áp dụng các thay đổi của bạn

Kiến thức CSS cơ bản

CSS cho phép bạn thay đổi màu sắc, phông chữ, khoảng cách, đường viền và nhiều thứ khác. Cú pháp cơ bản là:

.class-name {
    property: value;
}

Ví dụ: để đổi màu chữ sang đỏ đậm:

.shoply-product-name {
    color:rgb(82, 2, 2);
}

Tìm hiểu các lớp CSS dành riêng cho Shoply

Shoply cung cấp các lớp CSS cụ thể mà bạn có thể dùng để nhắm tới các phần khác nhau trong kết quả tìm kiếm. Mỗi lớp tương ứng với một phần tử cụ thể trong kết quả tìm kiếm.

Shoply cũng đã định nghĩa một số kiểu mặc định cho các lớp này. Bạn có thể kiểm tra các kiểu đó bằng Chrome DevTools  và tìm kiếm từng lớp. Nếu bạn cần ghi đè các kiểu mặc định, hãy thêm khai báo !important vào các quy tắc CSS của bạn như được giải thích trong tài liệu MDN CSS !important .

Các lớp của thẻ sản phẩm

Kiểu cho vùng chứa:

• .shoply-product-image - Tạo kiểu cho hình ảnh sản phẩm
• .shoply-product-card - Tạo kiểu cho vùng chứa thẻ sản phẩm

Kiểu cho thông tin văn bản:

• .shoply-product-brand - Tạo kiểu cho tên thương hiệu/nhà cung cấp của sản phẩm hiển thị phía trên tiêu đề sản phẩm
• .shoply-product-name - Tạo kiểu cho tiêu đề/tên sản phẩm

Kiểu cho giá:

• .shoply-product-price - Tạo kiểu cho giá sản phẩm (sau khi áp dụng giảm giá)
• .shoply-product-original-price-before-discount - Tạo kiểu cho giá gốc trước khi giảm giá (mặc định có gạch ngang)
• .shoply-product-discount-percent - Tạo kiểu cho văn bản phần trăm giảm giá (mặc định hiển thị dưới dạng chữ đỏ đậm)

Kiểu cho nút hành động:

• .shoply-product-action-button - Tạo kiểu cho các nút hành động chính (Add to Cart, View Product, v.v.)
• .shoply-product-action-button-sold-out - Tạo kiểu cho nút hành động khi sản phẩm đã hết hàng (trạng thái bị vô hiệu hóa)

Lưu ý: Trong phần Customize AI Search của bảng điều khiển quản trị ứng dụng Shoply, bạn có thể cấu hình điều gì sẽ xảy ra khi khách hàng nhấp vào nút hành động—họ có thể thêm sản phẩm vào giỏ hàng, được chuyển hướng đến trang sản phẩm, hoặc bạn có thể chọn ẩn hoàn toàn nút hành động.

Các lớp của AI Summary

• .shoply-ai-summary-box - Tạo kiểu cho hộp chứa các bản tóm tắt do AI tạo ra.
• .shoply-ai-summary-button - Tạo kiểu cho nút kích hoạt việc tạo AI Summary.

Ví dụ về tùy chỉnh thẻ sản phẩm trong kết quả tìm kiếm bằng CSS

Thay đổi kiểu hiển thị thương hiệu sản phẩm

Thương hiệu sản phẩm xuất hiện phía trên tiêu đề sản phẩm. Dưới đây là một số tùy chỉnh phổ biến:

/* Make brand name smaller and gray */
.shoply-product-brand {
    font-size: 11px;
    color: #888888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

Tùy chỉnh tiêu đề sản phẩm

Tên sản phẩm là một trong những yếu tố quan trọng nhất. Hãy tùy chỉnh nó để phù hợp với thương hiệu của bạn:

/* 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;
}

Ví dụ về tạo kiểu giá sản phẩm

Làm cho giá của bạn nổi bật với kiểu dáng tùy chỉnh:

/* 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;
}

Tùy chỉnh nút hành động

Các nút hành động của bạn (Add to Cart, View Product) có thể được tạo kiểu để phù hợp với thiết kế cửa hàng của bạn:

/* 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;
}

Tạo kiểu hình ảnh sản phẩm

Nâng cao hình ảnh sản phẩm của bạn với đường viền, đổ bóng hoặc hiệu ứng 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);
}

Ví dụ về tùy chỉnh phần AI Summary

Đối với các cửa hàng bật AI Search, AI Summary sẽ xuất hiện ở đầu kết quả tìm kiếm và ngay lập tức giải thích nên mua gì và vì sao dựa trên kết quả tìm kiếm — trước cả khi khách hàng cuộn qua các sản phẩm.

Bạn có thể tắt AI Summary trong trang Customize AI Search trong bảng điều khiển quản trị của ứng dụng. Bạn cũng có thể tùy chỉnh giao diện của nó bằng CSS như minh họa bên dưới.

Tạo kiểu cho hộp 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);
}

Tùy chỉnh nút AI Summary

Theo mặc định, AI Summary được giữ ngắn gọn để tiết kiệm không gian màn hình. Khách hàng có thể nhấp vào “AI Summary Button” để mở rộng và xem đầy đủ chi tiết. Muốn làm cho nó phù hợp với thương hiệu của bạn? Bạn cũng có thể tùy chỉnh nút này! Hãy xem các ví dụ bên dưới.

/* 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);
}

Khắc phục sự cố

Các thay đổi CSS của tôi không hiển thị

1. Kiểm tra lỗi gõ: Hãy đảm bảo tên lớp CSS của bạn được viết đúng chính tả (chúng bắt đầu bằng .shoply-)
2. Xóa bộ nhớ đệm trình duyệt: Đôi khi trình duyệt lưu các kiểu cũ
3. Kiểm tra cú pháp CSS: Hãy đảm bảo tất cả các quy tắc CSS của bạn đều được đóng đúng bằng }
4. Sử dụng !important: Nếu kiểu không được áp dụng, bạn có thể cần thêm !important để ghi đè các kiểu mặc định:
   css

   .shoply-product-action-button {
       background-color: #ff0000 !important;
   }

Kiểu hiển thị trông khác trên thiết bị di động

Một số kiểu có thể cần điều chỉnh riêng cho thiết bị di động. Hãy dùng media queries:

@media (max-width: 768px) {
    .shoply-product-name {
        font-size: 14px;
    }
}

Cần đặt lại về kiểu mặc định

Chỉ cần xóa vùng văn bản CSS và lưu lại. Ứng dụng sẽ trở về kiểu mặc định.

Cần thêm trợ giúp?

Nếu bạn cần hỗ trợ thêm về tùy chỉnh CSS:

1. Xem các ví dụ trực quan trong cài đặt ứng dụng (Product Card Preview và AI Summary Preview)
2. Tham khảo các tài nguyên tài liệu CSS như MDN Web Docs 
3. Liên hệ đội ngũ hỗ trợ của chúng tôi để được trợ giúp cá nhân hóa tại customer-obsession@shoplyai.ai

Chúc bạn tùy chỉnh vui vẻ! 🎨

Với các lớp CSS này, bạn có toàn quyền kiểm soát giao diện của kết quả tìm kiếm. Hãy thử nghiệm, kiểm tra và tạo ra trải nghiệm tìm kiếm hoàn toàn phù hợp với thương hiệu của bạn!