Section
Last updated
Last updated
Tất cả các page ngoại trừ Customer Account page, Gift Card và Checkout thì đều phải viết dưới dạng JSON template.
Các section riêng của từng page không sử dụng preset.
Tên file: dùng tiền tố halo-tên-section.liquid
Tên section và preset: đặt theo chức năng của section hoặc dạng layout của section đang cần làm. Thường dùng là Image banner, Custom banner, Slideshow, Fullwidth banner, Image gallery, Icon with text,...Nếu có nhiều section trùng tên thì thêm số thứ tự như 1, 2, 3...vào cuối mỗi tên section để phân biệt.
Canh chỉnh content theo chiều ngang: Left, Center, Right.
Canh chỉnh content theo chiều dọc: Top, Middle, Bottom.
Canh chỉnh text: Left, Center, Right, Justify
Các section như slideshow, fullwidth banner hoặc các section có banner lớn chiểm khoảng nửa màn hình thì điều hướng conntent sẽ viết section cho khách chọn như ví dụ sau:
Canh chỉnh content theo chiều ngang: Center.
Canh chỉnh content theo chiều dọc: nằm trên banner (absolute) hoặc nằm phía dưới banner (relative).
Canh chỉnh text: Left, Center, Right, Justify
Phần lớn mỗi section sẽ bao gồm một phần tiêu đề gồm: Heading, Description và Button/Link.
Các setting cần có cho phần này:
Input text: nhập Heading
Rich text: nhập Description
Input text: nhập Button text/Link text
Input URL: nhập Button URL/Link url
Select dropdown: chọn style cho Button/Link
Select dropdown: chọn canh chỉnh text theo Left, Center, Right.
Mỗi section có ít nhất một layout mặc định như design. Khi làm theme có thể bổ sung theme layout và style để cho section đó được đa dạng phong cách, khách hàng có thể dễ dàng tùy biến nếu cần. Tuy nhiên, việc bổ sung layout và style cần xem xét đến việc ảnh hưởng đến các setting khác hiện đã có, một section nên giới hạn tối đa 4 layout và style.
Các layout thường dùng:
Grid và Slider trên desktop
Grid, Swipe và Slider trên mobile
Image first và Content first trên desktop. Ở mobile mặc định sẽ show image first.
Các style thường dùng để điều chỉnh về khoảng cách giữa các phần trong content.
Mỗi section sẽ có một setting để có thể chọn được container cho section đó.
Mỗi section sẽ có setting điều chỉnh khoảng cách giữa các section trên mobile, tablet và desktop
Đối với những section có layout Grid hoặc Slider gồm nhiều item thì phải có những setting như sau:
Grid Gap hoặc Column Spacing: Khoảng cách giữa các column/item với nhau
Column: Số lượng item được show trên một hàng
Đối với những section như slideshow, fullwidth banner hoặc các section có banner lớn chiểm khoảng nửa màn hình thì phải có setting để có thể upload image riêng cho mobile:
Đối với những section có layout Grid hoặc Slider gồm nhiều item thì phải có setting để lựa chọn được kích thước của image sau đó phù hợp:
Adapt to image: image sẽ tự động canh chỉnh theo tỉ lệ kích thước gốc của image
Portrait: image sẽ tự động canh chỉnh theo một tỉ lệ nhất định, tất cả các image khách trên cùng section sẽ có kích thước theo tỉ lệ này. Khi lựa chọn option này, khách hàng sẽ điều chỉnh tỉ lệ của image bằng một setting khác.
Square: image sẽ tự động canh chỉnh thành hình vuông.
Circle: image sẽ tự động canh chỉnh thành hình tròn.
Đối với những section có layout dạng Slider thì phải có những setting như sau:
Show dots
Show arrows
Những setting về typography liên quan đến content của section (không bao gồm tiêu đề của section):
Font-family: cho title và text
Font-size: cho tiêu đề và text ở mobile và desktop
Font-weight: cho title và text
Text-transform: cho tiêu đề và text
Background color
Bacground gradient: sử dụng màu gradient cho background, khi không có màu gradient sẽ sử dụng màu Background color
Background image: sử dụng image cho background, thêm setting để có thể tùy chỉnh thành dạng parallax nếu có thể.
Color: tùy mỗi section để viết setting cho title, text,...color riêng biệt.
