Trang này hiển thị một nhóm các sản phẩm hoặc nội dung liên quan.
Với Concept , chủ đề Shopify dành cho OS 2.0 , bạn có khả năng thêmnhiều phần khác nhau trên mỗi trang. Điều này có nghĩa là bạn hoàn toàn có thể tùy chỉnh giao diện trang bộ sưu tập của mình bằng cách thêm bất kỳ phần nào bạn muốn. Chỉ cần nhấp vào nút Thêm phần và chọn các phần bạn muốn xuất hiện trên trang của mình. Với điều này, bạn có thể tạo một trang bộ sưu tập hấp dẫn về mặt trực quan để thu hút khách truy cập và cung cấp thông tin.
Theo mặc định, các trang bộ sưu tập có các phần sau:
1. Banner sưu tập
Sự miêu tả | ||
---|---|---|
Biểu ngữ bộ sưu tập Thêm mô tả hoặc hình ảnh bằng cách chỉnh sửa bộ sưu tập của bạn. Tìm hiểu thêm . | ||
Cho phép tiêu đề trong suốt | Cho phép hiển thị tiêu đề trong suốt. Cài đặt này chỉ áp dụng khi phần này là phần đầu tiên. | |
Hiển thị hình ảnh bộ sưu tập | Cho phép hiển thị hình ảnh bộ sưu tập. Để có kết quả tốt nhất, hãy sử dụng hình ảnh có tỷ lệ khung hình 16:9. Tìm hiểu thêm . | |
Hình ảnh | Chọn/Tải lên hình ảnh phần. Mặc định là hình ảnh bộ sưu tập. | |
Chiều cao máy tính để bàn | Xác định chiều cao của hình ảnh khi xem trên máy tính để bàn:
| |
Vị trí nội dung trên máy tính để bàn | Đặt vị trí của nội dung trên màn hình: | |
Căn chỉnh nội dung trên máy tính để bàn | Đặt căn chỉnh nội dung trên màn hình: | |
Bố cục di động | ||
Chiều cao di động | Xác định chiều cao của hình ảnh khi xem trên thiết bị di động:
| |
Vị trí nội dung di động | Đặt vị trí của nội dung trên trình duyệt di động: | |
Căn chỉnh nội dung di động | Đặt căn chỉnh nội dung trên trình duyệt di động: | |
Màu sắc | Bạn có thể tùy ý tùy chỉnh màu sắc của phần, bao gồm:
| |
Phần | ||
Bạn có thể điều chỉnh phần đệm trên cùng và phần đệm dưới cùng từ 0px đến 120px với bước tăng 4px. | ||
Hiển thị phần chia | Hiển thị một đường phân chia phía trên phần này.. | |
Làm cho phần có chiều rộng đầy đủ | Làm cho vùng chứa có chiều rộng đầy đủ. | |
Làm tròn phần | Áp dụng một cạnh tròn cho hai góc trên cùng. | |
Kích hoạt hiệu ứng thị sai | Bật hiệu ứng thị sai để tạo ảo giác về chiều sâu trong hình ảnh hoặc cảnh hai chiều. Hướng thị sai có thể chọn một trong 3 phương án sau: | |
CSS tùy chỉnh | Thêm CSS tùy chỉnh vào phần này. |
Các khối có sẵn:
- 1.1 Tiêu đề bộ sưu tập
- 1.2 Mô tả bộ sưu tập
- 1.3 Đường dẫn
- 1.4 Khoảng trống
1.1 Cài đặt cho khối tiêu đề Bộ sưu tập.
Kích thước văn bản có thể được đặt thành một trong các tùy chọn sau:
1.2 Cài đặt cho khối mô tả Bộ sưu tập.
Sự miêu tả | ||
---|---|---|
Mô tả bộ sưu tập | ||
Cỡ chữ | Kích thước văn bản có thể được đặt thành một trong các tùy chọn sau: Tùy chọn tùy chỉnh cho phép bạn đặt kích thước văn bản thành bất kỳ giá trị nào bạn muốn, từ 12px đến 128px, tăng số học là 2px. | |
Phông chữ văn bản | Chọn giữa 2 tùy chọn cho định dạng văn bản: Nội dung hoặc Tiêu đề . | |
Sử dụng màu phụ | Cho phép hiển thị màu thứ cấp. |
1.3 Cài đặt cho khối Breadcrumb.
Cho phép hiển thị trang bộ sưu tập trong danh sách đường dẫn.
1.4 Cài đặt cho Khối không gian trống.
Sự miêu tả | ||
---|---|---|
Không gian trống | ||
Chiều cao máy tính để bàn | Xác định chiều cao của khoảng trống khi xem trên màn hình. Có thể từ 0px đến 120px, tăng số học là 4px. Mặc định là 40px. | |
Chiều cao di động | Xác định chiều cao của khoảng trống khi xem trên thiết bị di động. Có thể từ 0px đến 120px, tăng số học là 4px. Mặc định là 28px. |
2. Lưới sản phẩm
Cài đặt phần | Cài đặt | Sự miêu tả |
---|---|---|
Lưới sản phẩm | ||
Sản phẩm trên mỗi trang | Số lượng sản phẩm hiển thị trên trang, được điều chỉnh từ 6 thành 50. | |
Số cột trên màn hình | Số cột hiển thị trên trang, được điều chỉnh từ 1 đến 5. | |
Số cột trên thiết bị di động | Tùy chỉnh số lượng cột hiển thị trên trình duyệt di động: 1 cột hoặc 2 cột . | |
Lọc và sắp xếp | ||
Bật lọc | Cho phép khách hàng lọc các sản phẩm trong bộ sưu tập dựa trên các bộ lọc trong cài đặt Điều hướng của bạn. Tùy chỉnh bộ lọc bằng ứng dụng Tìm kiếm & Khám phá. Tìm hiểu thêm . | |
Thu gọn bộ lọc | Cho phép thu gọn bộ lọc. | |
Bố trí bộ lọc máy tính để bàn | Chọn bố cục bộ lọc trên màn hình mà bạn thích nhất: Thanh bên hoặc Ngăn kéo . | |
Kích hoạt mẫu màu | Cho phép các mẫu màu. Xem hướng dẫn thiết lập . | |
Bật sắp xếp | Cho phép khách hàng sắp xếp sản phẩm trong bộ sưu tập dựa trên các thông tin sau:
| |
Phần | ||
Có thể điều chỉnh phần đệm ở phần đệm trên và đệm dưới từ 0px đến 120px, tăng số học là 4px. | ||
Hiển thị phần chia | Hiển thị một đường phân chia phía trên phần này.. | |
Làm cho phần có chiều rộng đầy đủ | Làm cho vùng chứa có chiều rộng đầy đủ. | |
Làm tròn phần | Áp dụng một cạnh tròn cho hai góc trên cùng. | |
CSS tùy chỉnh | Thêm CSS tùy chỉnh vào phần này. |
Các khối có sẵn:
- 2.1 Mô tả bộ sưu tập
- 2.2 Bộ sưu tập con
- 2.3 Khuyến mãi
2.1 Cài đặt cho khối mô tả Bộ sưu tập.
Không có cài đặt tùy chỉnh có sẵn.
2.2 Cài đặt cho khối Subcollection.
Chặn cài đặt | Sự miêu tả | |
---|---|---|
Bộ sưu tập con Liên kết tới các bộ sưu tập từ menu của bạn sẽ xuất hiện ở đây. Tìm hiểu thêm . | ||
Thực đơn | Chọn/Chọn menu bạn muốn hiển thị. | |
Bộ sưu tập con mỗi hàng | Chọn số lượng bộ sưu tập con để hiển thị trên mỗi hàng, từ 2 đến 5. | |
Hiển thị số lượng bộ sưu tập | Hiển thị số lượng sản phẩm trong mỗi bộ sưu tập. |
2.3 Cài đặt cho khối Khuyến mãi.
Chặn cài đặt | Sự miêu tả | |
---|---|---|
Khuyến mãi Các khối có thể bị ẩn nếu không hiển thị đủ sản phẩm. | ||
Vị trí trong lưới | Tọa độ của khối trong lưới, từ trái sang phải và từ trên xuống dưới. | |
Hình ảnh | Chọn/Tải lên hình ảnh khối. | |
Biểu tượng | Chọn/Tải lên hình ảnh biểu tượng. | |
Phần mở đầu | Tiêu đề khối. | |
Sự miêu tả | Văn bản mô tả cho tiêu đề được đặt bên dưới tiêu đề. | |
Nhãn nút | Văn bản hiển thị trên nút. | |
Liên kết nút | URL của nút. | |
Vị trí nội dung trên máy tính để bàn | Đặt vị trí của nội dung trên màn hình: | |
Căn chỉnh nội dung trên máy tính để bàn | Đặt căn chỉnh nội dung trên màn hình: | |
Bố cục di động | ||
Hình ảnh trên thiết bị di động | Hình ảnh của phần trên trình duyệt di động. | |
Vị trí nội dung di động | Đặt vị trí của nội dung trên trình duyệt di động: | |
Căn chỉnh nội dung di động | Đặt căn chỉnh nội dung trên trình duyệt di động: | |
Màu sắc | Bạn có thể tùy ý tùy chỉnh màu sắc của phần, bao gồm:
|
3. Hình ảnh có văn bản
Phần này cho phép bạn hiển thị đồng thời tối đa 5 hình ảnh mang lại sự linh hoạt hơn trong thiết kế cho trang của bạn.
Cài đặt phần | Sự miêu tả | |
---|---|---|
Hình ảnh có lớp phủ văn bản | ||
Cho phép tiêu đề trong suốt | Cài đặt này chỉ áp dụng khi phần này là phần đầu tiên | |
Chiều cao máy tính để bàn | Xác định chiều cao của hình ảnh khi xem trên máy tính để bàn:
| |
Chiều rộng nội dung trên máy tính để bàn | Xác định chiều rộng của hình ảnh khi xem trên máy tính để bàn: | |
Vị trí nội dung trên máy tính để bàn | Đặt vị trí của nội dung trên màn hình: | |
Căn chỉnh nội dung trên máy tính để bàn | Đặt căn chỉnh nội dung trên màn hình: | |
Hình ảnh #1 #2 #3 #4 #5 | Các hình ảnh cho phần trên trình duyệt máy tính để bàn. | |
Bố cục di động | ||
Chiều cao di động | Xác định chiều cao của hình ảnh khi xem trên thiết bị di động:
| |
Vị trí nội dung di động | Đặt vị trí của nội dung trên trình duyệt di động: | |
Căn chỉnh nội dung di động | Đặt căn chỉnh nội dung trên trình duyệt di động: | |
Màu sắc | Bạn có thể tùy ý tùy chỉnh màu sắc của phần, bao gồm:
| |
Phần | ||
Có thể điều chỉnh phần đệm ở phần đệm trên và đệm dưới từ 0px đến 120px, tăng số học là 4px. | ||
Hiển thị phần chia | Hiển thị một đường phân chia phía trên phần này.. | |
Làm cho phần có chiều rộng đầy đủ | Làm cho vùng chứa có chiều rộng đầy đủ. | |
Làm tròn phần | Áp dụng một cạnh tròn cho hai góc trên cùng. | |
Kích hoạt hiệu ứng thị sai | Bật để hiển thị hiệu ứng thị sai, tạo ảo giác về chiều sâu trong hình ảnh hoặc cảnh hai chiều. | |
CSS tùy chỉnh | Thêm CSS tùy chỉnh vào phần này. |
Các khối có sẵn:
- 3.1 Tiêu đề
- 3.2 Tiêu đề phụ
- 3.3 Văn bản
- 3.4 Nút
- 3.5 Liên kết
- 3.6 Hình ảnh
- 3.7 Chất lỏng tùy chỉnh
- 3.8 Khoảng trống
3.1 Cài đặt cho khối Tiêu đề.
Sự miêu tả | ||
---|---|---|
Phần mở đầu | ||
Phần mở đầu | Tiêu đề khối. | |
Kích thước tiêu đề | Kích thước tiêu đề có thể được đặt thành một trong các tùy chọn sau: Nhỏ , Trung bình , Lớn hoặc Cực lớn . | |
Thẻ tiêu đề | Chọn thẻ tiêu đề để cấu trúc và sắp xếp nội dung của bạn cho SEO. | |
Văn bản được đánh dấu | ||
Văn bản được đánh dấu | Chọn một trong 6 tùy chọn sau để định dạng văn bản của bạn:
| |
Chữ viết nguệch ngoạc được đánh dấu Yêu cầu đặt kiểu văn bản được đánh dấu thành nét vẽ nguệch ngoạc bằng tay. | Cài đặt này cung cấp 5 cách để đánh dấu văn bản:
|
3.2 Cài đặt cho khối Tiêu đề phụ.
Sự miêu tả | ||
---|---|---|
Tiêu đề phụ | ||
Tiêu đề phụ | Tiêu đề phụ cho tiêu đề. | |
Kích thước tiêu đề phụ | Kích thước tiêu đề phụ: | |
Sử dụng màu phụ | Áp dụng màu nhạt hơn một chút dựa trên màu văn bản. |
3.3 Cài đặt cho khối Văn bản.
Sự miêu tả | ||
---|---|---|
Chữ | ||
Chữ | Thêm văn bản của bạn. | |
Cỡ chữ | Kích thước văn bản có thể được đặt thành một trong các tùy chọn sau: Tùy chọn tùy chỉnh cho phép bạn đặt kích thước văn bản thành bất kỳ giá trị nào bạn muốn, từ 12px đến 128px, tăng số học là 2px. | |
Phông chữ văn bản | Chọn giữa 2 tùy chọn cho định dạng văn bản: Nội dung hoặc Tiêu đề . | |
Sử dụng màu phụ | Kích hoạt màu thứ hai. | |
Văn bản được đánh dấu | ||
Văn bản được đánh dấu | Chọn một trong 6 tùy chọn sau để định dạng văn bản của bạn:
| |
Chữ viết nguệch ngoạc được đánh dấu Yêu cầu đặt kiểu văn bản được đánh dấu thành nét vẽ nguệch ngoạc bằng tay. | Cài đặt này cung cấp 5 cách để đánh dấu văn bản:
|
3.4 Cài đặt cho khối Nút.
Sự miêu tả | ||
---|---|---|
Cái nút | ||
Nhãn nút | Văn bản hiển thị trên nút. | |
Liên kết nút | URL của nút. | |
Kích thước nút | Điều chỉnh kích thước của nút theo 3 tùy chọn: Nhỏ, Trung bình hoặc Lớn | |
Sử dụng kiểu nút phác thảo | Sử dụng kiểu phác thảo cho nút. |
3.5 Cài đặt cho khối Liên kết.
Sự miêu tả | ||
---|---|---|
liên kết | ||
Chữ | Văn bản của liên kết được đặt ngay bên cạnh nút. | |
liên kết | Thêm URL bạn muốn liên kết. |
3.6 Cài đặt cho khối Hình ảnh.
Sự miêu tả | ||
---|---|---|
Hình ảnh | ||
Hình ảnh | Chọn một hình ảnh cho khối. | |
Chiều rộng hình ảnh | Chọn một trong hai tùy chọn chiều rộng hình ảnh:
|
3.7 Cài đặt cho khối chất lỏng Tùy chỉnh.
Bạn có thể thêm mã Liquid của riêng mình để tạo khối tùy chỉnh.
3.8 Cài đặt cho khối không gian trống.
Sự miêu tả | ||
---|---|---|
Không gian trống | ||
Chiều cao máy tính để bàn | Xác định chiều cao của khoảng trống khi xem trên màn hình. Có thể từ 0px đến 120px, tăng số học là 4px. Mặc định là 40px. | |
Chiều cao di động | Xác định chiều cao của khoảng trống khi xem trên thiết bị di động. Có thể từ 0px đến 120px, tăng số học là 4px. Mặc định là 28px. |
4. Đã xem gần đây
Giúp khách hàng của bạn tìm thấy các sản phẩm họ đã truy cập trước đây và nhắc họ mua hàng. Điều này sẽ giúp khách hàng của bạn tìm lại chúng dễ dàng hơn thay vì tìm đường qua menu điều hướng.
Sự miêu tả | ||
---|---|---|
Đã xem gần đây | ||
Số lượng sản phẩm gần đây | Số lượng sản phẩm bổ sung có thể dao động từ 2 đến 12. | |
Số cột trên màn hình | Tùy chỉnh số lượng cột hiển thị trên trình duyệt máy tính để bàn từ 1 cột đến 5 cột | |
Bật băng chuyền trên máy tính để bàn | Hiển thị băng chuyền các sản phẩm từ bộ sưu tập trên trình duyệt trên máy tính để bàn. | |
Bố cục di động | ||
Số cột trên thiết bị di động | Tùy chỉnh số lượng cột hiển thị trên trình duyệt di động: 1 cột hoặc 2 cột . | |
Bật thao tác vuốt trên thiết bị di động | Đặt hiển thị trên thiết bị di động thành một hàng bằng thao tác vuốt ngang. | |
Phần mở đầu | ||
Phần mở đầu | Tiêu đề phần. | |
Kích thước tiêu đề | Kích thước tiêu đề có thể được đặt thành một trong các tùy chọn sau: Nhỏ , Trung bình , Lớn hoặc Cực lớn . | |
Căn chỉnh tiêu đề | Tiêu đề có thể được căn chỉnh sang Trái , Giữa hoặc Phải . | |
Thẻ tiêu đề | Chọn thẻ tiêu đề để cấu trúc và sắp xếp nội dung của bạn cho SEO. | |
Tiêu đề phụ | Tiêu đề phụ cho tiêu đề được đặt phía trên tiêu đề. | |
Sự miêu tả | Văn bản mô tả cho tiêu đề được đặt bên dưới tiêu đề. | |
Văn bản được đánh dấu | ||
Văn bản được đánh dấu | Chọn một trong 6 tùy chọn sau để định dạng văn bản của bạn:
| |
Chữ viết nguệch ngoạc được đánh dấu Yêu cầu đặt kiểu văn bản được đánh dấu thành nét vẽ nguệch ngoạc bằng tay. | Cài đặt này cung cấp 5 cách để đánh dấu văn bản:
| |
Màu sắc | Bạn có thể tùy ý tùy chỉnh màu sắc của phần, bao gồm:
| |
Phần | ||
Có thể điều chỉnh phần đệm ở phần đệm trên và đệm dưới từ 0px đến 120px, tăng số học là 4px. | ||
Hiển thị phần chia | Hiển thị một đường phân chia phía trên phần này.. | |
Làm cho phần có chiều rộng đầy đủ | Làm cho vùng chứa có chiều rộng đầy đủ. | |
Làm tròn phần | Áp dụng một cạnh tròn cho hai góc trên cùng. | |
CSS tùy chỉnh | Thêm CSS tùy chỉnh vào phần này. |
Phần này không hỗ trợ thêm khối.
Chúng tôi hy vọng bài viết này hữu ích. Nếu bạn có bất kỳ câu hỏi hoặc thắc mắc nào về tính năng này, vui lòng liên hệ với nhóm của chúng tôi để được hỗ trợ.