Trung tâm trợ giúp Khách hàng - 
Hotline: 1900 6750

Checklist chung

Checklist review giao diện submit lên kho Sapo

Bạn nên dựa trên checklist này để xây dựng giao diện, đây chính là checklist được Sapo dựa vào và đánh giá giao diện của bạn.

Checklist có thể tải về dưới dạng file Excel Checklist review theme


Trong checklist này bao gồm các nội dung:


Những yêu cầu chung đối với giao diện

Yêu cầu chung

  • Nội dung nhập vào từ các khung nội dung (h1 - h4, blockquotes, ul, ol, etc.) cần phù hợp với giao diện và thống nhất với nhau

  • Layout responsive

  • Những file css có chỉnh sửa không được để min và style inline (nên dùng scss hệ thống Sapo có thể tự động min file)

  • Không được cắt tên sản phẩm hay tiêu đề

  • Không để style mặc định của themebase khi triển khai

  • Không có các nội dung rỗng, các trang không có sản phẩm hay tin tức rỗng, các link rỗng hoặc link #

  • Breadcrum để đầy đủ

  • Hoạt động bình thường trên các trình duyệt IE9+, Safari, Chrome, Firefox, Edge

  • Giao diện chứa Open Graph

  • Giao diện cần sử dụng script sau:{{ 'option-selectors.js' | bizweb_asset_url | script_tag }}

  • Assets phải sử dụng URLs protocol độc lập

  • Giao diện phải hiển thị đúng các phiên bản khác nhau của sản phẩm được người dùng thêm vào trong trang quản trị

  • Chiều cao banner, slide không cao quá 1 màn hình

  • Ảnh sản phẩm không trùng lặp

  • Màu sắc chữ không trùng với màu nền

Về phần thiết lập giao diện

  • Phải đảm bảo tất cả các thiết lập trong giao diện hoạt động một cách bình thường bằng cách tạo site dùng thử, cài đặt file giao diện lên site dùng thử, check lại tất cả các thiết lập của theme trong trang Thiết lập giao diện có tác dụng hay không?

     ( Tất cả các thiết lập phải hiển thị chuẩn xác trên site dùng thử )

Về hình thức

  • Chiều cao banner, slide không cao quá 1 màn hình

  • Ảnh sản phẩm không trùng lặp

  • Màu sắc chữ không bị lẫn vào màu nền

Menu tối thiểu phải có:

  • Trang chủ

  • Giới thiệu

  • Sản phẩm

  • Tin tức

  • Liên hệ

Phần header phải có:

  • Giỏ hàng, thanh tìm kiếm, đăng ký, đăng nhập, yêu thích phải hoạt động ổn định

  • Logo - có link trở lại trang chủ ở logo

Chân trang theo chuẩn:

  • Không có quá 4 case menu

  • Nên có Logo, địa chỉ, hotline gắn link tel, email gắn link mailto

  • Chân trang bắt buộc có dòng :

    © Bản quyền thuộc về ABC Theme | Cung cấp bởi Sapo

    (ABC Theme là tên đối tác gắn link nofollow tới website nếu có, chữ Sapo gắn link tới sapo.vn)

  • Sapo gắn link sapo.vn (đặt nofollow)

  • Giao diện phải hiển thị đúng các phiên bản khác nhau của sản phẩm được người dùng thêm vào trong trang quản trị.

Tốc độ load trang:

  • Không quá 5s

Số request:

  • Không quá 100

Test cho giao diện tablet, mobile layout đảm bảo các tiêu chí sau:

  • Hiển thị đủ nội dung chính như trên bản desktop

  • Trong phần thiết lập giao diện có phần setting địa chỉ (địa chỉ mặc định trong phần Cấu hình/Địa chỉ cửa hàng)

Điểm google page speed insight:

  • 80 điểm trở lên với Desktop, 70 điểm trở lên với Mobile

  • Điểm Google Speed Insight phải được đảm bảo ở các trang sau:

  • Trang chủ
  • Trang collection
  • Trang sản phẩm
  • Trang blog
  • Trang bài viết

(linkcheck: https://developers.google.com/speed/pagespeed/insights/)


Site demo

  • Mỗi giao diện có ít nhất 1 site demo

  • Site demo sử dụng phiên bản mới nhất của giao diện

  • Site demo phải hiển thị  những loại sản phẩm sau đây:

    • Sản phầm đang bán (hiển thị trên trang chủ)

    • Sản phẩm đã bán hết (hiển thị trên trang chủ)

    • Sản phẩm có nhiều biến thể (variant) (có ít nhất 1 sản phẩm có các biến thể mà các biến thể này có ảnh và giá khác nhau hiển thị trên trang chủ)

    • Sản phẩm có nhiều hình ảnh

  • Site demo phải có lựa chọn cổng thanh toán và phương thức vận chuyển trong trang checkout

  • Site demo cần gọi đúng trạng thái thanh toán và trạng thái giao hàng (thuộc chi tiết đơn hàng) trong trường hợp khách hàng đăng nhập tài khoản vào site.


Tối ưu hóa công cụ tìm kiếm (Chuẩn SEO)

  • Đối tác sẽ phải kiểm tra và thực hiện đúng như checklist SEO do Sapo gửi

  • Các thẻ heading cần được trau chuốt phục vụ cho SEO

  • Tất cả hình ảnh phải có alt text

  • Đáp ứng được checklist SEO cuả Sapo


Khả năng truy cập

  • Form inputs có các nhãn kèm theo thuộc tính, bao gồm các nhãn trong thiết lập giao diện, các form ngắn bao gồm thuộc tính aria-label

    Giao diện được tạo bởi ngôn ngữ HTML hợp lệ (Có thể kiểm tra bằng  W3C Markup Validator)


Recommendations

  • Giao diện nên bao gồm nhiều presets. (tối đa là 3)

  • Giao diện có tính năng sắp xếp sản phẩm trong danh mục sản phẩm


Yêu cầu đối với file giao diện mẫu

index.bwt

index.bwt của giao diện của bạn phải đạt được những điều kiện sau:

  • Các Trang nội dung, Danh mục sản phẩm, Blog dùng để hiện thị có thể thiết lập được trong Thiết lập giao diện

  • Các sản phẩm được hiển thị dưới dạng lưới hoặc danh sách, có thể thiết lập được trong thiết lập giao diện.

  • Ảnh slide/banner có thể thay thế trong Thiết lập giao diện.

    Nếu trang chủ có 1 slideshow, những yêu cầu dưới đây cần phải đảm bảo:

    • Khối slideshow hoặc mỗi ảnh slide có thể tắt/bật hiển thị theo ý muốn

    • Kích thước ảnh để slide hiển thị tốt nhất phải được đưa ra trong Thiết lập giao diện

    • Layout không bị vỡ khi khi slide có kích thước khác nhau

    • Slide có thể gắn đường dẫn đến trang khác và có thể thay đổi đường dẫn này

product.bwt

product.bwt phải đáp ứng đủ các điều kiện sau

  • Thông tin sản phẩm

  • Tên sản phẩm đầy đủ

  • Giá

  • Tình trạng còn hàng của sản phẩm

  • Mô tả về sản phẩm

  • Ảnh chính của sản phẩm phải được hiển thị nổi bật

  • Ảnh phụ của sản phẩm, hiển thị dạng ảnh nhỏ

  • Các tỉ lệ kích thước khác nhau của ảnh không làm vỡ layout

  • Ảnh nhỏ có thể xem dạng đầy đủ

  • Ảnh phiên bản sản phẩm phải được nhìn thấy khi chọn phiên bản sản phẩm khác nhau

Các chức năng mua hàng:

  • Lựa chọn cho phiên bản sản phẩm.

  • Nút Thêm vào giỏ hàng phải được thay đổi trạng thái tùy theo trạng thái tồn kho của sản phẩm.

  • Nếu sản phẩm có nhiều biến thể (variant) thì khi đổi biến thể, thì phải update lại giá và trạng thái.

  • Các nút chia sẻ đến các mạng xã hội như Twitter, Facebook, Google+ (có hoặc không)

  • Hiển thị giá, giá so sánh theo các tùy chọn của sản phẩm, có thông báo hết hàng đối với sản phẩm.

  • Hiển thị tùy chọn đầu tiên có sẵn khi tải trang

  • Các sản phẩm cũng phải có đầy đủ các thông tin về tên, giá, mô tả, thông tin để SEO

  • Phải có Google’s Rich Snippets

  • Các sản phẩm không bị nhẩy, các sản phẩm phải thẳng hàng nhau

  • Sản phẩm 0đ chuyển giá thành liên hệ, ẩn nút mua hàng và số lượng

  • Ảnh nhỏ trong chi tiết sản phẩm không bị méo, khoảng cách bằng nhau

  • Ảnh nhỏ trong chi tiết sản phẩm khi chuyển không bị méo ảnh

  • Nút mua hàng nhanh khi hiển thị popup báo sản phẩm vừa mua

  • Khi mua hàng hiển thị popup mua hàng của sản phẩm không có ảnh thì cũng phải có ảnh no-image

collection.bwt

collection.bwt của giao diện của bạn cần thỏa mãn những yêu cầu sau đây:

  • Hiển thị đúng tên danh mục

  • Đầy đủ thông tin SEO

  • Phải giữ được trạng thái sắp xếp khi load lại

  • Sản phẩm được liệt kê dưới dạng lưới hoặc dạng danh sách cần có các thuộc tính sau:

    • Tên sản phẩm (không cắt cụt, có dẫn link đến trang chi tiết sản phẩm)

    • Giá sản phẩm

    • Ảnh sản phẩm

  • Lưới sản phẩm không được vỡ, ngay cả khi hình ảnh sản phẩm thay đổi tỉ lệ các khía cạnh

  • Icon Sale hoặc giá so sánh được hiển thị phù hợp

  • Hiển thị thông báo nếu 1 danh mục không có sản phẩm nào trong đó.

  • Sử dụng bộ lọc cho danh mục sản phẩm (hướng dẫn tạo bộ lọc theo link ).

Recommendation: Nếu 1 sản phẩm có nhiều loại và giá cả khác nhau, nên dùng product.price_varies  để thể hiện các mức giá khác nhau. (Ví dụ: from product.price_min to product.price_max.)

Đánh số trang phù hợp

Sản phẩm 0đ chuyển giá thành liên hệ, nút mua hàng ẩn hoặc chuyển vào trang chi tiết

cart.bwt

cart.bwt của bạn phải đảm bảo những yêu cầu sau:

  • Giỏ hàng cần hiển thị đầy đủ các thông tin

  • Tên sản phẩm - line_item.title

  • Ảnh sản phẩm - line_item.image

  • Giá sản phẩm - line_item.price

  • Số lượng sản phẩm - line_item.quantity

  • Tổng giá của giỏ hàng hiển thị rõ ràng

  • Có nút checkout ngay bên dưới giỏ hàng, điều hướng người dùng tốt

  • Có thể cập nhật thêm sản phẩm vào giỏ hàng hoặc xóa sản phẩm trong giỏ

  • Hiển thị số lượng sản phẩm trong giỏ hàng và có thể thay đổi số lượng sản phẩm trong giỏ

blog.bwt

blog.bwt mẫu phải đạt được những điều kiện sau đây:

  • Tiêu đề của blog phải được hiển thị rõ ràng

  • Mỗi bài viết hiển thị các thông tin sau:

    • article.published_on hoặc article.created_on (Ngày viết)

    • article.author (Tác giả)

    • article.tags (có thể sử dụng hoặc không)

    • article.comments (các bình luận của bài viết)

    • article.image (ảnh đại diện của bài viết)

  • Hiển thị trên danh sách tin tức hoặc chi tiết tin tức hoặc cả hai

  • Có thể chia sẻ trên mạng xã hội (có hoặc không)

  • Sử dụng article.summary_or_content, article.content hoặc article.summary

  • Phân trang nếu cần thiết

  • Phải có Google’s rich snippets

  • Trang blog tin tức không có ảnh cần có ảnh no-image

  • Trang chi tiết tin tức tag và share hiển thị hợp lý và các icon thẳng hàng nhau

  • Danh sách bình luận phải có phân trang

  • Form gửi bình luận cần có thông báo rõ ràng và chi tiết, dễ hiểu

  • Email của form gửi bình luận bắt đúng định dạng

article.bwt

Một mẫu article.bwt của 1 giao diện phải đạt được những yêu cầu sau:

  • Article hiển thị những thông tin sau đây

    • article.published_on hoặc article.created_on (ngày viết)

    • article.author (người viết)

    • article.tags (có thể có hoặc không)

    • article.comments (bình luận của bài viết yêu cầu phân trang)

    • article.image (ảnh đại diện bài viết)

  • Hiển thị trên danh sách tin tức hoặc chi tiết tin tức hoặc cả hai

  • Có thể chia sẻ trên mạng xã hội (có hoặc không)

  • Liên kết đến bài viết tiếp theo hoặc bài viết trước đó. Dùng blog.previous_article and blog.next_article bình luận thành công hoặc bị lỗi cần có thông báo

  • Phải có Google’s rich snippets

page.bwt

Mẫu page.bwt phải đạt được những yêu cầu sau:

  • Style của các nội dung trong các trang này phải thống nhất với style của các nội dung ở blog, miêu tả sản phẩm

list-collections.bwt

  • Nếu không có ảnh đại diện cho bộ sưu tập, tải ảnh của sản phẩm đầu tiên trong bộ sưu tập đó để thay thế.

  • Các kết quả phải được phân trang chỉn chu

  • Đưa ra thông báo nếu không tìm ra kết quả nào

404.bwt

Mẫu 404.bwt của giao diện phải đáp ứng các điều kiện:

  • Thông báo rõ ràng là trang web không truy cập được

  • Đưa ra lựa chọn để tiếp tục (back về trang chủ, thanh tìm kiếm...)

customers/account.bwt

  • Hiển thị các đơn hàng gần đây của khách hàng

  • Hiển thị địa chỉ mặc định của khách hàng.

  • Liên kết đến trang địa chỉ

  • Các đơn hàng của khách hàng cần được phân trang.

  • Cập nhật trạng thái hủy đơn hàng, làm nổi bật trạng thái hủy đơn hàng

  • Các nút quay lại trang tài khoản cần có style dễ nhìn và đồng nhất với các button khác

  • Nút quay lại trang tài khoản không thể có style to hơn tiêu đề trang

customers/addresses.bwt

  • Địa chỉ khách hàng được phân trang rõ ràng

  • Có thể tạo ra điạ chỉ mới

  • Người dùng có thể xóa, sửa địa chỉ hiện tại

  • Các tin nhắn thông báo lỗi phải hiển thị rõ ràng

customers/login.bwt

  • Có form khôi phục lại mật khẩu

customers/order.bwt

  • Hiển thị cả địa chỉ thanh toán và vận chuyển của đơn hàng

  • Có 1 bảng liệt kê các line_items của đơn hàng. Bảng này nên hiển thị:

    • Line_item.title (tên sản phẩm liên kết với chi tiết sản phẩm)

    • Line_item.price (giá sản phẩm)

    • Line_item.line_price (tổng tiền của từng sản phẩm)

    • Subtotal of the order (tổng tiền của tất cả sản phẩm trong đơn hàng)

    • Tổng tiền giảm giá

    • Tổng tiền thanh toán của đơn hàng

customers/register.bwt

  • Các thông báo về lỗi được hiển thị rõ ràng

customers/reset_password.bwt

  • Các thông báo về lỗi được hiển thị rõ ràng

settings_schema.json 

File settings_schema.json trong giao diện của bạn điều khiển các lựa chọn thiết lập giao diện khả dụng với merchants trên trang thiết lập giao diện. File settings_schema.json phải đáp ứng những yêu cầu như sau:

  • Không nên có quá nhiều hoặc quá ít các phần thiết lập giao diện

  • Không được có sự thiết lập nhằm loại bỏ link “Cung cấp bởi Sapo” ở footer

  • Logo upload lên phải phù hợp với các hình ảnh của các tỉ lệ khác nhau (Ví dụ landscape vs portrait)

  • Ảnh logo phải được đặt tên logo.png

  • Có các cài đặt biểu tượng mạng xã hội. Khách hàng phải có khả năng nhập URL của các trang xã hội của họ, và các URL phải được áp dụng cho các biểu tượng tương ứng của họ

  • Tất cả các cài đặt ảnh đều có 1 ID kết thúc với đuôi .jpg, .png, .svg

  • Tất cả các cài đặt phải có nhãn (label)

Có thể có phần cái đặt thông tin của store, logo là tùy chọn

theme.bwt (layout file)

  • Logo hoặc store.name phải có trên đầu trang và được đặt đường dẫn về trang chủ.

  • Menu chính phải được sử dụng dữ liệu từ menu "Main menu"

  • Nếu sử dụng menu ở footer thì phải sử dụng dữ liệu từ menu "Footer".

  • Thêm hiệu ứng khi hover vào các menu

  • Nếu khách hàng đăng nhập vào, dẫn link vào trang tài khoản

  • Có khung tìm kiếm ở đầu trang và chân trang (ở chân trang có thể có hoặc không)

  • Phải linh động hiển thị code chuẩn SEO cho tiêu đề, mô tả meta, nội dung trùng lặp, vv

  • Khai báo <!DOCTYPE html>

Pop-up xem nhanh

  • Pop-up xem nhanh có link tên và ảnh sản phẩm trỏ về trang chi tiết

  • Xem nhanh có đường dẫn vào chi tiết sản phẩm

  • Xem nhanh nên chỉ hiển thị trong 1 màn hình và tránh để tình trạng có thanh cuộn

  • Xem nhanh nhưng vẫn phải có hiển thị các variant đầy đủ và các giá kèm theo variant đó


Bài viết trên có hữu ích cho bạn không? Hữu ích Không hữu ích Số lượt đánh giá hữu ích: