Hướng Dẫn Kích Thước Hình Ảnh (Giao Diện OS Phiên Bản 2.1)
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. Hướng dẫn này cung cấp kích thước hình ảnh được khuyến nghị cho các mô-đun và thành phần khác nhau, cùng với câu trả lời cho các câu hỏi thường gặp về việc tải hình ảnh lên.
Kích Thước Hình Ảnh Cho Các Thành Phần Cửa Hàng Cơ Bản
Hình Ảnh Sản Phẩm
Nơi Tải Hình Ảnh Lên: Vào phần Sản phẩm trong bảng điều khiển quản trị SHOPLINE của bạn. Chọn sản phẩm cụ thể mà bạn muốn thêm hình ảnh, tiếp tục đến mô-đun Hình ảnh/video, và nhấp vào Thêm hình ảnh (hoặc kéo thả) để tải lên.
Vì bố cục hình ảnh sản phẩm có thể điều chỉnh trên phiên bản PC, SHOPLINE khuyến nghị tập trung tối ưu hiển thị hình ảnh sản phẩm cho thiết bị di động. Có bốn tỷ lệ hình ảnh để bạn lựa chọn: hình vuông (1:1), chân dung (2:3), phong cảnh (4:3), và nguyên bản. Chọn tỷ lệ phù hợp nhất với hình dạng sản phẩm của bạn.
| Tỷ Lệ Khung Hình Được Khuyến Nghị | 2:3 | |
|
Kích Thước Tối Thiểu (Chiếm 75% chiều rộng trên thiết bị di động) |
|
|
|
Kích Thước Được Khuyến Nghị (Hình ảnh trên trang chi tiết) |
|
|
| Lưu ý: Nên duy trì tỷ lệ hình ảnh đồng nhất cho tất cả các hình ảnh sản phẩm để đảm bảo sự đồng đều và tránh sự khác biệt về chiều cao sản phẩm, điều này có thể ảnh hưởng đến trải nghiệm duyệt của khách hàng. |
Ảnh Bìa Bộ Sưu Tập
Nơi Tải Hình Ảnh Lên: Truy cập Sản phẩm > Bộ sưu tập trong bảng điều khiển quản trị SHOPLINE của bạn. Chọn bộ sưu tập cụ thể mà bạn muốn thêm ảnh bìa. Vào phần Ảnh bìa bộ sưu tập để tải hình ảnh lên.
| Tỷ Lệ Khung Hình Được Khuyến Nghị | 1:1 |
| Kích Thước Được Khuyến Nghị | ≥ 1600 pixel |
Biểu ngữ Bộ sưu tập
Nơi tải hình ảnh lên: Truy cập Sản phẩm > Bộ sưu tập trong bảng quản trị SHOPLINE của bạn. Chọn bộ sưu tập mà bạn muốn thêm biểu ngữ. Tìm phần Biểu ngữ bộ sưu tập để tải hình ảnh lên.
| Kích thước đề xuất |
|
|
| Lưu ý: Chiều rộng hình ảnh thay đổi theo chiều rộng màn hình, chiều cao cố định, điều này có thể dẫn đến hình ảnh bị cắt bớt. |
Trình chiếu
Nơi tải hình ảnh lên: Truy cập trình chỉnh sửa giao diện bằng cách vào phần Cửa hàng trực tuyến trong bảng quản trị SHOPLINE của bạn. Chọn giao diện bạn muốn chỉnh sửa và nhấp vào Thiết kế. Trong trình chỉnh sửa giao diện, tìm thành phần Trình chiếu để tải hình ảnh lên.
Đối với hình ảnh trình chiếu, SHOPLINE hỗ trợ cài đặt hình ảnh riêng biệt cho phiên bản PC và di động, cho phép bạn tải tài liệu dựa trên hiệu ứng hiển thị.
| Tỷ lệ khung hình đề xuất (cho phiên bản PC) | 3:1 | |
| Kích thước đề xuất (cho phiên bản PC) |
|
|
| Tỷ lệ khung hình đề xuất (cho phiên bản di động) | 1:2 | |
| Kích thước đề xuất (cho phiên bản di động) |
|
|
| Lưu ý: Nếu bạn muốn tránh việc cắt hình ảnh, nên chọn Phù hợp với hình ảnh đầu tiên cho chiều cao hình ảnh và tắt hiệu ứng cuộn parallax. |
Trình chiếu chia đôi
Nơi tải hình ảnh lên: Truy cập trình chỉnh sửa giao diện bằng cách vào phần Cửa hàng trực tuyến trong bảng điều khiển quản trị SHOPLINE của bạn. Chọn giao diện hỗ trợ tính năng này và bạn muốn chỉnh sửa. Nhấn Thiết kế. Trong trình chỉnh sửa giao diện, tìm thành phần Trình chiếu chia đôi để tải hình ảnh lên.
| Lưu ý: Thành phần Trình chiếu chia đôi chỉ có trên các giao diện Expect, Soo, Metal, Flexible và Control, hỗ trợ điều chỉnh hình ảnh và văn bản phù hợp với kích thước trình duyệt. |
| Kích thước đề xuất cho phiên bản PC (Chiều cao đặt là Toàn màn hình) |
|
||
| Kích thước đề xuất cho phiên bản PC (Chiều cao đặt giá trị cụ thể) |
|
| Kích thước đề xuất cho phiên bản di động (Chiều cao đặt là Toàn màn hình) |
|
||
| Kích thước đề xuất cho phiên bản di động (Chiều cao đặt giá trị cụ thể) |
|
|
Lưu ý:
|
Hình ảnh lớn với hộp văn bản
Nơi Tải Ảnh Lên: Truy cập trình chỉnh sửa giao diện qua phần Cửa Hàng Trực Tuyến trong bảng điều khiển quản trị SHOPLINE của bạn. Chọn giao diện bạn muốn chỉnh sửa và nhấp vào Thiết Kế. Trong trình chỉnh sửa giao diện, tìm thành phần Ảnh lớn với hộp văn bản để tải ảnh lên.
| Tỷ Lệ Khung Hình Đề Xuất (cho Phiên Bản PC) | 16:9 | |
| Kích Thước Đề Xuất |
|
|
| Kích Thước Đề Xuất (cho Phiên Bản Di Động) |
|
|
|
Lưu Ý:
|
Cột Văn Bản Kèm Ảnh
Nơi Tải Ảnh Lên: Truy cập trình chỉnh sửa giao diện qua phần Cửa Hàng Trực Tuyến trong bảng điều khiển quản trị SHOPLINE của bạn. Chọn giao diện bạn muốn chỉnh sửa và nhấp vào Thiết Kế. Trong trình chỉnh sửa giao diện, tìm thành phần Cột văn bản kèm ảnh để tải ảnh lên.
| Tỷ Lệ Khung Hình Đề Xuất | 4:3 (Tỷ lệ khung hình gốc được áp dụng, tùy chọn tỷ lệ này chỉ mang tính khuyến nghị.) | |
| Kích Thước Đề Xuất |
|
|
Blogs
Nơi Tải Ảnh Lên: Truy cập trình chỉnh sửa giao diện qua phần Cửa Hàng Trực Tuyến trong bảng điều khiển quản trị SHOPLINE của bạn. Chọn giao diện bạn muốn chỉnh sửa và nhấp vào Thiết Kế. Trong trình chỉnh sửa giao diện, tìm thành phần Blogs để tải ảnh lên.
| Tỷ Lệ Khung Hình Đề Xuất | 4:3 (có thể cấu hình) | |
| Kích Thước Đề Xuất |
|
|
Khuyến Mãi Chân Trang
Nơi Tải Ảnh Lên: Truy cập trình chỉnh sửa giao diện qua phần Cửa Hàng Trực Tuyến trong bảng điều khiển quản trị SHOPLINE của bạn. Chọn giao diện bạn muốn chỉnh sửa và nhấp vào Thiết Kế. Trong trình chỉnh sửa giao diện, tìm thành phần Khuyến mãi chân trang để tải ảnh lên.
| Tỷ Lệ Khung Hình Đề Xuất | 16:9 (có thể cấu hình) | |
| Kích Thước Đề Xuất |
|
|
Kích Thước Ảnh Cho Các Thành Phần Giao Diện Phổ Biến
Nơi Tải Ảnh Lên: Truy cập trình chỉnh sửa giao diện qua phần Cửa Hàng Trực Tuyến trong bảng điều khiển quản trị SHOPLINE của bạn. Chọn giao diện bạn muốn chỉnh sửa và nhấp vào Thiết Kế.
| Lưu ý: Một số thành phần chỉ có trong các giao diện cụ thể. Vui lòng tham khảo cột Giao Diện Áp Dụng để biết các giao diện được hỗ trợ. |
| Tên thành phần | Kích thước đề xuất | Chủ đề áp dụng |
| Danh sách Logo | 144 px * 144 px | Chủ đề Selected 2.1 |
| Lời chứng thực | 240 px * 240 px | Chủ đề Selected 2.1 |
| Lưới Văn bản và Hình ảnh | Kích thước thay đổi theo bố cục khác nhau. Chiều rộng đề xuất là 1.420 pixel trở lên. | Chủ đề Selected 2.1 |
| Đề xuất đặc biệt | Kích thước thay đổi theo bố cục khác nhau. Chiều rộng đề xuất là 1.420 pixel trở lên. | Chủ đề Selected 2.1 |
| Hình ảnh có thể mua sắm | Kích thước thay đổi theo bố cục khác nhau. Chiều rộng đề xuất là 1.420 pixel trở lên. | Chủ đề Selected 2.1 |
| Danh sách Logo | 320 px * 320 px | Chủ đề Selected 2.1 |
| Khuyến mãi |
Bộ sưu tập: chiều rộng đề xuất 1.600 pixel trở lên Hình ảnh banner: chiều rộng đề xuất 400 pixel trở lên |
Chủ đề Selected 2.1 |
| Hình ảnh kèm văn bản | Chiều cao hình ảnh sẽ được điều chỉnh. Kích thước đề xuất là 1.000 px * 1.000 px. | Tất cả chủ đề |
Kích thước hình ảnh cho các thành phần chủ đề độc đáo
| Tên thành phần | Kích thước đề xuất | Chủ đề áp dụng |
| Logo trang web trong cài đặt chủ đề | 28 px * 28 px | Tất cả chủ đề |
| Sản phẩm nổi bật với bìa | 472 px * 330 px | Chủ đề Selected 2.1 |
| Ghép nối phương tiện | 854 px * 1232 px | Chủ đề Selected 2.1 |
| Video | 1920 px * 800 px | Tất cả chủ đề |
| Nhãn Accordion | 470 px * 470 px | Chủ đề Selected 2.1 |
| Biểu ngữ hình ảnh |
960 px * 650 px 1920 px * 650 px |
Chủ đề Selected 2.1 |
| Biểu ngữ ưu đãi | 180 px * 180 px | Chủ đề Selected 2.1 |
| Sản phẩm nổi bật | 470 px * 760 px | Chủ đề Selected 2.1 |
| Mô-đun ghép đồ họa | 600 px * 700 px | Chủ đề Selected 2.1 |
| Chuyển đổi hình ảnh khi di chuột | 800 px * 800 px | Chủ đề Selected 2.1 |
| Điều hướng đồ họa | 160 px * 160 px | Chủ đề Selected 2.1 |
| Carousel đồ họa | 339 px * 246 px | Chủ đề Selected 2.1 |
| Ghép hình ảnh | 700 px * 700 px | Chủ đề Selected 2.1 |
| Mẫu video-đồ họa | 710 px * 400 px | Chủ đề Selected 2.1 |
| Menu chân trang trên thiết bị di động | 120 px * 120 px | Chủ đề Selected 2.1 |
| Dòng thời gian | 500 px * 500 px | Chủ đề Selected 2.1 |
| Bản đồ | 710 px * 528 px | Chủ đề Selected 2.1 |
| Bộ lọc đa cấp | 1920 px * 650 px | Chủ đề Selected 2.1 |
Trang Thanh Toán: Khuyến nghị về Hình Ảnh Nền
Nơi Tải Lên Hình Ảnh: Truy cập trình chỉnh sửa giao diện qua phần Cửa Hàng Trực Tuyến trong bảng điều khiển quản trị SHOPLINE của bạn. Chọn giao diện bạn muốn chỉnh sửa và nhấp vào Thiết Kế. Trong trình chỉnh sửa giao diện, sử dụng bộ chọn trang để chuyển sang trang Thanh Toán. Nhấp vào biểu tượng bảng màu trong menu điều hướng bên trái và điều hướng đến phần Nội Dung để tải lên hình ảnh.
| Lưu ý: Thành phần tải hình ảnh lên trang thanh toán chỉ có sẵn cho người đăng ký gói Doanh Nghiệp của SHOPLINE. |
| Tải Hình Ảnh làm Hình Nền | Hình ảnh banner trên cùng | Hình nền bên trái | Hình nền bên phải |
| 1920 px * 200 px | 1048 px * 1048 px | 872 px * 1048 px |
Hình Ảnh Minh Họa:
| Sử dụng Kết Cấu Nền làm Hình Nền | Hệ thống sẽ tự động sao chép và xếp chồng hình ảnh bạn tải lên theo chiều ngang và chiều dọc. Do đó, không có giới hạn về kích thước hình ảnh. Bạn có thể thử hiệu ứng và điều chỉnh hình ảnh trong trình chỉnh sửa. |
Hình Ảnh Minh Họa:
Mẹo Tải Hình Ảnh để Hiệu Suất Tốt Hơn
- Tối đa hóa chất lượng hình ảnh: Tải lên hình ảnh gốc lớn nhất có thể để giữ chi tiết và cho phép thay đổi kích thước mà không 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. Giao diện tự động thay đổi kích thước hình ảnh để xem trang hiệu quả.
Câu Hỏi Thường Gặp về Tải Hình Ảnh
Q1: Tại sao một số hình ảnh bị cắt?
Các chủ đề đôi khi điều chỉnh kích thước hình ả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 xén, đặc biệt với các module có chiều cao hoặc tỷ lệ khung hình cố định. Dưới đây là một số lý do gây ra việc cắt xén:
- Các thành phần có chiều cao cố định: Để đảm bảo văn bản vẫn dễ đọc, một số thành phần như "Hình ảnh lớn với hộp văn bản" và "Trình chiếu" có chiều cao cố định mặc định, có thể không phù hợp với kích thước hình ảnh của bạn.
- Các thành phần có tỷ lệ khung hình cố định: Nếu một thành phần áp dụng tỷ lệ khung hình cố định, việc cắt xén tự động sẽ xảy ra. Nếu khu vực hiển thị hình ảnh không được thiết lập, hình ảnh sẽ được cắt xén theo trung tâm theo mặc định.
- Xử lý hình ảnh đáp ứng: Nhiều thành phần trong chủ đề, như "Hình ảnh lớn với hộp văn bản" và "Trình chiếu", sử dụng kỹ thuật xử lý hình ảnh đáp ứng. Kỹ thuật này phóng to và cắt xén các hình ảnh rộng để đảm bảo hiển thị nhất quán trên cả máy tính và thiết bị di động. Hình ảnh của bạn sẽ được phóng to để bao phủ hoàn toàn khu vực hiển thị, cho phép thay đổi kích thước mà không làm biến dạng hoặc kéo giãn ảnh.
Hiển thị sản phẩm trước khi xử lý đáp ứng
Hiển thị sản phẩm sau khi xử lý đáp ứng
Câu 2: Tại sao hình ảnh của tôi vẫn bị cắt xén ngay cả khi đã chọn "Tự động điều chỉnh hình ảnh"?
Nếu hiệu ứng cuộn parallax được bật, hình ảnh vẫn có thể bị cắt xén. Để duy trì hiệu ứng parallax, hình ảnh sẽ được tự động phóng to và cắt xén khi kích thước của chúng vượt quá khu vực hiển thị.
Câu 3: Tôi có thể làm gì nếu hình ảnh của tôi không hiển thị đầy đủ mặc dù đã sử dụng kích thước được khuyến nghị?
Nếu hình ảnh của bạn không hiển thị đầy đủ mặc dù đã sử dụng kích thước được khuyến nghị, hãy kiểm tra hai cài đặt sau:
- Khu vực hiển thị hình ảnh: Một số thành phần có cài đặt để điều chỉnh khu vực hiển thị hình ảnh, điều này có thể vô tình giới hạn hình ảnh của bạn. Hãy đảm bảo 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" 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 một số 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.