Page Builder

Hướng dẫn này giúp bạn tạo template trang sản phẩm tùy chỉnh bằng Page Builder trên BettaMax và áp dụng template đó cho từng sản phẩm cụ thể. Mỗi sản phẩm có thể dùng template riêng mà không ảnh hưởng đến sản phẩm khác.

Lưu ý: Page Builder trang sản phẩm khác với Page Builder Homepage. Bài này hướng dẫn tạo template cho trang chi tiết sản phẩm (Product Page). Để tùy chỉnh trang chủ, xem Cách thiết lập và tuỳ chỉnh giao diện Homepage.

Bước 1: Truy cập Theme và mở Customize #

Toàn bộ việc tạo template trang sản phẩm được thực hiện trong phần Customize của Theme. Đảm bảo bạn đang chỉnh sửa đúng theme đang được kích hoạt cho cửa hàng.

  1. Từ thanh menu bên trái, chọn My Store > Theme.

  2. Xác nhận theme hiện tại đang được kích hoạt (Active). Nhấn Customize trên card theme đó để mở trình chỉnh sửa.

Bước 2: Điều hướng đến Product Page #

Sau khi vào Customize, mặc định bạn đang xem Homepage. Bạn cần chuyển sang Product Page để tạo template cho trang sản phẩm.

  1. Trong thanh công cụ phía trên của trình chỉnh sửa, nhấn vào dropdown hiển thị Home Page.
  2. Chọn Product Page từ danh sách.

Bước 3: Tạo template sản phẩm mới #

BettaMax cho phép tạo nhiều template khác nhau cho trang sản phẩm. Mỗi template có thể được áp dụng cho một hoặc nhiều sản phẩm. Tạo template riêng cho từng nhóm sản phẩm để kiểm soát chặt chẽ giao diện và tối ưu tỷ lệ chuyển đổi theo từng chiến dịch.

  1. Trong giao diện Product Page, nhấn Create Template.

  2. Hộp thoại xuất hiện yêu cầu 2 thông tin:
    • Tên Template — Đặt tên gợi nhớ để phân biệt với các template khác. Ví dụ: Template_SanPhamHot, Template_FlashSale.
    • Sản phẩm mẫu — Chọn một sản phẩm có sẵn để dùng làm preview trong lúc thiết kế. Sản phẩm này chỉ dùng để xem trước, không ảnh hưởng đến các sản phẩm khác.

  3. Nhấn Create Template để khởi tạo.
Mẹo: Đặt tên template theo chiến dịch hoặc nhóm sản phẩm thay vì tên chung chung. Ví dụ: Template_Electronics_Q2 dễ quản lý hơn Template1 khi bạn có nhiều template.

Bước 4: Thiết kế trang sản phẩm #

Sau khi tạo template, bạn được chuyển vào giao diện thiết kế. Dùng thao tác kéo thả để thêm, xóa và sắp xếp lại các thành phần trên trang sản phẩm. Cách thao tác tương tự như Page Builder Homepage.

  1. Chọn thành phần cần thêm từ bảng menu bên trái (banner, hình ảnh sản phẩm, mô tả, nút CTA, countdown timer, testimonial…).
  2. Kéo thành phần vào vị trí mong muốn trên canvas. Đường kẻ xanh chỉ nơi thành phần sẽ được đặt vào.
  3. Nhấn vào thành phần để chỉnh sửa nội dung, màu sắc, kích thước chữ và khoảng cách trong bảng bên trái.

  4. Kiểm tra giao diện trên cả DesktopMobile bằng cách chuyển đổi chế độ xem ở thanh trên cùng.
Mẹo: Ưu tiên thiết kế cho Mobile trước vì phần lớn traffic từ quảng cáo Facebook và TikTok đến từ thiết bị di động. Một trang sản phẩm đẹp trên desktop nhưng khó đọc trên mobile sẽ làm giảm tỷ lệ chuyển đổi đáng kể.

Bước 5: Lưu template #

Sau khi thiết kế xong, lưu template trước khi thoát. Template chưa lưu sẽ mất toàn bộ thay đổi nếu bạn đóng tab hoặc chuyển trang.

  1. Nhấn Save ở góc trên phải của trình chỉnh sửa.

  2. Xác nhận lưu thành công. Template xuất hiện trong danh sách template của cửa hàng.

Bước 6: Áp dụng template cho sản phẩm #

Template vừa tạo chưa tự động áp dụng cho bất kỳ sản phẩm nào. Bạn cần chỉ định thủ công template cho từng sản phẩm muốn dùng giao diện này.

  1. Từ sidebar, chọn My Product.
  2. Nhấn vào sản phẩm muốn áp dụng template.
  3. Trong trang chỉnh sửa sản phẩm, tìm mục Theme & Template ở cột bên phải.
  4. Trong mục Template, chọn template vừa tạo từ dropdown.
  5. Nhấn Save Change để lưu và áp dụng.
Lưu ý: Mỗi sản phẩm chỉ áp dụng được 1 template tại một thời điểm. Nếu muốn thử giao diện mới (A/B testing), tạo một template khác và áp dụng cho sản phẩm đó, sau đó theo dõi số liệu chuyển đổi trong Analytics để so sánh.

Bài viết liên quan #