Tùy chỉnh mục Header trên trang cửa hàng
Các chủ đề của cửa hàng đều bao gồm mục Header với nhiều thiết lập tích hợp cho trang cửa hàng, chẳng hạn như tùy chỉnh kích thước logo cửa hàng. Để thiết lập mục Header, đi tới Online Store > Themes > Customize > Sections > Header. Bài viết này sẽ hướng dẫn bạn cách tùy chỉnh các thiết lập trong mục Header.
A. Announcement Bar (Thanh thông báo)
B. Top Bar (Thanh tiêu đề)
C. Logo
D. Menu
E. Search (Thanh tìm kiếm)
F. Cart icons (Biểu tượng giỏ hàng)
G. Fixed sticky header (Tiêu đề cố định)
H. Layout & Padding (Bố cục & Kích thước)
Tìm hiểu về Dropshipping với PlusBase: Khóa học DropShipping From Zero to Hero
Bạn có thể bật Announcement bar (Thanh thông báo) để hiển thị thông báo dưới dạng banner ở phía đầu trang, giúp quảng cáo về các mã giảm giá trên cửa hàng hoặc hiển thị thông tin quan trọng cho khách hàng. Nội dung trong thanh thông báo này có thể được tùy chỉnh như in đậm, in nghiêng, chèn hình ảnh và đường dẫn. Nếu trường nội dung này để trống, hệ thống sẽ không hiển thị thanh thông báo này.
Đối với chủ đề Roller: Announcement bar có thể được bật trong mục Header. Chọn Show announcement bar và tùy chỉnh nội dung theo mong muốn.
Đối với chủ đề Inside: Announcement bar là một mục độc lập, bạn có thể chỉnh sửa nội dung, liên kết, màu văn bản và nền của Announcement bar theo mong muốn.
Top bar sẽ được hiển thị trên thanh menu (Main Menu) và dưới thanh thông báo (Announcement Bar).
Đối với chủ đề Roller: Tại Top Bar, bạn có thể thêm các tùy chỉnh dưới đây:
Social media header icons (biểu tượng mạng xã hội)
Phone number (số điện thoại liên hệ)
Top Bar menu (menu)
Phần thông tin cho khách hàng nếu được bật tại mục Checkout cũng sẽ được hiển thị trên Top bar.
Đối với chủ đề Inside: Bạn có chọn hiển thị menu trên Top bar bằng cách tích chọn Enable Topbar menu.
Chủ đề Roller và Inside cho phép bạn tải logo lên cửa hàng cho phiên bản máy tính (desktop logo) và phiên bản trên thiết bị di động (mobile logo). Bạn cũng có thể điều chỉnh chiều rộng của logo (với kích thước tối đa là 180px).
Tại Header, bạn có thể thiết lập hiển thị menu chính (Main Menu). Với chủ đề Inside, bạn sẽ có các tùy chọn để tùy chỉnh menu như:
Bật mega menu.
Điều chỉnh vị trí menu (Căn trái hoặc Căn giữa).
Tại Header, bạn có thể thiết lập thanh tìm kiếm. Kết quả tìm kiếm sẽ lọc theo sản phẩm. Trên phiên bản máy tính sẽ hiển thị thanh tìm kiếm. Trên thiết bị di động, thanh tìm kiếm được thu nhỏ thành biểu tượng kính lúp để người dùng có thể nhấp vào:
Bạn có thể thiết lập hiển thị giỏ hàng theo biểu tượng túi (Bag) hoặc xe đẩy (Cart):
Bạn có thể thiết lập tiêu đề cố định (Fixed (sticky) header) trên phiên bản máy tính và thiết bị di động. Nếu tích chọn fixed (sticky) header, tiêu đề sẽ được cố định khi khách mua hàng cuộn trang.
Đối với chủ đề Roller: Thiết lập Main menu top padding dành cho khu vực menu phía trên trang cửa hàng. Nếu logo ở vị trí cao, bạn có thể điều chỉnh vị trí menu xuống thấp sao cho phù hợp.
Đối với chủ đề Inside: bạn có thể chọn một trong số ba bố cục của chủ đề, chẳng hạn như Inline, Rich và Minimal. Bạn có thể điều chỉnh bằng cách kéo thả thanh kích thước theo mong muốn.
Tổng quan về Chủ đề trên cửa hàng
Nội dung bài viết
A. Announcement Bar (Thanh thông báo)
B. Top Bar (Thanh tiêu đề)
C. Logo
D. Menu
E. Search (Thanh tìm kiếm)
F. Cart icons (Biểu tượng giỏ hàng)
G. Fixed sticky header (Tiêu đề cố định)
H. Layout & Padding (Bố cục & Kích thước)
Tìm hiểu về Dropshipping với PlusBase: Khóa học DropShipping From Zero to Hero
A. Announcement Bar (Thanh thông báo)
Bạn có thể bật Announcement bar (Thanh thông báo) để hiển thị thông báo dưới dạng banner ở phía đầu trang, giúp quảng cáo về các mã giảm giá trên cửa hàng hoặc hiển thị thông tin quan trọng cho khách hàng. Nội dung trong thanh thông báo này có thể được tùy chỉnh như in đậm, in nghiêng, chèn hình ảnh và đường dẫn. Nếu trường nội dung này để trống, hệ thống sẽ không hiển thị thanh thông báo này.
Đối với chủ đề Roller: Announcement bar có thể được bật trong mục Header. Chọn Show announcement bar và tùy chỉnh nội dung theo mong muốn.
Đối với chủ đề Inside: Announcement bar là một mục độc lập, bạn có thể chỉnh sửa nội dung, liên kết, màu văn bản và nền của Announcement bar theo mong muốn.
B. Top Bar
Top bar sẽ được hiển thị trên thanh menu (Main Menu) và dưới thanh thông báo (Announcement Bar).
Đối với chủ đề Roller: Tại Top Bar, bạn có thể thêm các tùy chỉnh dưới đây:
Social media header icons (biểu tượng mạng xã hội)
Phone number (số điện thoại liên hệ)
Top Bar menu (menu)
Phần thông tin cho khách hàng nếu được bật tại mục Checkout cũng sẽ được hiển thị trên Top bar.
Đối với chủ đề Inside: Bạn có chọn hiển thị menu trên Top bar bằng cách tích chọn Enable Topbar menu.
C. Logo
Chủ đề Roller và Inside cho phép bạn tải logo lên cửa hàng cho phiên bản máy tính (desktop logo) và phiên bản trên thiết bị di động (mobile logo). Bạn cũng có thể điều chỉnh chiều rộng của logo (với kích thước tối đa là 180px).
D. Menu
Tại Header, bạn có thể thiết lập hiển thị menu chính (Main Menu). Với chủ đề Inside, bạn sẽ có các tùy chọn để tùy chỉnh menu như:
Bật mega menu.
Điều chỉnh vị trí menu (Căn trái hoặc Căn giữa).
E. Search (thanh tìm kiếm)
Tại Header, bạn có thể thiết lập thanh tìm kiếm. Kết quả tìm kiếm sẽ lọc theo sản phẩm. Trên phiên bản máy tính sẽ hiển thị thanh tìm kiếm. Trên thiết bị di động, thanh tìm kiếm được thu nhỏ thành biểu tượng kính lúp để người dùng có thể nhấp vào:
F. Cart icons (Biểu tượng giỏ hàng)
Bạn có thể thiết lập hiển thị giỏ hàng theo biểu tượng túi (Bag) hoặc xe đẩy (Cart):
G. Fixed sticky header (Tiêu đề cố định)
Bạn có thể thiết lập tiêu đề cố định (Fixed (sticky) header) trên phiên bản máy tính và thiết bị di động. Nếu tích chọn fixed (sticky) header, tiêu đề sẽ được cố định khi khách mua hàng cuộn trang.
H. Layout & Padding (Bố cục & Kích thước)
Đối với chủ đề Roller: Thiết lập Main menu top padding dành cho khu vực menu phía trên trang cửa hàng. Nếu logo ở vị trí cao, bạn có thể điều chỉnh vị trí menu xuống thấp sao cho phù hợp.
Đối với chủ đề Inside: bạn có thể chọn một trong số ba bố cục của chủ đề, chẳng hạn như Inline, Rich và Minimal. Bạn có thể điều chỉnh bằng cách kéo thả thanh kích thước theo mong muốn.
Bài viết liên quan
Tổng quan về Chủ đề trên cửa hàng
Cập nhật vào: 28/02/2024
Cảm ơn!