Macgi
Khi khách vào trang sản phẩm, menu thả xuống kiểu “Chọn màu: Đỏ, Xanh, Be” bắt họ đọc chữ, tưởng tượng màu rồi mới chọn. Với shop thời trang online trên Haravan, Sapo, WooCommerce, Shopify hay website tự dựng, việc chuyển từ dropdown sang ô màu sắc (swatch) và nút size giúp khách nhìn là hiểu ngay, thao tác nhanh và ít chọn nhầm hơn.
Vì sao swatch hiệu quả hơn dropdown cho màu và size
Màu sắc là thứ nên để khách nhìn thấy, không nên bắt khách đọc tên rồi tưởng tượng. Cùng tên “đỏ” có thể là đỏ gạch, đỏ đô, đỏ hồng; nếu shop chỉ hiển thị chữ, khách dễ hình dung sai và nhận hàng xong mới thất vọng. Một ô màu trực quan giải quyết đúng điểm đó.
Với size, dãy nút ngang như S / M / L / XL cho khách so sánh vị trí, chạm một lần là xong. Dropdown size trên điện thoại mở ra danh sách dọc, che mất ảnh sản phẩm, dễ cuộn nhầm. Nút size và ô màu thường giúp giảm câu hỏi “màu này thực tế ra sao?”, “size M còn không?” và làm trang sản phẩm trông chuyên nghiệp hơn.
Với shop chạy quảng cáo về trang sản phẩm trên Shopify, WooCommerce, Haravan hoặc Sapo, một swatch rõ ràng còn giúp khách đi từ ảnh quảng cáo đến lựa chọn biến thể mượt hơn. Khi khách không phải dừng lại để hiểu dropdown, tỷ lệ chuyển đổi (conversion rate) thường được cải thiện, dù mỗi shop cần tự đo để biết con số của mình.
Chuẩn bị dữ liệu biến thể trước khi bật swatch
Trước khi cài ô màu, shop nên dọn dữ liệu sản phẩm cho đúng. Swatch chỉ phát huy tác dụng khi dữ liệu biến thể sạch.
- Đặt tên màu nhất quán giữa các sản phẩm: dùng “Đỏ gạch” cho mọi món, đừng lúc ghi “Đỏ gạch”, lúc ghi “Red brick”.
- Với màu trơn, gán mã hex chính xác. “Trắng ngà” và “Trắng tinh” không nên dùng chung một mã.
- Với màu có họa tiết, vải nhăn, kẻ sọc, chấm bi, ánh kim, nên dùng ảnh swatch thay vì mã màu.
- Mỗi biến thể màu nên có ảnh sản phẩm riêng. Nếu khách chọn “Xanh navy” mà ảnh vẫn là áo đen, swatch có đẹp đến mấy cũng làm giảm niềm tin.
- Với size, ghi đúng theo thực tế: S, M, L, XL, Freesize, 36, 37, 38… Nếu shop hay bị hỏi về size, nên kết hợp với kịch bản tư vấn size. Bạn có thể tham khảo bài Tư vấn size cho khách khi bán online: kịch bản và checklist.
Một lỗi phổ biến là gộp quá nhiều màu gần giống vào một biến thể, hoặc tách quá chi tiết thành 20 ô màu khiến khách rối. Hãy giữ số lựa chọn vừa đủ: đủ để khách không bị hiểu lầm, nhưng không nhiều đến mức mất thời gian chọn.
Ảnh: Anna Tarazevich / Pexels
Cách cài ô màu sắc trên Shopify
Với Shopify, shop có thể dùng theme hỗ trợ sẵn hoặc cài app thuộc nhóm Color Swatches / Variation Swatches.
Bước chuẩn bị trong admin Shopify
Vào Products > chọn sản phẩm hoặc tạo sản phẩm mới. Trong mục Options, tạo một option tên “Màu sắc” với các giá trị như Đỏ gạch, Xanh navy, Be sữa. Sau đó vào mục Variants, thêm từng biến thể màu, giá, SKU nếu có, và quan trọng là:
- Với mỗi biến thể, thêm ảnh sản phẩm riêng trong phần Media hoặc Variant image.
- Kiểm tra tiêu đề sản phẩm, hình ảnh thay đổi khi chọn màu.
Nếu sản phẩm có cả màu và size, tạo thêm option “Kích thước” để hệ thống tự sinh đủ tổ hợp, ví dụ Đỏ gạch + S, Đỏ gạch + M…
Bật hiển thị swatch trong theme
Vào Online Store > Themes > Customize. Mở trang sản phẩm mẫu, tìm mục Product page, Variant picker hoặc Buy buttons. Nhiều theme có sẵn kiểu hiển thị “Color swatches” hoặc “Pills”. Nếu theme có, chỉ cần bật và chọn kiểu swatch.
Nếu theme không có sẵn, vào Apps > Shopify App Store, tìm nhóm app “Color Swatches / Variation Swatches”. Sau khi cài, thường có phần cài đặt để:
- Chọn kiểu hiển thị cho từng attribute: màu dạng chấm tròn, vuông, hoặc ảnh.
- Gán mã màu hoặc ảnh swatch cho từng giá trị màu.
- Hiển thị size dưới dạng nút nhãn chữ.
Shop không cần viết code nếu dùng app; chỉ khi muốn tùy biến sâu hơn mới cần chỉnh theme Liquid.
Cách cài ô màu sắc trên WooCommerce
WooCommerce mặc định hiển thị dropdown cho biến thể. Muốn có swatch, thường cần plugin thuộc nhóm Variation Swatches hoặc theme tự hỗ trợ.
Bước 1: Tạo attribute màu và size
Vào Products > Attributes, tạo attribute tên “Màu sắc”. Thêm các term: Đỏ gạch, Xanh navy, Be sữa… Sau đó trong màn hình sửa từng term, tùy plugin có thể khai báo màu hex hoặc ảnh swatch.
Tương tự, tạo attribute “Kích thước” với các term S, M, L, XL. Attribute size nên hiển thị dạng nút chữ, không dùng màu làm tín hiệu duy nhất.
Bước 2: Gán attribute cho sản phẩm biến thể
Vào Products > Edit Product, chọn loại Variable product. Trong tab Attributes, chọn “Màu sắc” và “Kích thước”, đánh dấu Used for variations. Vào tab Variations, chọn tạo biến thể từ các attribute. Với mỗi biến thể, tải ảnh riêng, nhập giá, SKU.
Bước 3: Bật hiển thị swatch
Nếu theme hỗ trợ sẵn, có thể vào Appearance > Customize, tìm mục WooCommerce > Product Page hoặc Product Archives, bật kiểu swatch. Nếu chưa có, cài plugin thuộc nhóm “Variation Swatches for WooCommerce”. Sau khi cài:
- Vào Products > Attributes, sửa attribute “Màu sắc”, chọn kiểu “Color” hoặc “Image”.
- Với attribute “Kích thước”, chọn kiểu “Button”.
- Kiểm tra lại trang sản phẩm: màu hiển thị thành ô vuông hoặc tròn, size thành nút.
Mẹo: nếu shop đang dùng theme bán hàng có page builder riêng, hãy ưu tiên bật swatch trong mục cài đặt của theme trước, vì plugin swatch đôi khi xung đột với một số theme cũ.
Ảnh: Michael Burrows / Pexels
Cách cài ô màu sắc trên Haravan và Sapo
Với Haravan và Sapo, cách làm gần tương tự: tạo biến thể trong sản phẩm trước, sau đó bật hiển thị dạng swatch trong giao diện.
Haravan
Vào trang quản trị Haravan, vào Sản phẩm > sửa sản phẩm. Tại mục biến thể hoặc thuộc tính, thêm thuộc tính “Màu sắc” và “Kích thước”. Với mỗi giá trị màu:
- Nếu nền tảng/giao diện cho phép, chọn mã màu hoặc tải ảnh swatch.
- Cập nhật ảnh cho từng biến thể để khách chọn màu là ảnh sản phẩm đổi theo.
Về hiển thị, vào khu vực Thiết kế giao diện, tìm mục Trang sản phẩm hoặc Biến thể. Tùy theme, có tùy chọn hiển thị biến thể dạng ô tròn, ô vuông, hoặc nút. Nếu theme hiện tại không hỗ trợ, tìm trên Haravan App Store nhóm app swatch hoặc nhờ bên giao diện chỉnh HTML/CSS.
Sapo
Trong trang quản trị Sapo, vào Sản phẩm > sửa sản phẩm > Biến thể. Thêm thuộc tính “Màu sắc”, nhập các giá trị và gán hình ảnh. Một số giao diện Sapo hỗ trợ tải ảnh swatch ngay trong cấu hình biến thể.
Để bật swatch ngoài trang sản phẩm, vào Giao diện > Tùy chỉnh giao diện, tìm phần Trang sản phẩm hoặc Thông tin biến thể. Nếu có mục “Hiển thị kiểu ô màu” hoặc “Swatch”, bật lên. Nếu không có, dùng app hỗ trợ từ kho ứng dụng Sapo hoặc chỉnh theme.
Với cả hai nền tảng, hãy thử trên điện thoại thật: nhiều theme bật đẹp trên máy tính nhưng mobile vẫn còn dropdown hoặc ô màu quá nhỏ.
Ô màu dùng ảnh hay màu phẳng: khi nào dùng loại nào
Không phải lúc nào mã màu cũng đúng. Màu trơn như trắng, đen, đỏ thuần, vàng mù tạt có thể dùng ô màu phẳng từ mã hex. Nhưng với vải họa tiết, kẻ sọc, chấm bi, hoa nhí, ombre, vải nhăn hoặc màu ánh kim, một ô màu phẳng gần như không diễn tả đúng sản phẩm.
Khi dùng ảnh swatch:
- Ảnh nên cắt vuông, căng đúng phần vải của màu đó, tránh lọt phông nền hoặc chi tiết thừa.
- Ánh sáng nên đồng đều giữa các màu để khách so sánh công bằng.
- Không dùng ảnh quá chi tiết vì thu nhỏ sẽ rối; một mảng vải đặc trưng là đủ.
- Nếu một màu vừa có ánh kim vừa có họa tiết, ảnh swatch nên thể hiện đúng bề mặt vải.
Với size, không nên dùng màu làm tín hiệu chính. Size nên là nút chữ nền trung tính. Chọn size có thể dùng mã màu nhẹ cho trạng thái, nhưng cần thêm chữ S, M, L rõ ràng.
Làm swatch dễ nhìn và dễ chạm trên mobile
Khách mua hàng qua điện thoại nhiều hơn máy tính, nên swatch cần đủ lớn để ngón tay chạm thoải mái. Một ô kích thước khoảng 40–48px thường dễ thao tác hơn nhiều so với chấm 20px. Nếu shop bán cho khách trung niên hoặc khách không quen thao tác, nên làm rộng hơn một chút.
Để bảo đảm tính truy cập tốt hơn:
- Luôn có viền hoặc nền để ô màu không bị “chìm” vào nền trắng, nhất là màu trắng hoặc màu pastel.
- Trạng thái được chọn không chỉ đổi màu viền; thêm dấu tick, viền đậm hơn hoặc nền khác biệt để người mù màu cũng nhận ra.
- Thêm nhãn cho trình đọc màn hình: “Màu đỏ gạch”, “Size M” chứ không chỉ tấm ảnh.
- Với màu hết hàng, không chỉ làm mờ; thêm gạch chéo và chữ “Hết hàng” cạnh ô.
- Kiểm tra bàn phím: người dùng có thể tab đến từng ô và bấm Enter để chọn không.
- Tránh đặt tên màu quá mơ hồ: “Xanh lạ”, “Màu hot”, “A1”, “B2” gây khó hiểu. Ví dụ tốt: “Đỏ gạch”, “Xanh navy”, “Be sữa”, “Trắng ngà”.
Một cách kiểm tra nhanh: gửi link sản phẩm cho người chưa từng thấy món đó, nhờ họ chọn màu và size trên điện thoại. Nếu họ phải dừng lại hỏi “bấm đâu?”, đó là dấu hiệu cần chỉnh.
Checklist chạy swatch chuẩn và lỗi thường gặp
Trước khi cho chạy chính thức, shop nên kiểm tra:
- Chọn từng màu, ảnh sản phẩm có đổi theo đúng không.
- Chọn size, giá, SKU, tồn kho có nhảy theo đúng biến thể không.
- Nút “Thêm vào giỏ” có thêm đúng màu + size đang chọn không.
- Trên mobile, ô màu và nút size có đủ lớn, không che nút mua không.
- Với màu hết hàng, khách có biết ngay trước khi bấm thêm vào giỏ không.
Lỗi thường gặp:
- Tạo swatch đẹp nhưng không gán ảnh biến thể, khách chọn màu nhưng ảnh vẫn cũ.
- Màu phẳng sai tông so với vải thực tế, ví dụ mã “kem” nhưng thực tế ngả vàng.
- Quá nhiều màu tương tự nhau, khách không biết khác gì.
- Không hiển thị trạng thái hết size, tạo cảm giác shop lơ là.
- Không kiểm tra sau khi cập nhật theme hoặc plugin, swatch đẹp một thời gian rồi lỗi lúc nào không hay.
Sau khi bật swatch, hãy theo dõi các chỉ số mình có sẵn: số lần thêm vào giỏ, tỷ lệ chuyển đổi, số tin nhắn hỏi “màu này ra sao”, “size nào vừa”. Nếu sau một thời gian thấy vẫn còn nhiều câu hỏi lặp lại, thường là do tên màu, ảnh swatch hoặc bảng size chưa đủ rõ.
Khi khách đã nhìn rõ màu và chọn đúng size, vẫn còn một bước phân vân: không biết món đó lên người mình ra sao. Một nút thử đồ ảo đặt cạnh nút “Thêm vào giỏ” có thể giúp khách tải ảnh toàn thân và xem mình mặc sản phẩm trong khoảng 15–40 giây, ngay trên chính ảnh sản phẩm shop đang dùng. Nếu shop muốn thử thêm bước này, bạn có thể đăng ký dùng thử miễn phí Macgi để xem widget hoạt động thế nào trên trang sản phẩm.
Câu hỏi thường gặp
Tôi có cần dùng app để tạo swatch không?
Không bắt buộc. Nhiều theme Shopify và WooCommerce đã có sẵn tùy chọn swatch. Với Haravan và Sapo, tùy giao diện đang dùng. Nếu theme cũ không hỗ trợ, dùng app hoặc nhờ developer chỉnh theme là cách nhanh nhất.
Nên dùng ảnh hay mã màu cho swatch?
Màu trơn nên dùng mã màu. Màu họa tiết, vải nhăn, ánh kim, ombre nên dùng ảnh chụp mảng vải thật. Đừng cố ép màu họa tiết thành một ô màu phẳng vì khách sẽ hiểu sai sản phẩm.
Swatch có làm chậm website không?
Nhiều swatch có thể làm trang nặng nếu dùng ảnh kích thước lớn. Hãy nén ảnh swatch, dùng ảnh vuông nhỏ và bật lazy load nếu có. Với màu phẳng, mã hex gần như không tốn tài nguyên.
Có nên hiển thị size dưới dạng swatch không?
Nên hiển thị size dưới dạng nút chữ, không phải chấm màu. Size nút giúp khách so sánh nhanh và tránh nhầm lẫn so với dropdown, đặc biệt trên điện thoại.
Làm sao để khách chọn size chính xác hơn?
Kết hợp nút size với bảng số đo rõ ràng ngay gần ô chọn size. Bảng size nên đo từ sản phẩm thực tế thay vì copy chung chung. Shop có thể tham khảo Cách đo quần áo để làm bảng size chuẩn cho shop online.
