Phần và khối

Bạn có thể sử dụng các phần trong chủ đề để tạo bố cục mong muốn cho cửa hàng trực tuyến. Phần được tạo thành từ các loại khối khác nhau, mỗi khối có một chức năng cụ thể, chẳng hạn như văn bản, nút, hình ảnh đơn, ảnh ghép hoặc liên kết.

Phần và khối mang lại sự linh hoạt trong cách bạn sắp xếp nội dung và cho phép bạn kiểm soát kiểu dáng cũng như cảm giác của cửa hàng trực tuyến mà không cần chỉnh sửa mã, bao gồm các tùy chọn tùy chỉnh sau:

• Bạn có thể sắp xếp lại các phần trong mẫu và sắp xếp lại các khối trong từng phần.
• Các phần và khối có thể có các cài đặt tùy chỉnh riêng biệt.
• Bạn có thể kết nối các phần và khối tương thích để hiển thị thông tin động trên cửa hàng trực tuyến lấy từ dữ liệu tùy chỉnh, ví dụ như thêm hướng dẫn bảo quản sản phẩm. Tìm hiểu thêm về cách kết nối nguồn động.

Các phần và khối có sẵn trong trình biên tập chủ đề phụ thuộc vào chủ đề và phiên bản chủ đề. Ví dụ: chủ đề có thể có khối Trang chiếu chỉ thêm được vào phần Bản trình chiếu và khối văn bản Tiêu đề có thể thêm vào mọi phần của chủ đề. Để biết thêm thông tin về các tùy chọn hiện có, hãy tham khảo tài liệu hướng dẫn của chủ đề.

Giới hạn tối đa của phần và khối

Các phần và khối có những giới hạn tối đa sau:

• Mỗi mẫu có thể có tối đa 25 phần.
• Mỗi mẫu có thể có tối đa 1.250 khối trên tất cả các phần. Số lượng khối chính xác và số lượng mỗi loại khối bạn có thể thêm vào từng phần phụ thuộc vào nguồn của phần và khối, do nhà thiết kế chủ đề quy định cho chủ đề của bạn. Ví dụ: nếu chủ đề có phần Đăng ký email thì bạn chỉ có thể thêm một khối Biểu mẫu email.
• Các khối hỗ trợ lồng nhau có thể lồng tối đa 8 cấp độ khối.

Nguồn của khối

Tùy thuộc vào cấu trúc của chủ đề và ứng dụng đã cài đặt, chủ đề của bạn có thể chứa nhiều phần chấp nhận khối từ các nguồn khác nhau. Khi bạn thêm khối vào một phần, tất cả các khối có sẵn cho phần đó sẽ hiển thị trong công cụ chọn khối. Tùy thuộc vào chủ đề và phiên bản chủ đề, bạn có thể thêm các loại khối sau vào những phần trong chủ đề:

• Khối ứng dụng là các khối bổ sung chức năng cho chủ đề. Bạn có thể sử dụng khối ứng dụng để thay đổi vị trí của các khu vực trong chủ đề do ứng dụng đã cài đặt thêm vào thành khu vực cụ thể trên một trang trong chủ đề.
• Khối của phần là các khối được xác định trong một phần cụ thể.
• Khối chủ đề là các khối được xác định trong chủ đề và có thể có chức năng động, chẳng hạn như lồng nhau.

Chủ đề có thể chứa một số phần sử dụng khối của phần và các phần khác sử dụng khối chủ đề. Một phần chỉ có thể chấp nhận khối chủ đề hoặc khối của phần chứ không được kết hợp cả hai.

Tính khả dụng của khối ứng dụng trong các phần phụ thuộc vào chức năng của ứng dụng và việc phần đó có chấp nhận khối ứng dụng hay không.

Khối của phần

Khối của phần là các khối được thiết kế cho một phần cụ thể. Một phần có thể giới hạn loại khối của phần và giới hạn số lượng của một loại khối nhất định bạn có thể thêm.

Ví dụ về một phần chứa các khối của phần

Ví dụ: chủ đề của bạn có phần Đăng ký email. Bạn có thể sử dụng phần này để thêm biểu mẫu đăng ký bản tin để khách hàng có thể đăng ký nhận bản tin của bạn. Sau khi thêm phần Đăng ký email, bạn có thể thêm một trong mỗi khối sau:

• khối Biểu mẫu email
• khối Tiêu đề
• khối Tiêu đề phụ

Nếu bạn thêm khối Biểu mẫu email rồi nhấp vào Thêm khối để thêm khối khác, khối Biểu mẫu email sẽ không còn hiển thị dưới dạng tùy chọn trong công cụ chọn khối nữa. Giới hạn này giúp ngăn chặn bất kỳ sự cố nào khi thu thập email của khách hàng và đảm bảo khách hàng có thể dễ dàng nhập địa chỉ email của họ.

Nếu bạn đã thêm cả ba khối có sẵn cho phần Đăng ký email, công cụ chọn khối sẽ hiển thị thông báo rằng tất cả các khối có sẵn đã được sử dụng.

Khối chủ đề

Khối chủ đề là các khối được xác định trong chủ đề và có thể có chức năng động, chẳng hạn như lồng nhau. Các phần chấp nhận khối chủ đề có thể chấp nhận nhiều loại khối khác nhau, tùy thuộc vào cấu trúc của phần. Một phần chấp nhận khối chủ đề có thể chấp nhận tất cả các khối chủ đề có sẵn, một nhóm khối cụ thể hoặc các khối chỉ dành riêng cho phần đó. Các khối chủ đề cũng có thể có các hoạt động sau:

• Một số khối hỗ trợ lồng nhau, nhờ đó bạn có thể lồng khối trong khối khác lên đến 8 cấp độ.
• Một số phần có các khối bắt buộc. Bạn có thể tùy chỉnh hoặc ẩn các khối này nhưng không thể sắp xếp lại hay xóa chúng.
• Một số khối tự động hiển thị trong một phần khi đáp ứng một số điều kiện nhất định.

Ví dụ về một phần có các khối chủ đề

Ví dụ: chủ đề của bạn có phần Bản trình chiếu có các khối chủ đề.

Trong phần bản trình chiếu của chủ đề, khi bạn nhấp vào Thêm khối, bạn có thể chọn khối Trang chiếu trong công cụ chọn khối. Không có loại khối nào khác để chọn. Nếu bạn cố thêm khối Trang chiếu vào phần khác trong chủ đề, chẳng hạn như phần Biểu ngữ hình ảnh, thì khối Trang chiếu sẽ không khả dụng. Đây là một ví dụ về khối bị hạn chế.

Sau khi thêm khối Trang chiếu vào phần Bản trình chiếu, bạn có thể nhấp vào Thêm khối để thêm các khối khác vào bất kỳ khối Trang chiếu nào trong phần Bản trình chiếu, chẳng hạn như Tiêu đề, Hình ảnh, Nút. Những khối này được lồng trong khối Trang chiếu. Đây là một ví dụ về khối lồng nhau.

Nếu bạn thêm khối Trang chiếu thứ hai vào phần Bản trình chiếu, chủ đề sẽ tự động thêm khối Chức năng điều khiển bản trình chiếu. Khối này hiển thị các nút mà khách truy cập trang web có thể nhấp vào để điều hướng từ trang chiếu này sang trang chiếu khác. Bạn có thể tùy chỉnh kiểu nút hoặc ẩn chức năng điều khiển nhưng không thể gỡ bỏ hoặc xóa khối. Đây là ví dụ về khối bắt buộc hiển thị theo điều kiện.

Khả năng tương thích của khối chủ đề

Để truy cập khối chủ đề, chủ đề của bạn phải có các phần hỗ trợ khối chủ đề. Bạn có thể kiểm tra xem chủ đề có hỗ trợ khối chủ đề không trong mã chủ đề. Nếu có thư mục blocks ở thanh bên của trình biên tập liquid, bạn đang sử dụng chủ đề hỗ trợ khối chủ đề. Bạn cũng có thể kiểm tra tài liệu về chủ đề.

Các bước:

1. Từ trang quản trị Shopify, đi tới Cửa hàng trực tuyến > Chủ đề.

2. Cạnh chủ đề bạn muốn kiểm tra, nhấp vào nút , rồi nhấp vào Chỉnh sửa mã.

3. Trong thanh bên, tìm kiếm thư mục blocks.

   

Tùy chỉnh mẫu chủ đề bằng phần và khối

Khi mở trình biên tập chủ đề, trang chủ cửa hàng sẽ tải theo mặc định. Bạn có thể sử dụng menu thả xuống để chọn mẫu khác như sản phẩm, bộ sưu tập, trang hoặc blog; hoặc sử dụng thanh tìm kiếm trong menu thả xuống để tìm một mẫu cụ thể. Khi bạn chọn mẫu, mẫu đó sẽ tải vào trình biên tập chủ đề và mọi thay đổi bạn thực hiện sẽ được xem trước trong trình biên tập.

Thêm phần

Thêm phần mới vào trang bất kỳ trong cửa hàng trực tuyến.

Các bước:

Chỉnh sửa phần

Sắp xếp lại phần hoặc khối

Bạn có thể thay đổi thứ tự các phần trên mẫu trang và sắp xếp lại các khối trong những phần đó. Ngoài ra, bạn có thể di chuyển các khối tương thích giữa nhiều phần khác nhau. Ví dụ: Nếu trang chủ có hai phần Bản trình chiếu, bạn có thể kéo khối Trang chiếu từ bản trình chiếu này sang bản trình chiếu kia.

Bạn không thể di chuyển khối sang một phần khác nếu loại khối không tương thích hoặc nếu phần đã đạt giới hạn tối đa về số khối. Nếu bạn cố di chuyển một phần hoặc khối đến vị trí không hợp lệ, phần hoặc khối đó sẽ trở lại vị trí ban đầu.

Bạn cũng có thể sử dụng công cụ kiểm tra bản xem trước để sắp xếp lại các phần. Tìm hiểu thêm về việc sử dụng công cụ kiểm tra bản xem trước trong trình biên tập chủ đề.

Các bước:

Nhân bản phần hoặc khối

Bạn có thể nhân bản một phần hoặc khối để tạo bản sao y hệt của phần hoặc khối đó.

Sau khi bạn nhân bản khối, khối mới sẽ được thêm vào cùng phần đó. Nếu muốn di chuyển khối sang phần mới hoặc thay đổi thứ tự khối, bạn có thể sắp xếp lại khối. Bạn cũng có thể sao chép khối, rồi dán trực tiếp vào một phần khác.

Sao chép và dán khối

Nếu muốn dùng cùng một khối trong nhiều phần, bạn có thể dễ dàng sao chép và dán khối đó vào một phần khác. Bạn cũng có thể sao chép và dán khối trong cùng một phần, hoặc chọn nhân bản khối. Khối được nhân bản sẽ giữ nguyên mọi cài đặt và nội dung của khối gốc.

Các bước:

1. Từ trang quản trị Shopify, đi tới Cửa hàng trực tuyến > Chủ đề.

2. Bên cạnh chủ đề bạn muốn chỉnh sửa, nhấp vào Chỉnh sửa chủ đề.

3. Để sao chép và dán một khối trên trang chủ, hãy chọn trực tiếp khối đó hoặc dùng menu thả xuống Trang chủ để chọn mẫu cụ thể chứa phần hoặc khối bạn muốn chỉnh sửa.

4. Nhấp chuột phải vào khối bạn muốn nhân bản rồi nhấp vào Sao chép.

5. Trong cùng một phần hoặc ở phần khác, nhấp chuột phải vào phần đó rồi nhấp vào Dán.

6. Nhấp vào Lưu.

Ẩn hoặc xóa phần hay khối

Đổi tên phần hoặc khối

Theo mặc định, tiêu đề phần hoặc khối trong chi tiết cài đặt và menu thanh bên của trình biên tập chủ đề được đặt thành loại khối hoặc phần, ví dụ như "Bộ sưu tập" hoặc "Văn bản".

Đối với các khối, nếu cài đặt khối có chứa trường văn bản, chẳng hạn như tiêu đề hoặc phần mô tả, văn bản đó cũng sẽ được nối vào tiêu đề trong menu thanh bên. Nếu có nhiều trường văn bản, thì trường văn bản đầu tiên có nội dung sẽ được nối vào. Khi bạn thay đổi văn bản trong trường văn bản, tiêu đề khối sẽ thay đổi để bao gồm văn bản đã cập nhật. Tên khối hoặc phần không được để trống.

Ví dụ: bạn thêm phần Nhiều cột vào mẫu trang chứa các khối Cột. Khối cột có cài đặt Tiêu đề chứa văn bản mặc định Cột và cài đặt Mô tả chứa văn bản mặc định Ghép nối văn bản với hình ảnh để tập trung vào sản phẩm, bộ sưu tập hoặc bài viết blog đã chọn.. Tiêu đề phần mặc định là Nhiều cột. Tiêu đề khối Cột mặc định là Cột - Cột. Nếu bạn xóa văn bản khỏi phần Tiêu đề, tiêu đề khối sẽ cập nhật thành Cột - Ghép nối văn bản với hình...

Bạn có thể đổi tên phần hoặc khối bất kỳ thành tên tùy chỉnh trong cài đặt phần hoặc khối, ở menu thanh bên của trình biên tập chủ đề.

Các bước:

Làm việc với khối

Khối là các mô-đun có thể tùy chỉnh được dùng để thêm nội dung vào các phần trong mẫu. Bạn có thể sử dụng khối để thêm văn bản, hình ảnh, liên kết, nút, v.v.

Các chủ đề Shopify có nhiều phần và khối mà bạn có thể tùy chỉnh. Một số phần có loại khối cố định, nghĩa là bạn chỉ có thể chọn những khối do nhà thiết kế chủ đề cung cấp cho phần đó.

Các phần khác cho phép bạn chọn khối bất kỳ nhưng sẽ có giới hạn về tổng số khối có thể thêm vào phần. Nếu phần đạt đến số lượng khối tối đa cho phép, thì tùy chọn Thêm khối sẽ chuyển sang màu xám và bạn không thể nhấp hay chạm vào đó.

Bạn có thể tìm kiếm khối cụ thể theo tên hoặc chọn khối trong menu thả xuống của công cụ chọn khối. Các khối trong chủ đề có thể được phân loại trong công cụ chọn khối, ví dụ như Bộ sưu tập dành cho khối dùng công cụ chọn bộ sưu tập hoặc Đa phương tiện dành cho khối video và hình ảnh.

Bản xem trước của khối sẽ hiển thị trong công cụ chọn khối để bạn kiểm tra giao diện của khối trước khi thêm.

Thêm khối

Sử dụng trường siêu dữ liệu và siêu đối tượng có nguồn động

Bạn có thể sử dụng trường siêu dữ liệu và siêu đối tượng để hiển thị thông tin động trên cửa hàng trực tuyến. Nếu có chủ đề hỗ trợ trường siêu dữ liệu, bạn có thể kết nối trường siêu dữ liệu với cài đặt phần hoặc khối tương thích trong trình biên tập chủ đề.

Ví dụ: nếu bán nến, có thể bạn sẽ muốn hiển thị thời gian cháy của từng loại nến trong cửa hàng. Sau khi thiết lập trường siêu dữ liệu sản phẩm cho Thời gian cháy trong phần Dữ liệu tùy chỉnh thuộc cài đặt bảng điều khiển quản trị Shopify, bạn có thể thêm một khối văn bản vào phần chính của mẫu sản phẩm. Trong khối văn bản, hãy nhấp vào nút trên cài đặt văn bản rồi chọn trường siêu dữ liệu Thời gian cháy. Thông tin thời gian cháy giờ đây sẽ hiển thị trên sản phẩm.

Nếu có chủ đề Shopify, bạn có thể kết nối hầu hết trường siêu dữ liệu và siêu đối tượng với chủ đề bằng trình biên tập chủ đề. Nếu dùng chủ đề khác hoặc muốn thêm các loại dữ liệu tùy chỉnh mà chủ đề không hỗ trợ, bạn có thể chỉnh sửa mã chủ đề hoặc thuê Đối tác Shopify trợ giúp. Tìm hiểu thêm về cách thuê Đối tác Shopify.

Không phải mọi phần hoặc khối đều hỗ trợ nguồn động. Hãy kiểm tra phiên bản kiến trúc của chủ đề và các tùy chọn tùy chỉnh có sẵn trong trình biên tập chủ đề để xác định xem chủ đề có hỗ trợ nguồn động hay không.

Có thể hiển thị thông tin động trong cửa hàng trực tuyến bằng cách thêm các phần hoặc khối có khả năng dùng nguồn động. Nguồn động có thể được dùng trong mọi mẫu, phần hoặc khối hiển thị tài nguyên tương thích (sản phẩm, bộ sưu tập, trang, blog và bài đăng trên blog). Bạn cần thêm trường siêu dữ liệu trước khi có thể kết nối trong mẫu. Tham khảo Nguồn động để biết thêm thông tin về cách sử dụng trường siêu dữ liệu và siêu đối tượng có nguồn động trong chủ đề.

Sau khi hoàn tất quá trình thiết lập, hãy làm theo các bước dưới đây để kết nối nguồn động với phần hoặc khối trong chủ đề bằng cách dùng nút .

Các bước:

Tìm hiểu thêm về cách hiển thị trường siêu dữ liệu trên cửa hàng trực tuyến và hiển thị siêu đối tượng trên cửa hàng trực tuyến.

Bộ chọn nguồn động

Bạn có thể dùng bộ chọn nguồn động để kết nối đúng nguồn động trực tiếp trong trình biên tập chủ đề. Hãy xem xét các tính năng chính sau của bộ chọn nguồn động:

• Có thể tham chiếu nguồn động từ nhiều tài nguyên khác nhau nếu áp dụng được. Ví dụ: nếu kết nối một cài đặt với một khối được liên kết với cả tài nguyên sản phẩm và tài nguyên trang, bạn có thể dùng menu thả xuống trong bộ chọn nguồn động để chỉ định việc muốn tìm kiếm trường siêu dữ liệu liên kết với tài nguyên sản phẩm hay tài nguyên trang.
• Bộ chọn nguồn động có chức năng tìm kiếm và lọc giúp bạn dễ dàng tìm thấy trường siêu dữ liệu mong muốn.
• Bộ chọn nguồn động cho phép chọn trường siêu dữ liệu danh mục. Đây là các thuộc tính bổ sung khả dụng khi bạn gán danh mục sản phẩm cho một sản phẩm. Truy cập vào các trường siêu dữ liệu này cho phép bạn kết nối nguồn động với bất kỳ trường liên quan nào trên siêu đối tượng thuộc tính cơ bản.