Kích Thước Hình Ảnh Được Khuyến Nghị Cho Cửa Hàng (Giao Diện OS 3.0)
Hình ảnh bắt mắt đóng vai trò then chốt trong thành công của cửa hàng trực tuyến của bạn. Hình ảnh chất lượng cao, kết hợp với các kỹ thuật hiển thị chiến lược, có thể nâng cao thiết kế cửa hàng và ấn tượng của khách hàng. Các chủ đề OS 3.0 giới thiệu các loại phần mới và các tùy chọn bố cục cập nhật, mỗi loại có các khuyến nghị kích thước hình ảnh cụ thể.
Hướng dẫn này bao gồm kích thước hình ảnh được khuyến nghị cho từng phần OS 3.0, cùng với hướng dẫn tải lên và mẹo tối ưu hóa chất lượng và hiệu suất hình ảnh.
Kích Thước Hình Ảnh cho Các Phần Thương Mại
Các phần thương mại bao gồm các mô-đun tập trung vào sản phẩm và bộ sưu tập. Sử dụng các kích thước dưới đây để đảm bảo hình ảnh sản phẩm và bộ sưu tập hiển thị sắc nét trên các thiết bị.
Danh Mục Sản Phẩm Đặc Biệt
Phần Danh mục sản phẩm đặc biệt hiển thị các thẻ bộ sưu tập trên cửa hàng của bạn. Hình ảnh bìa thiết lập chủ đề hình ảnh tổng thể cho nhóm bộ sưu tập, trong khi hình ảnh được khuyến nghị là hình ảnh tùy chọn cho từng thẻ, làm nổi bật một bộ sưu tập riêng lẻ.
| Phần | Trường Hình Ảnh | Phiên Bản Máy Tính Để Bàn | Phiên Bản Di Động |
| Danh mục sản phẩm đặc biệt | Hình ảnh bìa | 600 × 600 px | Cùng kích thước với máy tính để bàn |
| Danh mục sản phẩm đặc biệt | Hình ảnh khuyến nghị cho thẻ bộ sưu tập | 105 × 105 px | Cùng kích thước với máy tính để bàn |
| Lưu ý: Hình ảnh bìa đại diện cho chủ đề tổng thể của nhóm bộ sưu tập. Hình ảnh được khuyến nghị là tùy chọn cho từng thẻ bộ sưu tập riêng lẻ; nếu không tải lên, hình ảnh bộ sưu tập mặc định sẽ được sử dụng. |
Bộ Sưu Tập Nổi Bật
Phần Bộ sưu tập nổi bật hiển thị các sản phẩm được tổ chức thành các tab theo bộ sưu tập. Phần này không yêu cầu tải lên hình ảnh riêng biệt ở cấp phần, vì tất cả hình ảnh được lấy tự động từ dữ liệu sản phẩm hiện có.
| Lưu ý: Không cần tải lên hình ảnh bổ sung cho phần này. Để cập nhật hình ảnh thẻ sản phẩm, hãy vào phần Sản phẩm trong bảng quản trị của bạn và cập nhật hình ảnh sản phẩm tại đó. |
Sản Phẩm Được Khuyến Nghị
Phần Sản phẩm được khuyến nghị làm nổi bật một bộ sưu tập duy nhất với hình ảnh nổi bật và danh sách sản phẩm được tuyển chọn. Phần này hỗ trợ hình ảnh riêng biệt cho máy tính để bàn và di động, với các khuyến nghị kích thước thay đổi tùy theo cài đặt bố cục được chọn.
Kích thước hình ảnh được khuyến nghị cho máy tính để bàn và di động theo bố cục:
| Bố cục | Kích thước đề xuất cho máy tính để bàn | Kích thước đề xuất cho thiết bị di động |
| Toàn màn hình | 2.880 × 1.400 px | 720 × 1.500 px |
| Bố cục 50% | 1.440 × 1.400 px | 720 × 760 px |
| Bố cục 70% | 2.000 × 1.400 px | 720 × 1.000 px |
| Lưu ý: Nếu không đặt kích thước cụ thể cho từng bố cục, kích thước đề xuất mặc định là 468 × 760 px (máy tính để bàn) và 355 × 100 px (thiết bị di động). Hình ảnh trên máy tính để bàn chiếm khoảng 30% chiều rộng trang, vì vậy hướng dọc là phù hợp nhất. |
Sản phẩm quảng bá truyền thông
Phần Sản phẩm quảng bá truyền thông kết hợp một đơn vị truyền thông (hình ảnh hoặc video) với một nhóm sản phẩm liên quan, cho phép bạn làm nổi bật một điểm bán hàng duy nhất cùng với các sản phẩm liên quan.
| Phần | Trường hình ảnh | Phiên bản máy tính để bàn | Phiên bản thiết bị di động |
| Sản phẩm quảng bá truyền thông | Hình ảnh poster video | 692 × 692 px | Giống máy tính để bàn |
| Sản phẩm quảng bá truyền thông | Hình ảnh sản phẩm trên máy tính để bàn | 650 × 650 px | Giống máy tính để bàn |
| Lưu ý: Mỗi nhóm truyền thông hỗ trợ một hình ảnh hoặc một video làm đơn vị truyền thông. Mỗi nhóm nên tập trung vào một sản phẩm hoặc điểm bán hàng duy nhất. |
Hình ảnh có thể mua hàng
Phần Hình ảnh có thể mua hàng có hình nền toàn chiều rộng với các điểm nóng sản phẩm có thể nhấp được phủ lên trên, cho phép khách hàng khám phá và mua sản phẩm trực tiếp từ hình ảnh.
| Phần | Trường hình ảnh | Phiên bản máy tính để bàn | Phiên bản thiết bị di động |
| Hình ảnh có thể mua hàng | Hình nền máy tính để bàn | 1.920 × 800 px | 375 × 580 px |
|
Lưu ý:
|
Video Mua Sắm
Phần Video mua sắm kết hợp các video ngắn với các thẻ sản phẩm liên quan, cho phép khách hàng xem và mua hàng trong cùng một mô-đun.
| Phần | Trường Hình Ảnh | Phiên Bản Máy Tính Để Bàn | Phiên Bản Di Động |
| Video mua sắm | Bìa nhóm video / hình ảnh poster | 790 × 1.300 px | 352 × 586 px |
| Lưu ý: Video là nội dung chính trong phần này. Thẻ sản phẩm bên dưới mỗi video được tự động điền từ bộ sưu tập liên kết; không cần hình ảnh thẻ sản phẩm riêng biệt. |
Danh Sách Bộ Sưu Tập
Phần Danh sách bộ sưu tập hiển thị một lưới các thẻ mục bộ sưu tập, giúp khách hàng có cái nhìn tổng quan trực quan về các danh mục sản phẩm trong cửa hàng của bạn.
| Phần | Trường Hình Ảnh | Phiên Bản Máy Tính Để Bàn | Phiên Bản Di Động |
| Danh sách bộ sưu tập | Hình ảnh thẻ bộ sưu tập (tùy chọn) | 1.080 × 1.080 px hoặc 1.080 × 1.350 px | Giống như trên máy tính để bàn |
| Lưu ý: Hình ảnh thẻ bộ sưu tập là tùy chọn. Mỗi hình ảnh thẻ nên đại diện cho một bộ sưu tập duy nhất; không trộn lẫn nhiều bộ sưu tập không liên quan trong một hình ảnh. |
Kích Thước Hình Ảnh Cho Các Phần Quảng Cáo
Các phần quảng cáo được sử dụng để kể chuyện thương hiệu, chiến dịch và trưng bày hình ảnh. Tải lên hình ảnh với kích thước đề xuất để tránh bị cắt trên các kích thước màn hình khác nhau.
Trình Chiếu
Phần Trình chiếu hiển thị một loạt hình ảnh hoặc banner toàn chiều rộng, thường được sử dụng cho hình ảnh chính, khuyến mãi hoặc chiến dịch theo mùa. Nó hỗ trợ hình ảnh riêng biệt cho máy tính để bàn và di động.
| Thiết bị | Kích thước đề xuất | Tỷ lệ khung hình |
| Máy tính để bàn | 1.920 × 650 px | 3:1 |
| Di động | 375 × 500 px | 3:4 |
| Lưu ý: Nếu bạn muốn tránh cắt ảnh, hãy chọn Điều chỉnh theo ảnh đầu tiên cho chiều cao ảnh và tắt cuộn parallax. |
Trình chiếu chia đôi
Phần Trình chiếu chia đôi hiển thị các slide toàn màn hình phù hợp với kích thước trình duyệt, tạo trải nghiệm kể chuyện sống động. Nó hỗ trợ hình ảnh riêng biệt cho máy tính để bàn và di động, với các khuyến nghị kích thước thay đổi tùy theo cài đặt bố cục được chọn.
Kích thước hình ảnh đề xuất cho máy tính để bàn và di động theo bố cục:
| Bố cục | Kích thước đề xuất cho máy tính để bàn | Kích thước đề xuất cho di động |
| Toàn màn hình | 2.880 × 1.400 px | 720 × 1.500 px |
| Bố cục 50% | 1.440 × 1.400 px | 720 × 760 px |
| Bố cục 70% | 2.000 × 1.400 px | 720 × 1.000 px |
| Lưu ý: Nếu không áp dụng cài đặt bố cục cụ thể, kích thước đề xuất mặc định là 1.920 × 650 px (máy tính để bàn) và 335 × 335 px (di động). |
Biểu ngữ hình ảnh
Phần Biểu ngữ hình ảnh hiển thị một hoặc hai hình ảnh cạnh nhau, thường dùng cho biểu ngữ quảng cáo hoặc hình ảnh chiến dịch.
| Phần | Trường hình ảnh | Phiên bản máy tính để bàn | Phiên bản di động |
| Biểu ngữ hình ảnh | Hình ảnh 1 | 960 × 650 px | Giống máy tính để bàn |
| Biểu ngữ hình ảnh | Hình ảnh 2 | 960 × 650 px | Giống máy tính để bàn |
Mô-đun hình ảnh-văn bản
Phần Mô-đun hình ảnh-văn bản kết hợp một hình ảnh với một khối văn bản, phù hợp để làm nổi bật tính năng sản phẩm, câu chuyện thương hiệu hoặc điểm bán hàng chính.
| Mục | Phiên bản máy tính để bàn | Phiên bản di động |
| Mô-đun hình ảnh-văn bản | 710 × 710 px | Giống như trên máy tính để bàn |
Danh sách Hình ảnh-Văn bản
Mục Danh sách hình ảnh-văn bản hiển thị một loạt các thẻ hình ảnh và văn bản theo bố cục lưới hoặc danh sách, phù hợp để trình bày nhiều tính năng, lợi ích hoặc danh mục cùng lúc.
| Mục | Phiên bản máy tính để bàn | Phiên bản di động |
| Danh sách hình ảnh-văn bản | 592 × 392 px | Giống như trên máy tính để bàn |
| Lưu ý: Tỷ lệ khung hình gốc được áp dụng; kích thước đề xuất ở trên là gợi ý dựa trên kích thước hiển thị điển hình. |
Chuyển đổi Hình ảnh khi Di chuột
Mục Chuyển đổi hình ảnh khi di chuột hiển thị các hình ảnh thay đổi khi khách hàng di chuột qua, tạo trải nghiệm duyệt tương tác.
| Mục | Phiên bản máy tính để bàn | Phiên bản di động |
| Chuyển đổi hình ảnh khi di chuột | 800 × 800 px | Giống như trên máy tính để bàn |
| Lưu ý: Chiều rộng đề xuất là 820 px. Chiều cao có thể điều chỉnh tự do. |
Văn bản Đa dạng
Mục Văn bản đa dạng hiển thị một khối văn bản được định dạng với hình nền tùy chọn, phù hợp cho thông điệp thương hiệu, thông báo hoặc nội dung biên tập.
| Mục | Phiên bản máy tính để bàn | Phiên bản di động |
| Văn bản đa dạng (hình nền) | 1,920 × 380 px | Giống như trên máy tính để bàn |
Video
Mục Video nhúng một video với hình ảnh poster tùy chọn hiển thị trước khi video phát.
| Mục | Phiên bản máy tính để bàn | Phiên bản di động |
| Video (ảnh bìa/ảnh poster) | 1,920 × 800 px | Giống như trên máy tính để bàn |
Hiển thị thành phần
Mục Hiển thị thành phần trình bày các thành phần, vật liệu hoặc bộ phận của sản phẩm theo định dạng hình ảnh có cấu trúc, phù hợp cho việc kể chuyện chi tiết về sản phẩm.
| Mục | Trường hình ảnh | Phiên bản máy tính để bàn | Phiên bản di động |
| Hiển thị thành phần | Ảnh thẻ (thẻ hình ảnh-văn bản) | 284 × 284 px | Giống như trên máy tính để bàn |
| Hiển thị thành phần | Ảnh nút bật lên | 580 × 580 px | Giống như trên máy tính để bàn |
| Hiển thị thành phần | Ảnh khu vực hiển thị (lớn) | 1,420 × 440 px | Giống như trên máy tính để bàn |
| Lưu ý: Ảnh khu vực hiển thị lớn có khả năng thích ứng cao và mặc định sẽ lấp đầy chiều rộng có sẵn. |
Trước & Sau
Mục Trước & Sau hiển thị hai hình ảnh cạnh nhau với một thanh chia có thể kéo, cho phép khách hàng so sánh kết quả hoặc hiệu ứng của sản phẩm.
| Mục | Phiên bản máy tính để bàn | Phiên bản di động |
| Trước & Sau (hình ảnh so sánh) | 1,420 × 580 px | Giống như trên máy tính để bàn |
Ảnh ghép
Mục Ảnh ghép kết hợp hình ảnh sản phẩm, hình ảnh bộ sưu tập và video tùy chọn trong bố cục kiểu khảm, phù hợp cho việc kể chuyện bằng hình ảnh và làm nổi bật chiến dịch.
| Mục | Phiên bản máy tính để bàn | Phiên bản di động |
| Ảnh ghép (ảnh poster video) | 854 × 1,240 px | Giống như trên máy tính để bàn |
| Lưu ý: Phần Collage phụ thuộc nhiều vào hình ảnh sản phẩm và bộ sưu tập để tạo thành bố cục hình ảnh. |
Mô-đun Hình ảnh-Văn bản Ghép Nối
Phần Mô-đun hình ảnh-văn bản ghép nối kết hợp một hình ảnh với một khối văn bản trong bố cục ghép nối, phù hợp để trình bày một sản phẩm cùng với các chi tiết hoặc câu chuyện chính của nó.
| Phần | Phiên bản Máy tính để bàn | Phiên bản Di động |
| Mô-đun hình ảnh-văn bản ghép nối | 792 × 700 px | Giống như trên máy tính để bàn |
Kích thước Hình ảnh cho Các Phần Bổ sung
Những phần này tăng thêm độ tin cậy và nội dung hỗ trợ cho cửa hàng của bạn. Tải lên hình ảnh với kích thước được đề xuất để có giao diện sạch sẽ, chuyên nghiệp.
Danh sách Logo
Phần Danh sách logo hiển thị một hàng các logo thương hiệu hoặc đối tác, thường được sử dụng để xây dựng độ tin cậy hoặc làm nổi bật các bài báo có đề cập đến cửa hàng.
| Phần | Phiên bản Máy tính để bàn | Phiên bản Di động |
| Danh sách logo (logo thương hiệu) | 328 × 328 px | Giống như trên máy tính để bàn |
Bản đồ
Phần Bản đồ hiển thị bản đồ vị trí cửa hàng cùng với hình nền tùy chọn, phù hợp cho các cửa hàng có địa điểm bán lẻ vật lý.
| Thiết bị | Kích thước Đề xuất |
| Máy tính để bàn | 900 × 528 px |
| Di động | 380 × 240 px |
Đồng hồ Đếm ngược
Phần Đồng hồ đếm ngược hiển thị đồng hồ đếm ngược với hình nền tùy chọn, phù hợp cho các chương trình khuyến mãi giới hạn thời gian hoặc ra mắt sản phẩm.
| Phần | Phiên bản Máy tính để bàn | Phiên bản Di động |
| Đồng hồ đếm ngược (hình ảnh) | 520 × 520 px | 355 × 355 px |
Blog
Phần Blog không yêu cầu tải lên hình ảnh riêng cho từng phần. Ảnh bìa thẻ blog được lấy tự động từ mô-đun Blog.
| Lưu ý: Để cập nhật hình ảnh bìa thẻ blog, hãy vào phần Blogs trong bảng quản trị của bạn và cập nhật hình ảnh bìa cho từng bài đăng blog tại đó. |
Bộ lọc đa cấp
Phần Bộ lọc đa cấp hiển thị thanh điều hướng danh mục với hình nền tùy chọn, cho phép khách hàng duyệt sản phẩm theo nhiều cấp độ bộ lọc.
| Phần | Phiên bản máy tính để bàn | Phiên bản di động |
| Bộ lọc đa cấp (hình nền) | 1.920 × 450 px | Giống phiên bản máy tính để bàn |
Trang tùy chỉnh
Phần Trang tùy chỉnh cho phép bạn tạo một trang hoàn toàn tùy chỉnh với hình ảnh bìa tùy chọn cho cả máy tính để bàn và di động.
| Thiết bị | Trường hình ảnh | Kích thước đề xuất |
| Máy tính để bàn | Hình ảnh bìa máy tính để bàn | 1.420 × 580 px |
| Di động | Hình ảnh bìa di động | 355 × 360 px |
| Lưu ý: Hình ảnh bìa trang tùy chỉnh là tùy chọn và có thể bỏ qua nếu không cần thiết. |
Kích thước hình ảnh cho trang Bộ sưu tập
Trang Bộ sưu tập hiển thị các sản phẩm trong một bộ sưu tập cụ thể.
Hình ảnh bộ sưu tập
Phần Hình ảnh bộ sưu tập cung cấp tiêu đề hình ảnh cho trang bộ sưu tập trên thiết bị di động.
| Yếu tố | Phiên bản di động |
| Hình ảnh banner di động | 1.920 × 380 px |
Thẻ khuyến mãi
Thẻ khuyến mãi là một phần riêng biệt trong danh sách sản phẩm trên trang Bộ sưu tập. Nó có thể được di chuyển bằng cách kéo để kiểm soát vị trí xuất hiện giữa các thẻ sản phẩm. Kích thước hình ảnh của nó được điều chỉnh động dựa trên chiều rộng trang, số cột sản phẩm và cấu hình thẻ sản phẩm, do đó không có kích thước mặc định cố định áp dụng.
| Yếu tố | Phiên bản di động |
| Chiều rộng hình ảnh thẻ khuyến mãi | Theo chiều rộng hình ảnh sản phẩm |
| Chiều cao hình ảnh thẻ khuyến mãi | Thích ứng để lấp đầy chiều cao hàng của thẻ sản phẩm cao nhất trong cùng hàng |
Mẹo Tải Ảnh Lên để Hiệu Suất Tốt Hơn
- Tối đa hóa chất lượng ảnh: Tải lên các ảnh gốc lớn nhất có thể để giữ lại chi tiết và cho phép thay đổi kích thước mà không bị mất chất lượng.
- Tối ưu hóa tốc độ: Chọn .jpg thay vì .png để tải trang nhanh hơn. Chủ đề tự động thay đổi kích thước ảnh để xem trang hiệu quả.
- Ưu tiên di động cho ảnh sản phẩm: Vì bố cục ảnh sản phẩm có thể điều chỉnh trên máy tính để bàn, hãy tập trung tối ưu hiển thị ảnh sản phẩm cho thiết bị di động.
- Duy trì tỷ lệ nhất quán: Sử dụng cùng tỷ lệ khung hình cho tất cả ảnh trong cùng một phần để đảm bảo vẻ ngoài đồng nhất, chuyên nghiệp.
- Căn giữa các yếu tố chính: Khi tải ảnh cho các phần có chiều cao cố định (như Trình chiếu hoặc Biểu ngữ ảnh), hãy căn giữa các yếu tố thiết kế chính để tránh bị cắt trên các thiết bị khác nhau.
Câu hỏi Thường Gặp về Kích thước Ảnh trong OS 3.0
Câu 1 Tại sao một số ảnh của tôi bị cắt?
Chủ đề điều chỉnh kích thước ảnh để phù hợp với các độ rộng màn hình và thiết bị khác nhau, điều này có thể gây ra việc cắt ảnh vì các lý do sau:
- Các thành phần có chiều cao cố định: Để giữ cho văn bản dễ đọc, các phần như Trình chiếu và Biểu ngữ ảnh có chiều cao cố định mặc định có thể không khớp với kích thước chính xác của ảnh bạn.
- Các thành phần có tỷ lệ khung hình cố định: Nếu một phần sử dụng tỷ lệ khung hình cố định, việc cắt tự động sẽ xảy ra. Ảnh được cắt từ trung tâm theo mặc định trừ khi bạn điều chỉnh cài đặt khu vực hiển thị ảnh.
- Xử lý ảnh đáp ứng: Nhiều phần sử dụng xử lý đáp ứng, phóng to và cắt ảnh rộng để đảm bảo hiển thị nhất quán trên PC và di động. Ảnh của bạn được phóng to để phủ đầy khu vực hiển thị, cho phép thay đổi kích thước mà không bị kéo giãn hay méo mó.
Câu 2 Tại sao ảnh của tôi vẫn bị cắt ngay cả khi đã chọn Tự động phù hợp ảnh?
Nếu hiệu ứng cuộn parallax được bật, ảnh vẫn có thể bị cắt. Để duy trì hiệu ứng parallax, ảnh được tự động phóng to và cắt khi kích thước vượt quá khu vực hiển thị. Tắt cuộn parallax trong cài đặt phần nếu bạn cần hiển thị toàn bộ ảnh.
Câu 3 Tôi có thể làm gì nếu ảnh của tôi không hiển thị đầy đủ mặc dù đã dùng kích thước được khuyến nghị?
Kiểm tra hai cài đặt sau:
- Khu vực hiển thị hình ảnh: Một số phần có cài đặt khu vực hiển thị hình ảnh có thể giới hạn những gì hiển thị. Hãy chắc chắn rằng bạn đã chọn Tự động cho cài đặt này.
- Cuộn Parallax: Một số chủ đề sử dụng hiệu ứng cuộn parallax làm phóng to hình nền, gây ra việc cắt xén. Nếu bạn không cần hiệu ứng này, hãy tắt nó trong cài đặt chủ đề.
Bài viết này được dịch bằng AI và có thể chứa sai sót. Để có thông tin chính xác nhất, vui lòng tham khảo phiên bản tiếng Anh gốc.