Tùy chỉnh Product gallery trong Website Builder
Product gallery (thư viện hình ảnh sản phẩm) trên cửa hàng thương mại điện tử là công cụ nhằm đa dạng hóa cách thức giới thiệu sản phẩm đến khách hàng:
Cung cấp hình ảnh trực quan cho sản phẩm, nâng cao trải nghiệm người dùng.
Tạo dựng niềm tin đến khách hàng bằng cách giới thiệu sản phẩm từ nhiều góc độ.
Hiển thị các biến thể sản phẩm một cách hiệu quả.
Bài viết này hướng dẫn bạn tùy chỉnh khối Product gallery trong Website Builder.
A. Thêm Product gallery
B. Chỉnh sửa nội dung cho Product gallery
C. Chỉnh sửa thiết kế cho Product gallery
D. Chỉnh sửa hiệu ứng cho Product gallery
Trên trang quản trị, đi tới Online Store > Design > Customize.
Nhấp vào dấu + (Insert) > Nhập từ khóa Product gallery > Kéo khối Product gallery đến vị trí bạn muốn hiển thị trên trang.
Chọn khối Product gallery > tab Content.
Data source: Chọn sản phẩm mà bạn muốn hiển thị trong Product Gallery. Bạn có thể thay đổi nguồn dữ liệu sản phẩm bất kỳ lúc nào để đảm bảo việc tối ưu hình ảnh sản phẩm cho từng chiến dịch, chủ đề hiện tại của bạn.
Media ratio: Thay đổi tỷ lệ khung hình của ảnh trong Product gallery. Có 3 lựa chọn: Square (1:1), Portrait (3:4) và Landscape (16:9) mang lại sự linh hoạt trong cách trình bày ảnh sản phẩm và đảm bảo chúng phù hợp với thiết kế và bố cục của cửa hàng.
Photo list: Bạn có thể chỉ định hiển thị tất cả ảnh liên quan đến sản phẩm (All photos) hoặc giới hạn chỉ hiển thị những ảnh có liên quan đến biến thể sản phẩm (Only show variant photos).
Product label (nhãn sản phẩm)
Gạt nút để cho phép hiển thị nhãn sản phẩm trên mục thư viện ảnh sản phẩm.
Layout: Lựa chọn cách bố trí tổng thể cho hình ảnh sản phẩm. Có ba lựa chọn gồm:
Grid: Hiển thị hình ảnh ở định dạng lưới.
Item per row: Bạn có thể chỉ định số lượng hình ảnh trên mỗi hàng, với lựa chọn đặt thành 1 hoặc 2 hàng, giúp bạn kiểm soát mật độ và khoảng cách hình ảnh sản phẩm.
Carousel: Trình bày lần lượt các hình ảnh sản phẩm theo trình tự giống như trang trình chiếu.
Nav type: Định dạng này cho phép bạn chọn giữa Thumbnail (hỉnh ảnh thu nhỏ), Dots (dấu chấm), hoặc None (không chọn) để điều hướng hình ảnh trong Product gallery.
Nếu chọn Thumbnail (hình thu nhỏ), bạn có thể tùy chỉnh vị trí của hình thu nhỏ ở bên trái (Left), bên phải (Right) hoặc dưới cùng (Bottom) của hình ảnh chính.
Mix: Sắp xếp hình ảnh sản phẩm theo dạng lưới với vị trí và cách trình bày của các hình ảnh đan xen.
Đối với giao diện điện thoại, Product gallery sẽ được đơn giản hóa với một lựa chọn bố cục duy nhất để có chế độ xem tối ưu – Carousel. Bố cục này đảm bảo trải nghiệm duyệt web mượt mà và trực quan trên màn hình nhỏ hơn.
Spacing: Điều chỉnh khoảng cách giữa các hình ảnh riêng lẻ. Điều này giúp tạo ra giao diện gọn gàng và phù hợp với thiết kế trang web của bạn.
Item radius: Điều chỉnh độ bo tròn của khung ảnh theo các mức độ khác nhau.
Bạn có thể chỉnh sửa định dạng chung của khối, vui lòng tham khảo bài viết này.
Tab Effect (Hiệu ứng) trong Product gallery giúp nâng cao trải nghiệm hình ảnh của người dùng với các loại hiệu ứng thu phóng hình ảnh khác nhau. Điều này đặc biệt hữu ích để cung cấp cái nhìn sâu hơn về các chi tiết của sản phẩm.
None: Tùy chọn này sẽ không có bất kỳ hiệu ứng phóng to bổ sung nào cho hình ảnh sản phẩm.
Instant zoom-in: Với hiệu ứng này, khi người dùng di chuột vào hình ảnh, vùng di chuột sẽ được phóng to ngay lập tức lên 250% so với kích thước ban đầu.
Display zoom-in window: Hiệu ứng này cho phép hiển thị một cửa sổ nhỏ khi người dùng di chuột qua hình ảnh. Cửa sổ này sẽ hiển thị khu vực được di chuột với tỷ lệ phóng to lên tới 300%.
Các hiệu ứng phóng to sẽ chỉ được thiết kế cho giao diện máy tính. Trên thiết bị di động, hiệu ứng của khối Product gallery sẽ hoạt động theo nguyên lý khác. Sau khi nhấn xem hình ảnh ở chế độ xem tập trung, khách hàng có thể nhấn đúp vào bất kỳ điểm nào trên hình ảnh để phóng to và kiểm tra sản phẩm chi tiết hơn một cách hiệu quả.
Bắt đầu với Website Builder
Khởi tạo trang web bằng Website Builder
Hiểu về thiết lập giao diện trên Website Builder
Các trình duyệt được ShopBase hỗ trợ
Cung cấp hình ảnh trực quan cho sản phẩm, nâng cao trải nghiệm người dùng.
Tạo dựng niềm tin đến khách hàng bằng cách giới thiệu sản phẩm từ nhiều góc độ.
Hiển thị các biến thể sản phẩm một cách hiệu quả.
Bài viết này hướng dẫn bạn tùy chỉnh khối Product gallery trong Website Builder.
Trong bài viết này
A. Thêm Product gallery
B. Chỉnh sửa nội dung cho Product gallery
C. Chỉnh sửa thiết kế cho Product gallery
D. Chỉnh sửa hiệu ứng cho Product gallery
A. Thêm Product gallery
Trên trang quản trị, đi tới Online Store > Design > Customize.
Nhấp vào dấu + (Insert) > Nhập từ khóa Product gallery > Kéo khối Product gallery đến vị trí bạn muốn hiển thị trên trang.
B. Chỉnh sửa nội dung cho Product gallery
Chọn khối Product gallery > tab Content.
Data source: Chọn sản phẩm mà bạn muốn hiển thị trong Product Gallery. Bạn có thể thay đổi nguồn dữ liệu sản phẩm bất kỳ lúc nào để đảm bảo việc tối ưu hình ảnh sản phẩm cho từng chiến dịch, chủ đề hiện tại của bạn.
Media ratio: Thay đổi tỷ lệ khung hình của ảnh trong Product gallery. Có 3 lựa chọn: Square (1:1), Portrait (3:4) và Landscape (16:9) mang lại sự linh hoạt trong cách trình bày ảnh sản phẩm và đảm bảo chúng phù hợp với thiết kế và bố cục của cửa hàng.
Photo list: Bạn có thể chỉ định hiển thị tất cả ảnh liên quan đến sản phẩm (All photos) hoặc giới hạn chỉ hiển thị những ảnh có liên quan đến biến thể sản phẩm (Only show variant photos).
Product label (nhãn sản phẩm)
Gạt nút để cho phép hiển thị nhãn sản phẩm trên mục thư viện ảnh sản phẩm.
C. Chỉnh sửa thiết kế cho Product gallery
Mục Items:
Layout: Lựa chọn cách bố trí tổng thể cho hình ảnh sản phẩm. Có ba lựa chọn gồm:
Grid: Hiển thị hình ảnh ở định dạng lưới.
Item per row: Bạn có thể chỉ định số lượng hình ảnh trên mỗi hàng, với lựa chọn đặt thành 1 hoặc 2 hàng, giúp bạn kiểm soát mật độ và khoảng cách hình ảnh sản phẩm.
Carousel: Trình bày lần lượt các hình ảnh sản phẩm theo trình tự giống như trang trình chiếu.
Nav type: Định dạng này cho phép bạn chọn giữa Thumbnail (hỉnh ảnh thu nhỏ), Dots (dấu chấm), hoặc None (không chọn) để điều hướng hình ảnh trong Product gallery.
Nếu chọn Thumbnail (hình thu nhỏ), bạn có thể tùy chỉnh vị trí của hình thu nhỏ ở bên trái (Left), bên phải (Right) hoặc dưới cùng (Bottom) của hình ảnh chính.
Mix: Sắp xếp hình ảnh sản phẩm theo dạng lưới với vị trí và cách trình bày của các hình ảnh đan xen.
Đối với giao diện điện thoại, Product gallery sẽ được đơn giản hóa với một lựa chọn bố cục duy nhất để có chế độ xem tối ưu – Carousel. Bố cục này đảm bảo trải nghiệm duyệt web mượt mà và trực quan trên màn hình nhỏ hơn.
Spacing: Điều chỉnh khoảng cách giữa các hình ảnh riêng lẻ. Điều này giúp tạo ra giao diện gọn gàng và phù hợp với thiết kế trang web của bạn.
Item radius: Điều chỉnh độ bo tròn của khung ảnh theo các mức độ khác nhau.
Mục Common:
Bạn có thể chỉnh sửa định dạng chung của khối, vui lòng tham khảo bài viết này.
D. Chỉnh sửa hiệu ứng cho Product gallery
Tab Effect (Hiệu ứng) trong Product gallery giúp nâng cao trải nghiệm hình ảnh của người dùng với các loại hiệu ứng thu phóng hình ảnh khác nhau. Điều này đặc biệt hữu ích để cung cấp cái nhìn sâu hơn về các chi tiết của sản phẩm.
None: Tùy chọn này sẽ không có bất kỳ hiệu ứng phóng to bổ sung nào cho hình ảnh sản phẩm.
Instant zoom-in: Với hiệu ứng này, khi người dùng di chuột vào hình ảnh, vùng di chuột sẽ được phóng to ngay lập tức lên 250% so với kích thước ban đầu.
Display zoom-in window: Hiệu ứng này cho phép hiển thị một cửa sổ nhỏ khi người dùng di chuột qua hình ảnh. Cửa sổ này sẽ hiển thị khu vực được di chuột với tỷ lệ phóng to lên tới 300%.
Các hiệu ứng phóng to sẽ chỉ được thiết kế cho giao diện máy tính. Trên thiết bị di động, hiệu ứng của khối Product gallery sẽ hoạt động theo nguyên lý khác. Sau khi nhấn xem hình ảnh ở chế độ xem tập trung, khách hàng có thể nhấn đúp vào bất kỳ điểm nào trên hình ảnh để phóng to và kiểm tra sản phẩm chi tiết hơn một cách hiệu quả.
Bài viết liên quan
Bắt đầu với Website Builder
Khởi tạo trang web bằng Website Builder
Hiểu về thiết lập giao diện trên Website Builder
Các trình duyệt được ShopBase hỗ trợ
Cập nhật vào: 08/10/2024
Cảm ơn!