Hướng Dẫn Kích Thước Hình Ảnh
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 lên hình ảnh.
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 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ệ Khuyến Nghị | 2:3 | |
|
Kích Thước Tối Thiểu (75% chiều rộng trên thiết bị di động) |
|
|
|
Kích Thướ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 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ệ Khuyến Nghị | 1:1 |
| Kích Thước Khuyến Nghị | ≥ 1600 pixel |
Banner 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 banner. Tìm phần Banner 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 việc 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ấn 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 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 ở chế độ Toàn màn hình) |
|
||
| Kích thước đề xuất cho phiên bản PC (Chiều cao đặt theo giá trị cụ thể) |
|
| Kích thước đề xuất cho phiên bản di động (Chiều cao đặt ở chế độ Toàn màn hình) |
|
||
| Kích thước đề xuất cho phiên bản di động (Chiều cao đặt theo giá trị cụ thể) |
|
Ghi chú:
|
Ả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ấn 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) |
|
|
Ghi chú:
|
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ấn 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 được đề xuất | 4:3 (Tỷ lệ khung hình gốc được áp dụng, và tùy chọn tỷ lệ này chỉ là khuyến nghị.) | |
| Kích thước đượ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 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 được đề xuất | 4:3 (có thể cấu hình) | |
| Kích thước đượ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 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 được đề xuất | 16:9 (có thể cấu hình) | |
| Kích thước đượ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 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 |
Edges/Cycle/Carfit/Feeling/Extent/Shine/Wink/Blouse/ Barn/Brooklyn/Soo/Flexible/Control/Solid/Along/Expect/ Bobo/Bloom/Impress |
| Lời chứng thực | 240 px * 240 px | Edges/Cycle/Carfit/Solid |
| 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. | Edges/Cycle/Carfit/Barn |
| Đề 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. | Edges/Cycle/Carfit/Barn |
| 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. | Edges/Cycle/Carfit/Charm/Shine/Solid |
| Danh sách Logo | 320 px * 320 px |
Expect/Control/Metal/Soo/Flexible/Barn/Cycle/Carfit/Soo/ Edges/Bobo |
| 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 |
Expect/Control/Metal/Soo/Flexible/Edges/Bloom |
| 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ả mẫu |
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 | Barn |
| Ghép nối phương tiện | 854 px * 1232 px | Seed/Charm/Feeling/Extent/Shine/Wink/Arise/Edges |
| Video | 1920 px * 800 px | Tất cả chủ đề |
| Nhãn Accordion | 470 px * 470 px | Seed/Charm |
| Biểu ngữ hình ảnh |
960 px * 650 px 1920 px * 650 px |
Seed/Charm/Feeling/Extent/Shine/Wink/Arise/Edges |
| Biểu ngữ ưu đãi | 180 px * 180 px | Barn |
| Sản phẩm nổi bật | 470 px * 760 px | Charm |
| Mô-đun ghép nối đồ họa | 600 px * 700 px | Charm |
| Chuyển đổi hình ảnh khi di chuột | 800 px * 800 px | Charm |
| Điều hướng đồ họa | 160 px * 160 px | Flash |
| Carousel đồ họa | 339 px * 246 px | Blouse |
| Ghép nối hình ảnh | 700 px * 700 px | Flash |
| Mẫu video-đồ họa | 710 px * 400 px | Feeling/Extent/Shine/Wink/Blouse/Edges |
| Menu chân trang trên thiết bị di động | 120 px * 120 px | Flash |
| Dòng thời gian | 500 px * 500 px | Feeling/Extent/Shine/Wink/Blouse/Edges/Solid |
| Bản đồ | 710 px * 528 px | Feeling/Extent/Shine/Wink/Arise/Blouse/Barn/Brooklyn/Flexible/ Control/edges/Solid/Along/Expect/Bobo/Bloom/Impress |
| Bộ lọc đa cấp | 1920 px * 650 px | Cycle/Carfit/Edges |
Trang Thanh Toán: Đề Xuất 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 lên hình ảnh cho trang thanh toán chỉ có sẵn cho người đăng ký gói Doanh Nghiệp của SHOPLINE. |
| Tải Lên 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 hướng ngang và 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 Lên 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 định dạng .jpg thay vì .png để tải trang nhanh hơn. Giao diện sẽ 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 Lên Hình Ảnh
H1: Tại sao một số hình ảnh bị cắt?
Giao diện đô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 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: 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 tự động sẽ xảy ra. Nếu khu vực hiển thị hình ảnh không được đặt, hình ảnh sẽ được cắt ở vị trí trung tâm theo mặc định.
- Xử lý hình ảnh đáp ứng: Nhiều thành phần 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 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 giãn hoặc méo hình ả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 hỏi 2: Tại sao hình ảnh của tôi vẫn bị cắt dù đã chọn "Tự động phù hợp hình ảnh"?
Nếu hiệu ứng cuộn parallax được bật, hình ảnh vẫn có thể bị cắt. Để duy trì hiệu ứng parallax, hình ảnh sẽ tự động được phóng to và cắt khi kích thước của chúng vượt quá khu vực hiển thị.
Câu hỏi 3: Tôi có thể làm gì nếu hình ảnh không hiển thị đầy đủ 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 hình ảnh. 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.