Code CSS từ forum: 4 bước trước khi áp dụng trên store Shopify của bạn

Câu sau hỏi vì sao đổi quốc gia mà giá vẫn hiện bảng Anh (GBP).

Cả hai đều có lời giải ngay trong ngày, theo hai cách rất khác nhau. Form email được căn giữa bằng vài dòng CSS dán vào đúng section đó, còn chuyện tiền tệ không cần dòng code nào.

Hai câu trả lời ấy là hai bước đầu khi sửa một chi tiết giao diện: xem cài đặt có sẵn, và dán code vào chỗ hẹp nhất. Những thread khác trên forum bổ sung hai bước còn lại, là thử trên bản sao theme và chỉ giữ thay đổi khi số liệu bán hàng tốt lên.

1. Xem phần cài đặt trước khi tìm code

Ở câu hỏi tiền tệ, chủ store đã thêm bộ chọn quốc gia vào header, nhưng quốc gia nào cũng hiện GBP. Người trả lời giải thích bộ chọn vẫn chạy đúng, vì đơn vị tiền lấy từ Settings > Markets chứ không lấy từ theme, nên nếu mọi quốc gia đều để GBP thì chỗ nào cũng hiện GBP. Người này cũng lưu ý store cần dùng Shopify Payments thì mới có thể bán bằng nhiều loại tiền.

Một chủ store khác dùng theme Dawn muốn nút chọn size thành ô vuông có viền, giống nút Add to cart. Một người trả lời cho biết phần lớn việc này làm được mà không cần code, bằng cách chỉnh Border thickness, Border opacity và Corner radius trong Theme settings > Variant pills. CSS chỉ cần thêm để các ô có cùng kích thước.

Code tự thêm có thể hỏng sau khi cập nhật theme, như người gửi code trong thread về theme Enterprise đã dặn.

2. Thử trên bản sao theme, vì store demo không phải store của bạn

Khi cài đặt không đáp ứng đủ, code từ forum thường là cách xử lý nhanh, miễn là bạn thử nó trên một bản sao theme (Duplicate) trước. Từ cuối tháng 9 đến giữa tháng 10, ít nhất ba người trên Shopify Community đã dặn điều này: người gửi code trong thread Enterprise, một người trả lời trong thread về theme Royce, và tác giả một bài hướng dẫn chỉnh độ tương phản màu.

Lời dặn đó là có lý do. Trong một thread về theme Dawn, chủ store muốn đưa giá lên cạnh tên sản phẩm trên trang collection. Đoạn code đầu tiên được thử trên store demo của Dawn, kèm lưu ý markup (cấu trúc HTML) trên store thật có thể khác, và chủ store dán vào rồi trả lời là không chạy.

Người trả lời viết lại phiên bản thứ hai cho khớp với trang thật, rồi một người khác gửi thêm phiên bản thứ ba. Tính đến ngày 26/10, chủ store vẫn chưa xác nhận trong thread là đã ổn.

Bản sao còn giúp tách lỗi khi vấn đề phức tạp hơn. Với ngăn giỏ hàng (cart drawer) mở ra mà trống trên Royce, người trả lời gợi ý cài thêm một bản Royce mới chưa chỉnh sửa gì; nếu bản đó cũng lỗi, bạn có thể mang kết quả kiểm tra tới nhà phát triển theme. Người gửi code trong thread Enterprise cũng lưu ý Shopify Support không xử lý lỗi do code lấy từ forum.

3. Dán vào chỗ hẹp nhất, rồi xem trên hai khổ màn hình

Chỗ bạn dán code quyết định nó ảnh hưởng tới đâu. Ở thread căn giữa form email, cùng một yêu cầu có hai cách: dán vào Custom CSS của section Email signup, hoặc dán vào file theme.liquid. Chủ store chọn cách thứ nhất và cho biết cách này có vẻ đã giải quyết được vấn đề.

Bảng dưới đây tóm tắt ba chỗ dán xuất hiện trong các thread trên:

Sau khi dán, hãy xem kết quả trên cả máy tính lẫn điện thoại vì có những đoạn code chỉ nhắm vào một khổ màn hình. Chẳng hạn đoạn đổi thứ tự trên trang sản phẩm Enterprise chỉ áp dụng ở khổ điện thoại.

4. Giữ thay đổi khi khách mua nhiều hơn, không phải khi trang giống ảnh mẫu

Với chỉnh sửa chỉ để trang gọn mắt hơn, như căn giữa một form, kiểm tra không có gì bị vỡ là đủ. Còn những thay đổi đụng tới những chỗ khách chọn và mua sản phẩm thì phải cần thêm một bước đo.

Trong thread Enterprise, chủ store muốn đưa tên, đánh giá và giá lên trên ảnh sản phẩm khi xem trên điện thoại, giống một ảnh mẫu. Một thành viên khác góp ý nên thử thứ tự mới trên một template sản phẩm trước, và giữ giá, lựa chọn biến thể cùng nút Add to cart ở gần nhau.

Người này đề nghị so sánh tỷ lệ thêm vào giỏ (add-to-cart rate) và doanh thu trên mỗi lượt truy cập (revenue per visitor) giữa hai bố cục, trên lượng truy cập tương đương. Theo người này, cách đo đó “sẽ cho bạn biết việc dời chỗ có giúp người mua chọn hay không, chứ không chỉ là trang có giống ảnh mẫu hơn không”.

Đo trên chính store của mình quan trọng vì cùng một thay đổi có thể cho các kết quả ngược nhau.

Anya Geimanson, CEO của công cụ thử nghiệm Visually, kể trong một bài giới thiệu công cụ rằng một thương hiệu trên Shopify tăng 5,9% tỷ lệ chuyển đổi (conversion rate) nhờ ẩn ô chọn màu trên trang collection bản điện thoại.

Cũng trong bài đó, Geimanson viết: “Tôi đã thấy thử nghiệm này thắng ở một số thương hiệu và thua ở những thương hiệu khác.”

Chỉ số bạn chọn cũng có thể thay đổi kết luận. Daniel Budai, người làm thử nghiệm cho các khách hàng thương mại điện tử qua Budai Media, chia sẻ một thử nghiệm trang sản phẩm gồm ba thay đổi:

• Thiết kế lại phần đầu trang cho thông tin sản phẩm gọn hơn
• Thêm thông tin về độ vừa (fit), đổi trả, giao hàng miễn phí và thanh toán an toàn ngay dưới phần thông tin chính
• Gom phần mô tả dài vào một mục thu gọn

Đây là thay đổi lớn hơn một đoạn CSS, nhưng cách chấm kết quả vẫn áp dụng được. Theo số liệu Budai tự công bố về một khách hàng, tỷ lệ chuyển đổi gần như đứng yên, chỉ tăng 1,21%, trong khi giá trị đơn hàng trung bình (AOV) tăng 7,61% và doanh thu trên mỗi lượt truy cập tăng 13,06%.

Budai viết rằng nếu chỉ chấm thử nghiệm này bằng tỷ lệ chuyển đổi, nó “trông chỉ như một chiến thắng nhỏ, trong khi thực ra là một chiến thắng rõ”.

Vì vậy, với thay đổi trên trang sản phẩm, hãy nhìn doanh thu trên mỗi lượt truy cập bên cạnh tỷ lệ chuyển đổi trước khi quyết định giữ hay bỏ.

Tuỳ vào chỗ bạn sửa mà thực hiện theo bước phù hợp

Quay lại store ảnh nghệ thuật ngày 25/10: một việc chỉ cần mở đúng phần cài đặt, một việc cần vài dòng CSS dán vào một section. Cả hai đều không đụng tới cách khách chọn sản phẩm, nên không cần đến bước đo.

Bước thứ tư dành cho những thay đổi nằm gần nút mua, như dời tên và giá lên trên ảnh hay ẩn ô chọn màu. Với những thay đổi đó, hãy để tỷ lệ thêm vào giỏ và doanh thu trên mỗi lượt truy cập của chính store bạn quyết định, vì kết quả ở một thương hiệu khác chưa chắc lặp lại ở store mình.