Mục Trước và sau đặt hai ảnh chồng lên nhau với một đường phân cách. Khách kéo đường phân cách để xem nhiều hơn ảnh này hoặc ảnh kia. Hãy dùng nó cho kết quả (trước và sau), hai màu, hoặc hai kiểu hoàn thiện của một sản phẩm.
Thêm mục
- Mở trình thiết kế và đến trang bạn muốn. Mục này dùng được trên trang chủ, trang sản phẩm, trang landing, trang bộ sưu tập và trang các bộ sưu tập, tối đa 3 mục mỗi trang.
- Trong tab Các mục, bấm Thêm mục mới và chọn Trước và sau trong nhóm Nội dung.
- Bấm vào khối Trước và sau bên trong và chọn hai ảnh của bạn, rồi bấm Xuất bản.
Khối Trước và sau
Khối này chứa hai ảnh. Nó luôn có trong mục và không thể xóa.
- Ảnh trước và Ảnh sau: hai bức ảnh. Hãy dùng ảnh chụp cùng một góc để chúng khớp nhau.
- Nhãn trước và Nhãn sau: một nhãn ngắn ở góc mỗi ảnh, như "Trước" và "Sau", hoặc "Đen" và "Trắng". Để trống để ẩn nhãn.
- Hướng: Ngang dùng đường phân cách mà khách kéo sang trái và phải. Dọc dùng đường phân cách mà khách kéo lên và xuống.
- Tỷ lệ: hình dạng khung. Tự động theo ảnh trước, hoặc chọn Dọc, Vuông hoặc Ngang. Cả hai ảnh được cắt theo cùng một khung.
- Vị trí đường phân cách: nơi đường phân cách bắt đầu, từ 5% đến 95%. Ở 50%, khách thấy mỗi ảnh một nửa.
- Hiện gợi ý khi xuất hiện trên màn hình: đường phân cách tự di chuyển một chút, để khách thấy họ có thể kéo nó.
- Di theo chuột trên máy tính: trên máy tính, đường phân cách đi theo chuột mà không cần bấm. Trên điện thoại, khách luôn phải kéo.
- Dùng bảng màu của phần tử cha: đường phân cách, tay nắm và nhãn dùng màu của mục. Tắt nó để chọn Phối màu khác.
Cài đặt của mục và tiêu đề
Thêm tối đa 2 khối Văn bản, 1 Đường phân cách và 1 Nhóm cho tiêu đề và một đoạn chữ ngắn.
- Hướng: Dọc đặt tiêu đề phía trên ảnh, Ngang đặt nó bên cạnh.
- Xếp dọc trên di động: bật sẵn, để ảnh giữ toàn bộ chiều rộng điện thoại.
- Vị trí và Căn chỉnh, Chiều rộng mục, Phối màu, Khoảng đệm và tab CSS tùy chỉnh.
Trên trang sản phẩm
Cùng khối Trước và sau này cũng có thể đặt bên trong mục Thông tin sản phẩm và Thông tin landing page, cũng như bên trong các tab thu gọn, để phần so sánh nằm cạnh nút mua. Xem Làm sao để thêm tab thu gọn, ngày giao hàng, bảng size, huy hiệu hoặc ảnh trước và sau vào trang sản phẩm?
Lưu ý
- Trên cửa hàng trực tuyến, phần so sánh chỉ hiển thị khi đã chọn đủ cả hai ảnh. Trình thiết kế hiển thị ảnh mẫu cho đến lúc đó.
- Khách cũng có thể di chuyển đường phân cách bằng bàn phím.
- Khách đã bật giảm chuyển động trên thiết bị sẽ không thấy chuyển động gợi ý.
- Ảnh trông bị cắt? Hãy chọn Tỷ lệ gần nhất với ảnh của bạn, hoặc dùng các ảnh cùng hình dạng.
- Chỉ dùng ảnh thật về kết quả thật.