Hướng dẫn về Kích thước Hình ảnh
Hình ảnh bắt mắt đó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ể 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 thiết yếu
Hình ảnh sản phẩm
Nơi tải lên hình ảnh: Truy cập 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 và 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 vào việc tối ưu hóa hiển thị hình ảnh sản phẩm cho các thiết bị di động. Có bốn tỷ lệ hình ảnh có sẵn để bạn lựa chọn: vuông (1:1), chân dung (2:3), phong cảnh (4:3), và gốc. Chọn tỷ lệ 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) |
|
|
| Ghi chú: Nên duy trì tỷ lệ nhất quán cho tất cả hình ảnh sản phẩm để đảm bảo tính đồng nhất và ngăn ngừa 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 web 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 |
Biểu ngữ 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 biểu ngữ. Tìm phần Biểu ngữ bộ sưu tập để tải lên hình ảnh.
| Kích thước khuyến nghị |
|
|
| Ghi chú: Chiều rộng hình ảnh thay đổi theo chiều rộng màn hình, với chiều cao cố định, điều này có thể dẫn đến hình ảnh bị cắt xén. |
Trình chiếu
Nơi tải lên hình ảnh: 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 mà 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 lên hình ảnh.
Đối với hình ảnh trình chiếu, SHOPLINE hỗ trợ các 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 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 khuyến nghị (cho phiên bản PC) |
|
|
| Tỷ lệ khuyến nghị (cho phiên bản di động) | 1:2 | |
| Kích thước khuyến nghị (cho phiên bản di động) |
|
|
| Ghi chú: Nếu bạn muốn tránh việc hình ảnh bị cắt xén, nên chọn Thích ứng với hình ảnh đầu tiên cho chiều cao hình ảnh và tắt cuộn parallax. |
Trình chiếu chia tách
Nơi tải lên hình ảnh: 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 mà bạn muốn chỉnh sửa. 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 chia tách để tải lên hình ảnh.
| Ghi chú: Thành phần Trình chiếu chia tách chỉ có ở các giao diện Expect, Soo, Metal, Flexible và Control, hỗ trợ việc điều chỉnh hình ảnh và văn bản theo kích thước trình duyệt. |
| Kích thước khuyến nghị cho phiên bản PC (Chiều cao đặt là Toàn màn hình) |
|
||
| Kích thước khuyến nghị cho phiên bản PC (Chiều cao đặt ở một giá trị cụ thể) |
|
| Kích thước được khuyến nghị cho phiên bản di động (Chiều cao đặt ở chế độ toàn màn hình) |
|
||
| Kích thước được khuyến nghị cho phiên bản di động (Chiều cao đặt ở một giá trị cụ thể) |
|
Ghi chú:
|
Hình ảnh lớn với hộp văn bản
Nơi tải lên hình ảnh: Truy cập trình chỉnh sửa giao diện thông qua phần Cửa hàng trực tuyến của 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 Hình ảnh lớn với hộp văn bản để tải lên hình ảnh.
| Tỷ lệ khuyến nghị (cho phiên bản PC) | 16:9 | |
| Kích thước được khuyến nghị |
|
|
| Kích thước được khuyến nghị (cho phiên bản di động) |
|
|
Ghi chú:
|
Cột văn bản với hình ảnh
Nơi tải lên hình ảnh: Truy cập trình chỉnh sửa giao diện thông qua phần Cửa hàng trực tuyến của 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 với hình ảnh để tải lên hình ảnh.
| Tỷ lệ khuyến nghị | 4:3 (Tỷ lệ gốc được áp dụng, và tùy chọn tỷ lệ này chỉ là một khuyến nghị.) | |
| Kích thước được khuyến nghị |
|
|
Blog
Nơi tải lên hình ảnh: Truy cập trình chỉnh sửa giao diện thông qua phần Cửa hàng trực tuyến của 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 Blog để tải lên hình ảnh.
| Tỷ lệ khuyến nghị | 4:3 (có thể cấu hình) | |
| Kích thước được khuyến nghị |
|
|
Khuyến mãi chân trang
Nơi tải lên hình ảnh: Truy cập trình chỉnh sửa giao diện thông qua phần Cửa hàng trực tuyến của 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 lên hình ảnh.
| Tỷ lệ khuyến nghị | 16:9 (có thể cấu hình) | |
| Kích thước được khuyến nghị |
|
|
Kích thước hình ảnh cho các thành phần giao diện phổ biến
Nơi tải lên hình ảnh: Truy cập trình chỉnh sửa giao diện thông qua phần Cửa hàng trực tuyến của 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ế.
| Ghi chú: Một số thành phần chỉ dành riêng cho các giao diện cụ thể. 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 |
| 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 trong các bố cục khác nhau. Chiều rộng đề xuất là 1.420 pixel hoặc cao hơn. | Edges/Cycle/Carfit/Barn |
| Khuyến nghị đặ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 hoặc cao hơn. | Edges/Cycle/Carfit/Barn |
| Hình ảnh có thể mua sắm | 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 hoặc cao hơ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 hoặc cao hơn Hình ảnh banner: chiều rộng đề xuất 400 pixel hoặc cao hơn |
Expect/Control/Metal/Soo/Flexible/Edges/Bloom |
| Hình ảnh có 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 đề xuất | 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 |
| 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ả các chủ đề |
| Nhãn accordion | 470 px * 470 px | Seed/Charm |
| Hình ảnh banner |
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 |
| Module ghép đồ 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 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 |
| Thời gian biểu | 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: Khuyến nghị hình ả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 của 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 đến 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.
| Ghi chú: Thành phần tải lên hình ảnh cho trang thanh toán chỉ có sẵn cho những 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 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 nào áp dụng cho kích thước hình ảnh. Bạn có thể thử nghiệm các 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ó hiệu suất tốt hơn
- Tối đa hóa chất lượng hình ảnh: Tải lên những hình ảnh thô 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 bị mất mát.
- Tối ưu hóa cho tốc độ: Chọn .jpg thay vì .png để có thời gian tải nhanh hơn. Các chủ đề tự động thay đổi kích thước hình ảnh để có lượt xem trang hiệu quả.
Câu hỏi thường gặp về 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 chiều 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, đặc biệt với các mô-đun cố định chiều cao hoặc tỷ lệ khung hình. Dưới đây là một số lý do cho việc cắt:
- 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 khớ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 thiết lập, hình ảnh sẽ bị cắt ở giữa theo mặc định.
- Xử lý hình ảnh đáp ứng: Nhiều thành phần chủ đề, chẳng hạn 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ả thiết bị PC và 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 bị kéo dài hoặc biến dạng 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
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 có thể vẫn bị cắt. Để duy trì các 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 không được hiển thị đầy đủ mặc dù tôi đã sử dụng kích thước được khuyến nghị?
Nếu hình ảnh của bạn không được 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: Certain components have a setting for adjusting the image display area, which may inadvertently limit your image. Ensure you have selected Auto for this setting.
- 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, 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 những 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.