Cách tùy chỉnh giao diện AI Search

Có hai cách để tùy chỉnh kết quả tìm kiếm Shoply AI của bạn:

• Tùy chọn tích hợp sẵn: Bắt đầu với các công cụ trong Shoply AI Admin Console để thay đổi phần tóm tắt, bộ lọc, nút, màu sắc và bố cục sản phẩm mà không cần viết mã. Khám phá các tùy chọn và bản xem trước tích hợp sẵn.
• CSS tùy chỉnh: Nếu các công cụ đó chưa mang lại thiết kế bạn muốn, hãy dùng CSS—ngôn ngữ tạo kiểu cho trang web—để tinh chỉnh phông chữ, khoảng cách, đường viền và các chi tiết hiển thị khác. Bạn có thể dùng CSS cùng với các cài đặt tích hợp sẵn. Đi đến hướng dẫn CSS.

Có Lẽ Bạn Hoàn Toàn Không Cần CSS

Hầu hết các thay đổi về bố cục và giao diện tìm kiếm đã có sẵn trong Customize AI Search ở Shoply AI Admin Console, dù bạn dùng Shopify hay nền tảng website khác. Hãy thử các tùy chọn tích hợp sẵn này trước, sau đó nhấp Save trong phần quản trị để áp dụng lựa chọn của bạn. Chỉ dùng CSS cho những kiểu hiển thị mà các công cụ này chưa hỗ trợ.

Các ví dụ tương tác bên dưới sử dụng cùng bản xem trước như trong trang quản trị. Đây là các minh họa để bạn thử ngay tại đây; chúng không thay đổi cửa hàng của bạn.

• AI Summary: Bật hoặc tắt phần tóm tắt, và chọn hiển thị nó ở phía trên hoặc phía dưới kết quả sản phẩm.

• Search filters: Hiển thị hoặc ẩn thanh bộ lọc, và đặt bộ lọc ở phía trên, bên trái hoặc trong một bảng nổi. Bố cục bên trái sẽ chuyển lên phía trên kết quả trên màn hình nhỏ hơn. Xem cài đặt hiển thị bộ lọc tìm kiếm để biết tác động tương ứng lên kết quả chat.

• Product action buttons and colors: Chọn Add to Cart, View Product hoặc No Button. Chọn màu nền và màu chữ của nút, đồng thời thay đổi màu ngôi sao đánh giá để phù hợp với cửa hàng của bạn.

• Products per row: Chọn ba hoặc bốn cột trên desktop, và một hoặc hai cột trên mobile. Ít cột hơn sẽ cho mỗi hình ảnh sản phẩm nhiều không gian hơn.

• Total products displayed: Thiết lập số lượng sản phẩm riêng cho màn hình mobile nhỏ, màn hình mobile lớn hơn và desktop. Phần quản trị cung cấp các tùy chọn 3, 4, 6, 8, 9, 12, 15, 16, 18 hoặc 20 sản phẩm. Cài đặt này kiểm soát số lượng kết quả, không phải số cột.

Nếu bạn vẫn cần một thiết kế tùy chỉnh, hãy tiếp tục với hướng dẫn CSS bên dưới.

Bắt Đầu

Nếu các tùy chọn tích hợp sẵn chưa mang lại giao diện bạn muốn, hãy dùng CSS tùy chỉnh để tinh chỉnh kết quả tìm kiếm.

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.

Trước tiên, hãy bật AI Search trước khi tạo kiểu để bạn có thể xem trước các thay đổi trên kết quả thực tế.

Thêm CSS Ở Đâu

Để ẩn toàn bộ thanh bộ lọc, hãy dùng công cụ 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 tới phần Customize AI Search trong bảng 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 thay đổi

Kiến Thức Cơ Bản Về CSS

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 hơn nữa. 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);
}

Hiểu Các CSS Class Riêng Của Shoply

Shoply cung cấp các CSS class cụ thể mà bạn có thể dùng để nhắm đến những phần khác nhau của kết quả tìm kiếm. Mỗi class 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 class này. Bạn có thể kiểm tra các kiểu đó bằng Chrome DevTools  và tìm kiếm từng class. 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ư giải thích trong tài liệu MDN CSS !important .

Các Class 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 được 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 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 vô hiệu hóa)

Lưu ý: Trong phần Customize AI Search của bảng quản trị ứng dụng Shoply, bạn có thể cấu hình điều gì 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 Class Của AI Summary

• .shoply-ai-summary-box - Tạo kiểu cho hộp chứa phần tóm tắt do AI tạo.
• .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 thành phần 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

Hãy làm cho giá sản phẩm nổi bật với kiểu 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 Các 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:

/* 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 bằng đườ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à tại sao dựa trên kết quả tìm kiếm — trước cả khi khách hàng cuộn xem sản phẩm.

Bạn có thể tắt AI Summary trong trang Customize AI Search ở bảng 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

Mặc định, AI Summary được giữ ngắn gọn súc tích để 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 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õ sai: Hãy đảm bảo tên CSS class của bạn được viết đúng (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ũ vào cache
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. Dùng !important: Nếu kiểu chưa được áp dụng, bạn có thể cần thêm !important để ghi đè 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 mobile

Một số kiểu có thể cần điều chỉnh riêng cho mobile. 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 nội dung trong vùng văn bản CSS và lưu lại. Ứng dụng sẽ quay 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 phần cài đặt của ứ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 CSS class này, bạn có toàn quyền kiểm soát giao diện kết quả tìm kiếm của mình. 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!