PageBuilder v2 là công cụ giúp Seller tự thiết kế và tùy chỉnh giao diện website mà không cần biết code. Bài viết dưới đây hướng dẫn chi tiết cách truy cập trình chỉnh sửa theme, làm việc với các loại page, cấu trúc Page content (Section, Element, Pattern), và thiết lập Global style (logo, màu sắc, font chữ, khoảng cách) áp dụng cho toàn bộ website.
Tổng quan về sử dụng Theme #
Theme là giao diện tổng thể của website, quyết định bố cục, màu sắc và phong cách hiển thị của toàn bộ Store. Seller có thể sở hữu nhiều theme cùng lúc nhưng chỉ một theme được đặt làm Current theme (theme đang hiển thị trực tiếp trên Store).
Cách mở trình chỉnh sửa theme (Edit theme):
- Tại menu bên trái, chọn Online store.
- Chọn mục Theme để xem danh sách các theme hiện có trong Store (bao gồm theme đang dùng và các theme khác trong mục My theme).
- Với theme đang là Current theme, bấm nút Edit theme để vào giao diện chỉnh sửa.
Mục 1: Nội dung trang #
Sau khi vào Edit theme, ở thanh công cụ phía trên cùng, Seller sẽ thấy các thẻ (tab) giúp chọn nhanh loại page cần chỉnh sửa: All, Home, Product page, Collection page, Collection list, Page.
Thẻ All: Hiển thị toàn bộ danh sách Page hiện có trong theme, gồm Homepage, Product page, Collection page và các page tĩnh khác. Mỗi page đều có trạng thái (Default/Published) và thời gian chỉnh sửa gần nhất.
Thẻ Home: là giao diện trang chủ — trang đầu tiên khách hàng nhìn thấy khi truy cập Store. Thường là nơi đặt banner, bộ sưu tập nổi bật, sản phẩm bán chạy…
Tương tự, các page còn lại có chức năng riêng:
- Product page: trang chi tiết sản phẩm.
- Collection list: trang danh sách các collection của Store.
- Collection page: trang hiển thị sản phẩm thuộc một collection.
- Page: các trang nội dung tĩnh khác như About us, Contact, Policy…
Mục 2: Nội dung trang #
Khi vào chỉnh sửa một page, panel Page content hiển thị toàn bộ cấu trúc: Header (logo, menu, tìm kiếm, giỏ hàng), Body gồm nhiều Section có thể thêm/xoá/sắp xếp lại, và Footer (thông tin liên hệ, chính sách, mạng xã hội).
Elements là các cấu phần nhỏ tạo nên website, chia theo nhóm: Layout (bố cục cột), Text & button (Heading, văn bản, nút bấm), Media (hình ảnh, video). Seller kéo thả Element vào Section để tự xây dựng bố cục.
Pattern là mẫu bố cục dựng sẵn (Hero Banner, Product Information, Product Breakdown, Comparison, Social Proof, Testimonial, FAQs…) giúp rút ngắn thời gian thiết kế thay vì dựng từng Element thủ công.
Mục 3: Kiểu dáng toàn cục #
Global style là nơi cấu hình chung, áp dụng đồng bộ cho toàn website thay vì chỉnh từng page riêng lẻ:
- Logo and favicon: chỉnh logo Header và favicon (icon tab trình duyệt) — bấm Upload image hoặc chọn từ Open library.
- Color: chỉnh bảng màu nền toàn site — chọn nhanh Recommended color hoặc tự phối Custom color theo thương hiệu.
- Font manager: chỉnh font cho Heading và Paragraph, áp dụng thống nhất toàn site.
- Typography: chỉnh kích thước chữ cho từng cấp Heading 1–6 và Paragraph 1–3.
- Spacing: chỉnh khoảng cách chuẩn giữa các phần tử/Section (2XS–7XL) cho bố cục cân đối.
Mục 4: Script header #
Script header cho phép chèn đoạn mã (script) vào phần <head> của website, dùng để:
- Gắn script tracking (Google Analytics, Facebook Pixel, TikTok Pixel…).
- Custom lại popup hoặc chèn mã tùy chỉnh khác theo nhu cầu riêng.
Bấm Add script, dán đoạn mã vào khung soạn thảo, sau đó Save và Publish để áp dụng.
Bài viết liên quan #
- Cách tạo tài khoản và đăng nhập BettaMax
- Cách xác minh tài khoản BettaMax
- Cách cập nhật thông tin cá nhân và Store