Hướng dẫn này cung cấp cái nhìn tổng quan về cách tùy chỉnh giao diện của các thành phần Cá nhân hóa ngay trong trang trên cửa hàng Shopify. Chúng tôi sẽ đi qua các bộ chọn CSS và những thực tiễn tốt nhất để giúp bạn mang đến trải nghiệm mua sắm phù hợp và hấp dẫn cho khách hàng.
Hiểu cấu trúc CSS trên Shopify
Mỗi thành phần cá nhân hóa trên trang Shopify của bạn được cấu trúc trong một khung CSS cụ thể. Cấu trúc này giúp áp dụng kiểu dáng có mục tiêu và đảm bảo tính nhất quán trong thiết kế cho các yếu tố đã cá nhân hóa. Cùng xem qua các thành phần chính:
Phần chứa chính
Container chính đóng vai trò là phần bao cho tất cả các thành phần cá nhân hóa. Dùng lớp sau để áp dụng kiểu dáng toàn cục cho toàn bộ phần cá nhân hóa của bạn:
.g-selector-container: Lớp này là bộ bao bọc chính.
Các loại Cá nhân hóa
Các kiểu cá nhân hóa khác nhau, như văn bản, hình ảnh hoặc biến thể, được phân biệt bằng các lớp bổ sung. Điều này cho phép bạn áp dụng các kiểu cụ thể dựa trên loại nội dung:
.g-selector-variants: Dùng để Cá nhân hóa dựa trên các biến thể của sản phẩm như kích thước hoặc màu sắc..g-selector-text: Dành cho các tùy chỉnh dựa trên văn bản..g-selector-image: Dùng cho việc Cá nhân hóa bằng hình ảnh, như hình ảnh do người dùng tải lên..g-selector-collection: Dùng để hiển thị một bộ tùy chọn, như mẫu màu hoặc họa tiết..g-selector-condition: Dành cho logic Cá nhân hóa có điều kiện, nơi các tùy chọn xuất hiện dựa trên các lựa chọn trước đó của người dùng.
Nhãn cho Tên phần tử
Mỗi loại Cá nhân hóa bao gồm một phần tử con cho nhãn hoặc tiêu đề. Bạn có thể tùy chỉnh nhãn này bằng bộ chọn sau:
.g-selector-label: Dùng bộ chọn này để tạo kiểu cho văn bản mô tả các tùy chọn Cá nhân hóa, ví dụ: "Chọn kích cỡ" hoặc "Chọn màu sắc.”
Tùy chỉnh nút và trạng thái trên Shopify
Nút bấm là yếu tố quan trọng trong quá trình Cá nhân hóa, thường dùng để chọn biến thể hoặc điều kiện. Dưới đây là cách bạn có thể tùy chỉnh giao diện của chúng:
Các khung nút và nút bấm
.g-selector-buttons: Lớp này đại diện cho vùng chứa giữ tất cả các nút cho một tuỳ chọn cụ thể..g-selector-button: Lớp này được áp dụng cho từng nút riêng lẻ trong vùng chứa.
Trạng thái nút
Bạn có thể tùy chỉnh các trạng thái khác nhau của nút để cung cấp phản hồi trực quan cho người dùng:
.g-selector-button-active: Lớp này được áp dụng khi người dùng đang chọn nút..g-selector-button-disabled: Lớp này được áp dụng khi một nút không khả dụng hoặc không thể nhấp.
Tùy chỉnh hình thu nhỏ ảnh trên Shopify
Với các tùy chọn cá nhân hóa dựa trên hình ảnh, như bảng màu, bạn có thể dùng class sau:
.g-selector-collection-thumbnail: Lớp này được áp dụng cho từng ảnh thumbnail trong một bộ sưu tập. Bạn có thể tùy chỉnh lớp này để điều chỉnh kích thước, viền và bố cục của các ảnh này.
Ví dụ tùy chỉnh CSS trên Shopify
Dưới đây là ví dụ về cách bạn có thể tùy chỉnh giao diện của các bộ chọn bằng CSS. Hãy giữ sự nhất quán với thương hiệu và đảm bảo hiển thị tốt trên nhiều thiết bị.
/* Kiểu dáng chung cho container */.g-selector-container { padding: 20px; border: 1px solid #e0e0e0; background-color: #f9f9f9; } /* Kiểu dáng cho nhãn */.g-selector-label { font-size: 14px; color: #333; margin-bottom: 8px; } /* Nút */.g-selector-button { background-color: #007bff; color: #fff; padding: 10px; border: none; cursor: pointer; } .g-selector-button-active { background-color: #28a745; } .g-selector-button-disabled { background-color: #ccc; cursor: not-allowed; } /* Tùy chỉnh hình thu nhỏ */.g-selector-collection-thumbnail { width: 100px; height: 100px; border: 2px solid #ddd; margin: 5px; }
Thực tiễn tốt nhất cho tùy chỉnh trên Shopify
Duy trì tính nhất quán: Hãy đảm bảo các tùy chỉnh của bạn phù hợp với nhận diện thương hiệu tổng thể của website để mang đến trải nghiệm liền mạch cho người dùng.
Kiểm tra trên mọi thiết bị: Kiểm tra khả năng phản hồi của phần tùy chỉnh trên cả máy tính và thiết bị di động.
Tăng khả năng truy cập: Dùng màu tương phản cao cho văn bản và nút bấm, và đảm bảo trạng thái focus phù hợp cho mọi thành phần tương tác để trang của bạn dễ tiếp cận với tất cả người dùng.