Top header là mục menu đặc biệt nằm ngay trên cùng của menu. Khối này gom sẵn logo, tên shop, ô tìm kiếm, mạng xã hội và nút bấm vào một chỗ gọn đẹp để bạn không phải tự ghép từng mục lẻ. Bạn bấm Add item, chọn loại Top header, rồi chỉnh chi tiết trong bảng Edit item.
Top header dùng được cho Mobile Menu và Desktop Mega Menu. Mỗi khung menu chỉ nên có một Top header đặt ở vị trí đầu tiên.
Cách thêm Top header vào menu
Bạn bấm Add item, chọn loại Top header rồi bấm vào một mẫu có sẵn. App sẽ chèn mẫu đó vào đầu menu và tự mở bảng Edit item để bạn chỉnh tiếp.
- Nếu khung menu đã có sẵn Top header, app sẽ hỏi bạn muốn thay cái cũ bằng Replace it, chèn thêm cái mới bằng Add anyway, hay huỷ bằng Cancel.
- Ngay ở màn hình chọn mẫu, dòng Show in header có 6 công tắc để bạn bật hoặc tắt nhanh từng phần: Logo, Name & slogan, Search bar, Account, Buttons và Social. Mặc định 5 phần đầu đều bật sẵn, riêng Account đang tắt.
Khi vào bảng Edit item, mỗi phần đều có công tắc bật/tắt riêng. Phần nào bạn tắt hoặc bật nhưng để trống nội dung thì sẽ tự ẩn trên cửa hàng, không để lại khung rỗng.
Đổi màu, căn lề và ghim khi cuộn
Phần đầu tiên trong bảng Edit item không có tiêu đề riêng, dùng để chỉnh giao diện chung cho toàn bộ khối Top header.
| Mục | Tác dụng | Mặc định |
|---|---|---|
| Palette › Choose a palette | Đổi cả bộ màu chỉ với một lần bấm. Bạn chọn bộ Dark hoặc Light có sẵn, hoặc nhập màu chủ đạo vào Your primary color rồi chọn Dark / Light theo màu đó. Đây là công cụ phối màu nhanh nên app không lưu lại tên bảng màu bạn đã bấm. | |
| Alignment | Căn lề theo Left, Center hoặc Right. Chọn Center thì logo nằm phía trên tên shop. Chọn Right thì logo nằm bên phải tên shop và slogan. | |
| Keep visible while scrolling | Chọn No — scrolls away with the menu để khối đầu trôi đi khi khách cuộn danh sách xuống. Chọn Yes — keep the whole header để ghim khối này dính cố định ở đầu menu. | No |
| Auto-hide while scrolling | Chỉ hiện khi bạn chọn Yes ở dòng trên. Khi khách cuộn xuống, khối đầu tự trượt ẩn đi cho đỡ chật màn hình; khách cuộn ngược lên là hiện lại ngay. | Tắt |
| Background image | Ảnh nền của khối đầu. Bạn tải ảnh từ máy lên hoặc chọn từ ảnh sản phẩm, thư viện có sẵn. | Không có |
| Background | Màu nền. Khi có ảnh nền, lớp màu này sẽ phủ lên trên ảnh — chỉnh màu càng trong suốt thì ảnh nền càng rõ. | |
| Text color | Màu chữ chung của khối. | |
| Curve (px) | Độ bo góc chung của nút bấm, ô tìm kiếm, icon mạng xã hội và logo. Gõ 999 nếu bạn muốn bo tròn hẳn hai đầu. |
8 |
Một khối Top header cao khoảng 200–300 px khi ghim cố định sẽ chiếm khá nhiều chỗ trên màn hình nhỏ. Nếu bật ghim, bạn nên tắt bớt các phần chưa cần thiết hoặc bật thêm Auto-hide while scrolling.
Nếu muốn ghim cả phần chân menu hoặc ghim nhiều mục menu khác nhau, bạn xem bài Cột, đường kẻ và mục ghim.
Thêm và chỉnh cỡ logo
| Mục | Tác dụng | Mặc định |
|---|---|---|
| Logo | Ảnh logo của shop. Bạn tải ảnh mới lên hoặc chọn từ sản phẩm, thư viện. Nếu không chọn ảnh, khối đầu chỉ hiện phần chữ. | Không có |
| Logo size (px) | Chỉnh kích thước logo từ 20 đến 160 px. | 48 |
Logo size (px)
Ô này nằm trong bảng Edit item của mục Top header (bước Build Menu, bấm mục Top header trong cây), ở cụm Logo, ngay dưới ô chọn ảnh. Nó quyết định logo to hay nhỏ.
- Đơn vị: px. Nhập số từ 20 đến 160; số ngoài khoảng này tự bị kéo về 20 hoặc 160 khi hiển thị.
- Mặc định: 48 px khi ô để trống. Mẫu header bạn chọn lúc thêm có thể điền sẵn số khác.
- Áp cho: Mobile Menu và Desktop Mega Menu, mục loại Top header. Không cần gói riêng. Chỉ có tác dụng khi cụm Logo đang bật và đã có ảnh logo.
- Đổi ô này thì khách thấy gì: logo ở đầu menu to lên hoặc nhỏ đi, tên shop và ô tìm kiếm bên dưới tự dịch theo. Logo cũng chịu độ bo góc của ô Curve (px) ở phần giao diện chung.
Điền tên shop và slogan
Trong phần Content, bạn nhập tên thương hiệu và câu giới thiệu ngắn.
| Mục | Tác dụng | Chữ gợi ý trong ô |
|---|---|---|
| Shop name | Tên shop, hiển thị chữ lớn nổi bật. | MY SHOP |
| Slogan | Một dòng chữ nhỏ nằm ngay dưới tên shop. | Fresh picks, every week |
Shop name
Nằm trong cụm Content của bảng Edit item. Đây là tên thương hiệu hiện bằng chữ lớn cạnh logo; Slogan nằm ngay dưới nó.
- Giá trị: chữ tự do. Để trống thì dòng tên không hiện. Chữ
MY SHOPchỉ là gợi ý mờ trong ô, không phải giá trị thật. - Mặc định: theo mẫu header bạn chọn lúc thêm.
- Áp cho: Mobile Menu và Desktop Mega Menu, mục loại Top header. Không cần gói riêng. Chỉ hiện khi cụm Content đang bật.
- Đổi ô này thì khách thấy gì: tên shop ở đầu menu đổi theo ngay. Chữ này không được dịch tự động, khách ở ngôn ngữ nào cũng thấy đúng chữ bạn gõ.
Cài đặt ô tìm kiếm, lối tắt và từ khoá hot
Phần Search box gồm ô tìm kiếm nằm giữa, các icon lối tắt ở hai bên và dòng từ khoá gợi ý bên dưới.
| Mục | Tác dụng | Mặc định |
|---|---|---|
| Search box placeholder | Chữ mờ gợi ý nằm bên trong ô tìm kiếm. | Search |
| Search link | Đích đến khi khách bấm vào ô tìm kiếm. Bạn bấm nút ✎ để chọn trong cửa sổ Link to:. | open:Search |
| Shortcut on the left | Tối đa 2 lối tắt nằm bên trái ô tìm kiếm. Mỗi lối tắt gồm icon, đường dẫn và ô tích Cart count. Bấm Add shortcut để thêm. | Không có |
| Shortcut on the right | Giống hệt bên trái nhưng nằm ở bên phải ô tìm kiếm. | Không có |
| Keywords label | Chữ đứng trước dãy từ khoá hot. | Top keywords: |
| Hot keywords | Các từ khoá gợi ý hiện thành một dòng chữ nhỏ dưới ô tìm kiếm. Mỗi từ có chữ hiển thị và đường dẫn riêng. Bấm Add keyword để thêm. | Không có |
Khi làm lối tắt cho icon giỏ hàng, bạn tích vào ô Cart count. Lối tắt sẽ hiện số lượng sản phẩm đang có trong giỏ thật của khách và tự ẩn số đi khi giỏ trống.
Nếu bạn để trống đường dẫn ở lối tắt hoặc từ khoá, khách bấm vào sẽ về trang chủ. Các cú pháp mở nhanh như open:ThemeCart có giải thích chi tiết trong bài Tra cứu mọi loại link.
Search box placeholder
Nằm trong cụm Search box, cột bên trái ở hàng đầu tiên. Đây là chữ mờ gợi ý bên trong ô tìm kiếm.
- Giá trị: chữ tự do. Để trống thì ô hiện chữ
Search. - Mặc định: theo mẫu header bạn chọn lúc thêm.
- Áp cho: Mobile Menu và Desktop Mega Menu, mục loại Top header. Không cần gói riêng. Chỉ có tác dụng khi cụm Search box đang bật.
- Đổi ô này thì khách thấy gì: chữ mờ trong ô tìm kiếm ở đầu menu đổi theo. Chữ này không được dịch tự động nên hãy giữ ngắn.
Search link
Nằm trong cụm Search box, cột bên phải, cạnh ô placeholder. Đây là nơi khách được đưa tới khi bấm vào ô tìm kiếm.
- Giá trị: một đường dẫn hoặc lệnh mở nhanh. Bấm nút ✎ để chọn trong cửa sổ Link to:. Cú pháp ở bài Tra cứu mọi loại link.
- Mặc định:
open:Search(mở tìm kiếm của theme). Nếu bạn nhập link bắt đầu bằngjavascript:hoặc kiểu không an toàn tương tự, menu tự quay vềopen:Search. - Áp cho: Mobile Menu và Desktop Mega Menu, mục loại Top header. Không cần gói riêng. Chỉ có tác dụng khi cụm Search box đang bật.
- Đổi ô này thì khách thấy gì: hình dáng ô không đổi, chỉ đích đến khi khách bấm là khác.
- Wix / website khác: nếu
open:Searchkhông chạy, nhập link tìm kiếm của chính website đó.
Shortcut on the left
Nằm trong cụm Search box, bên dưới hai ô trên. Đây là các nút icon nhỏ nằm sát bên trái ô tìm kiếm.
- Giá trị: tối đa 2 lối tắt. Bấm Add shortcut để thêm; mỗi lối tắt có icon, đường dẫn và ô tích Cart count (hiện số sản phẩm trong giỏ thật của khách, tự ẩn khi giỏ trống).
- Mặc định: theo mẫu header bạn chọn lúc thêm; nhiều mẫu để trống.
- Áp cho: Mobile Menu và Desktop Mega Menu, mục loại Top header. Không cần gói riêng. Chỉ hiện khi cụm Search box đang bật; tắt cả cụm thì lối tắt hai bên và từ khoá hot cũng ẩn theo.
- Đổi ô này thì khách thấy gì: thêm hoặc bớt icon bên trái ô tìm kiếm. Để trống đường dẫn thì khách bấm vào sẽ về trang chủ.
Shortcut on the right
Giống hệt Shortcut on the left nhưng các nút nằm bên phải ô tìm kiếm: cũng tối đa 2 lối tắt, cũng áp cho Mobile Menu và Desktop Mega Menu, và cũng ẩn khi cụm Search box tắt.
Hot keywords
Nằm cuối cụm Search box, ngay dưới ô Keywords label. Đây là dòng từ khoá gợi ý để khách bấm nhanh thay vì gõ.
- Giá trị: danh sách từ khoá, bấm Add keyword để thêm; mỗi từ có chữ hiển thị và đường dẫn riêng (để trống thì về trang chủ). Keywords label là chữ đứng trước dãy từ khoá, mặc định
Top keywords:. - Mặc định: theo mẫu header bạn chọn lúc thêm; thường chưa có từ khoá nào.
- Áp cho: Mobile Menu và Desktop Mega Menu, mục loại Top header. Không cần gói riêng. Chỉ hiện khi cụm Search box đang bật.
- Đổi ô này thì khách thấy gì: một dòng chữ nhỏ hiện dưới ô tìm kiếm, gồm nhãn rồi các từ khoá. Không có từ khoá nào thì không hiện dòng này.
Gắn icon mạng xã hội
Trong phần Social links, bạn bấm Add social link để thêm từng kênh. Mỗi dòng gồm một biểu tượng chọn từ bảng icon và một đường dẫn dạng https://…. Hàng icon này sẽ hiện ngay dưới tên shop và ô tìm kiếm.
Bật nút tài khoản khách hàng
Phần Account mặc định đang tắt sẵn. Khi bạn bật công tắc lên, menu sẽ có ngay hai nút tài khoản và bạn chỉ cần sửa lại chữ hiển thị.
| Khách đang | Mục trong app | Nút hiện ra | Chữ mặc định |
|---|---|---|---|
| Chưa đăng nhập | When signed out | Hai nút đăng nhập và đăng ký | Login, Register |
| Đã đăng nhập | When signed in | Hai nút hồ sơ và đăng xuất | Profile, Logout |
Hai nút này tự đổi theo trạng thái đăng nhập của khách trên shop. Đường dẫn của nút đã trỏ cố định về trang tài khoản của cửa hàng và không sửa được.
Account (When signed out / When signed in)
Nằm trong cụm Account của bảng Edit item; cụm có công tắc bật/tắt riêng và mặc định tắt. Bên trong có hai dòng ô chữ: When signed out (đăng nhập, đăng ký) và When signed in (hồ sơ, đăng xuất).
- Giá trị: chỉ nhập chữ trên nút. Ô trống thì dùng chữ gợi ý
Login,Register,Profile,Logout. Không có ô đường dẫn vì link đã cố định. - Mặc định: cụm tắt; bật lên là có ngay hai nút.
- Áp cho: Mobile Menu và Desktop Mega Menu, mục loại Top header. Không cần gói riêng và không phụ thuộc ô nào khác ngoài công tắc Account.
- Đổi ô này thì khách thấy gì: khách chưa đăng nhập thấy hai nút đăng nhập, đăng ký; đăng nhập rồi thì đổi thành hồ sơ, đăng xuất. Sửa chữ chỉ đổi nhãn nút, không đổi nơi đến. Chữ này không được dịch tự động.
- Wix / website khác: link trỏ tới các trang kiểu Shopify (
account/login…). Kiểm lại trên cửa hàng, nếu website không có các trang đó thì tắt cụm này.
Thêm nút bấm
Trong phần Buttons, bạn bấm Add button để tạo nút mới. Mỗi nút có ô nhập chữ với gợi ý Shop now và ô nhập đường dẫn với gợi ý collections/all, nếu để trống đường dẫn thì khách bấm vào sẽ về trang chủ.
Nút bấm có cùng kiểu dáng với các nút ở phần Account và nằm ngay dưới hàng icon mạng xã hội nếu bạn bật cả hai.
Các ô chữ trong Top header chưa được dịch tự động. Chữ bạn gõ hiện nguyên văn trên cửa hàng ở mọi ngôn ngữ. Cửa hàng nhiều ngôn ngữ nên giữ chữ ngắn và trung tính.
Number of items
Ô số này nằm trong bảng Edit item của mục loại Dynamic item (cùng loại mục với Top header), nhưng chỉ hiện với các mẫu lấy dữ liệu từ Shopify như sản phẩm mới nhất, bán chạy nhất, bộ sưu tập mới nhất. Các mẫu header ở trên không có ô này.
- Giá trị: số nguyên từ 1 đến 6.
- Áp cho: Mobile Menu và Desktop Mega Menu, mục Dynamic item dùng mẫu dữ liệu Shopify. Không cần gói riêng.
- Đổi ô này thì khách thấy gì: ô quy định số mục hiện trong khối. Phần vẽ các khối dữ liệu này trên cửa hàng hiện không còn trong bản app, nên bạn có thể không thấy mẫu nào dùng ô này; hãy kiểm lại trên cửa hàng trước khi dựa vào nó.
Tóm tắt các phần trong Top header
| Phần | Công tắc bật/tắt | Mặc định khi thêm | Các mục chính |
|---|---|---|---|
| Giao diện chung | Không | Luôn có | Palette, Alignment, Keep visible while scrolling, Background, Text color, Curve (px) |
| Logo | Có | Bật | Logo, Logo size (px) |
| Content | Có | Bật | Shop name, Slogan |
| Search box | Có | Bật | Search box placeholder, Search link, lối tắt trái/phải, Hot keywords |
| Social links | Có | Bật | Icon và đường dẫn |
| Account | Có | Tắt | Chữ của 4 nút tài khoản |
| Buttons | Có | Bật | Chữ và đường dẫn |
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Các cụm logo, tên, màu, nút và mạng xã hội chỉ phụ thuộc vào nội dung bạn nhập. Cụm Account trỏ tới địa chỉ account/login, account/register, account và account/logout — đây là đường dẫn kiểu Shopify, nên trên Wix hãy kiểm lại trên cửa hàng, nếu không có các trang đó thì tắt cụm này. Ô Search link mặc định là open:Search; nếu không chạy, nhập link tìm kiếm của Wix.
Giống Wix: các cụm logo, tên, màu, nút và mạng xã hội chỉ phụ thuộc vào nội dung bạn nhập. Cụm Account trỏ tới các địa chỉ kiểu Shopify (account/login…); nếu website của bạn không có các trang đó thì tắt cụm này. Ô Search link mặc định là open:Search; nếu không chạy, nhập link tìm kiếm của website.