Hướng dẫn về Kích thước Hình ảnh
Hình ảnh ấn tượng đóng vai trò quan trọng trong sự 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ể tăng cường 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 các kích thước hình ảnh được đề xuất 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 phổ biến 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ần Thiết
Hình Ảnh Sản Phẩm
Nơi Tải Lên Hình Ảnh: Đi đến 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ấn Thêm hình ảnh (hoặc kéo và thả) để tải lên.
Do 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 vào việc tối ưu hóa hiển thị hình ảnh sản phẩm cho thiết bị di động. Có bốn tỷ lệ hình ảnh khả dụng cho sự lựa chọn của bạn: vuông (1:1), dọc (2:3), ngang (4:3), và gốc. Chọn cái phù hợp nhất với hình dạng của 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 Ý: Đề xuất duy trì các tỷ lệ nhất quán cho tất cả hình ảnh sản phẩm để đảm bảo sự đồng nhất và ngăn ngừa sự biến đổi về chiều cao sản phẩm, có thể ảnh hưởng đến trải nghiệm duyệt sản phẩm của khách hàng. |
Bìa Bộ Sưu Tập
Nơi Tải Lên Hình Ảnh: 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 bìa. Đi đến phần Bìa bộ sưu tập để tải lên hình ảnh.
| 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 Lên Hình Ảnh: 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 mà bạn muốn thêm banner. Tìm đến phần Banner bộ sưu tập để tải lên hình ảnh.
| Kích thước Đề xuất |
|
|
| Ghi chú: Chiều rộng hình ảnh thay đổi tùy theo chiều rộng màn hình, với chiều cao cố định, có thể dẫn đến hình ảnh bị cắt bớt. |
Trình chiếu ảnh
Nơi tải lên ảnh: Truy cập trình chỉnh sửa chủ đề 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 chủ đề bạn muốn chỉnh sửa và nhấn vào Thiết kế. Trong trình chỉnh sửa chủ đề, tìm đến thành phần Trình chiếu ảnh để tải lên ảnh.
Đối với hình ảnh trình chiếu, SHOPLINE hỗ trợ cài đặt ảnh riêng biệt cho phiên bản PC và di động, cho phép bạn tải lên tài liệu dựa trên hiệu ứng hiển thị.
| Tỷ lệ khuyến nghị (cho phiên bản PC) | 3:1 | |
| Kích thước Đề xuất (cho phiên bản PC) |
|
|
| Tỷ lệ khuyến nghị (cho phiên bản di động) | 1:2 | |
| Kích thước Đề xuất (cho phiên bản di động) |
|
|
| Ghi chú: Nếu bạn muốn tránh việc cắt ảnh, nên chọn Thích ứng với ảnh đầu tiên cho chiều cao ảnh và tắt cuộn trang parallax. |
Trình chiếu chia
Nơi tải lên ảnh: Truy cập trình chỉnh sửa chủ đề 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 chủ đề hỗ trợ tính năng này và bạn muốn chỉnh sửa. Nhấn vào Thiết kế. Trong trình chỉnh sửa chủ đề, tìm đến thành phần Trình chiếu chia để tải lên ảnh.
| Ghi chú: Thành phần Trình chiếu chia chỉ dành riêng cho các chủ đề Expect, Soo, Metal, Flexible và Control, hỗ trợ việc đ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 được đặt là Toàn màn hình) |
|
||
| Kích thước Đề xuất cho Phiên bản PC (Chiều cao được đặt là một giá trị cụ thể) |
|
| Kích thước Đề xuất cho Phiên bản Di động (Chiều cao được đặt là Toàn màn hình) |
|
||
| Kích thước Đề xuất cho Phiên bản Di động (Chiều cao được đặt là một giá trị cụ thể) |
|
Ghi chú:
|
Ảnh Lớn với Ô văn bản
Nơi Tải lên Ảnh: Truy cập trình chỉnh sửa chủ đề thông qua phần Cửa hàng Trực tuyến trong bảng quản trị SHOPLINE của bạn. Chọn chủ đề bạn muốn chỉnh sửa và nhấp vào Thiết kế. Trong trình chỉnh sửa chủ đề, tìm thành phần Ảnh lớn với ô văn bản để tải lên ảnh.
| Tỷ lệ Khuyến nghị (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 với Ảnh
Nơi Tải lên Ảnh: Truy cập trình chỉnh sửa chủ đề thông qua phần Cửa hàng Trực tuyến trong bảng quản trị SHOPLINE của bạn. Chọn chủ đề bạn muốn chỉnh sửa và nhấp vào Thiết kế. Trong trình chỉnh sửa chủ đề, tìm thành phần Cột văn bản với ảnh để tải lên ảnh.
| Tỷ lệ khuyến nghị | 4:3 (Tỷ lệ khung hình gốc được áp dụng, và tùy chọn này chỉ là khuyến nghị.) | |
| Kích thước khuyến nghị |
|
|
Bài viết
Nơi tải lên hình ảnh: Truy cập trình chỉnh sửa chủ đề thông 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 chủ đề bạn muốn chỉnh sửa và nhấp vào Thiết kế. Trong trình chỉnh sửa chủ đề, tìm thành phần Bài viết để tải lên hình ảnh.
| Tỷ lệ khuyến nghị | 4:3 (có thể điều chỉnh) | |
| Kích thước khuyến nghị |
|
|
Khuyến mãi cuối trang
Nơi tải lên hình ảnh: Truy cập trình chỉnh sửa chủ đề thông 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 chủ đề bạn muốn chỉnh sửa và nhấp vào Thiết kế. Trong trình chỉnh sửa chủ đề, tìm thành phần Khuyến mãi cuối trang để tải lên hình ảnh.
| Tỷ lệ khuyến nghị | 16:9 (có thể điều chỉnh) | |
| Kích thước khuyến nghị |
|
|
Kích thước hình ảnh cho các thành phần chủ đề phổ biến
Nơi tải lên hình ảnh: Truy cập trình chỉnh sửa chủ đề thông 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 chủ đề 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ỉ dành riêng cho các chủ đề cụ thể. Tham khảo cột Chủ đề áp dụng để biết các chủ đề đượ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 |
| Phản Hồi | 240 px * 240 px | Edges/Cycle/Carfit/Solid |
| Lưới Văn Bản và Hình Ảnh | Kích thước thay đổi trong các 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 trong các 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 | Kích thước thay đổi trong các 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 với 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ả cá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 khuyến nghị | Chủ đề áp dụng |
| Logo trang web trong cài đặt chủ đề | 28 px * 28 px | Tất cả các chủ đề |
| Sản phẩm nổi bật với bìa | 472 px * 330 px | Barn |
| Chèn phương tiện | 854 px * 1232 px | Seed/Charm/Feeling/Extent/Shine/Wink/Arise/Edges |
| Video | 1920 px * 800 px | Tất cả các chủ đề |
| Nhãn Accordion | 470 px * 470 px | Seed/Charm |
| Banner hình ảnh |
960 px * 650 px 1920 px * 650 px |
Seed/Charm/Feeling/Extent/Shine/Wink/Arise/Edges |
| Banner Ưu đãi | 180 px * 180 px | Barn |
| Sản phẩm nổi bật | 470 px * 760 px | Charm |
| Mô-đun ghép hình đồ họa | 600 px * 700 px | Charm |
| Chuyển đổi hình ảnh khi di chuột qua | 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 ả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 nền
Nơi tải lên hình ảnh: Truy cập trình chỉnh sửa chủ đề thông 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 chủ đề bạn muốn chỉnh sửa và nhấp vào Thiết kế. Trong trình chỉnh sửa chủ đề, 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à di chuyển đế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 lên trang thanh toán chỉ dành riêng 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 Demo:
|
Sử dụng Texture Nền làm Hình nền |
Hệ thống sẽ tự động sao chép và xếp hình ảnh bạn tải lên theo hướng ngang và dọc. Do đó, không có giới hạn áp dụng cho kích thước hình ảnh. Bạn có thể thử nghiệm hiệu ứng và điều chỉnh hình ảnh trong trình chỉnh sửa. |
Hình ảnh Demo:
Mẹo Tải lên Hình ảnh để Cải thiện Hiệu suất
- Tối đa hóa chất lượng hình ảnh: Tải lên hình ảnh nguyên gốc lớn nhất có thể để bảo tồn chi tiết và cho phép thay đổi kích thước mà không mất thông tin.
- Tối ưu hóa cho tốc độ: Chọn .jpg thay vì .png để tải nhanh hơn. Chủ đề sẽ tự động điều chỉnh kích thước hình ảnh để xem trang hiệu quả.
Câu hỏi Thường gặp về việc Tải lên 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 cắt bớt, đặc biệt là với các mô-đun cố định về chiều cao hoặc tỷ lệ khung hình. Dưới đây là một số lý do gây cắt bớt:
- Các thành phần có chiều cao cố định: Để đảm bảo văn bản vẫn đọc đượ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 của 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 thiết lập, hình ảnh sẽ bị cắt ở trung tâm 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 xử lý hình ảnh đáp ứng. Kỹ thuật này phóng to và cắt 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 để che khu vực hiển thị hoàn toàn, cho phép tỷ lệ mà không bị kéo dãn hoặc biến dạng ả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
Q2: Tại sao hình ảnh của tôi vẫn bị cắt ngay cả khi đã chọn "Tự động điều chỉnh hình ảnh"?
Nếu hiệu ứng cuộn parallax được kích hoạ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ị.
Q3: Tôi có thể làm gì nếu hình ảnh của tôi vẫn 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 vẫ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, có thể vô tình hạn chế hình ảnh của bạn. Đả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 ảnh nền, gây ra việc cắt. Nếu bạn không cần hiệu ứng này, vui lòng tắt nó trong cài đặt chủ đề.