Phần 6: Tùy chỉnh giao diện trang chủ
Khi triển khai thực tế, bạn chắc chắn sẽ muốn tùy chỉnh giao diện trang chủ để phù hợp với thương hiệu, sản phẩm và trải nghiệm người dùng. Trong bài viết này, chúng ta sẽ cùng tìm hiểu các cách để chỉnh sửa trang chủ.
Phần 6: Tùy chỉnh giao diện trang chủ
Giới thiệu
Bagisto là một nền tảng thương mại điện tử mã nguồn mở xây dựng trên Laravel và Vue.js. Một trong những theme mặc định phổ biến nhất là Velocity – giao diện hiện đại, nhẹ, hỗ trợ nhiều tính năng cho trang bán hàng.
Tuy nhiên, khi triển khai thực tế, bạn chắc chắn sẽ muốn tùy chỉnh giao diện trang chủ để phù hợp với thương hiệu, sản phẩm và trải nghiệm người dùng. Trong bài viết này, chúng ta sẽ cùng tìm hiểu các cách để chỉnh sửa trang chủ Velocity trên Bagisto.
1. Cách sắp xếp các khối nội dung trong Theme Settings
Truy cập https://[your_domain]/admin/settings/themes. Click “Sort Order” để sắp xếp theo thứ tự từ nhỏ đến lớn.
Giao diện sẽ trông như thế này:
Bạn thấy có tổng cộng 12 dòng, điều này sẽ tương đương với các khối nội dung trong trang chủ của bạn như hình dưới.
Bạn có thấy điểm bất thường nào trong ảnh chụp màn hình ở trên không? Có đấy, tôi sẽ giải thích:
- Thứ 1 - Thiếu các khối 3, khối 4, khối 7: bởi vì chúng ta chưa tạo danh mục sản phẩm và thiết lập các sản phẩm sẽ xuất hiện ở trang chủ nên nó không có dữ liệu để hiển thị.
- Thứ 2 - Khối 12 lại xếp trên khối 11: bởi vì khối 11 có “type” là “footer_links”. Với dạng type này sẽ luôn được sắp sau cùng trong bố cục trang web.
2. Các loại Type trong Theme Settings của Velocity
Khi bạn cấu hình Theme tại /admin/settings/themes, mỗi khối trên giao diện trang chủ có một Type riêng. Hiểu đúng từng type sẽ giúp bạn sắp xếp nội dung hợp lý, tối ưu trải nghiệm khách hàng.
Dưới đây là 6 loại Type quan trọng:
🛍️ Product Carousel
- Mục đích: Hiển thị một dãy sản phẩm dưới dạng trượt ngang (carousel).
- Dùng cho: Trang chủ hoặc landing page; show sản phẩm theo tiêu chí: Sản phẩm nổi bật, Sản phẩm mới, Giảm giá, Best Seller…
- Cấu hình: Chọn danh mục hoặc nhập thủ công product IDs; nhập tiêu đề khối; số lượng sản phẩm hiển thị.
- Ví dụ: Giống như phần “Gợi ý hôm nay” hay “Sản phẩm nổi bật” dạng trượt ngang trên Shopee, Lazada.
📂 Category Carousel
- Mục đích: Hiển thị một dãy danh mục sản phẩm dưới dạng trượt ngang.
- Dùng cho: Giúp khách hàng nhanh chóng truy cập các nhóm sản phẩm lớn (ví dụ: Điện thoại, Laptop, Thời trang, Mỹ phẩm…).
- Cấu hình: Chọn danh mục cha/mẹ; số lượng danh mục con hiển thị.
- Ví dụ: Phần danh mục trượt ngang trên trang chủ của Tiki, giúp khách hàng nhấp nhanh vào nhóm sản phẩm họ quan tâm.
📝 Static Content
- Mục đích: Chèn nội dung cố định (HTML, JavaScript hoặc text).
- Dùng cho: Banner khuyến mãi; thông báo; giới thiệu shop; nhúng code bên thứ 3 (video YouTube, bản đồ Google Maps…).
- Cấu hình: Nhập trực tiếp văn bản hoặc HTML.
- Ví dụ: Một đoạn text “Miễn phí ship toàn quốc – Đổi trả trong 7 ngày” ngay trên trang chủ.
🖼️ Image Carousel
- Mục đích: Hiển thị một hoặc nhiều ảnh dạng slider, có thể auto chạy.
- Dùng cho: Banner quảng cáo lớn trên đầu trang; bộ ảnh giới thiệu sản phẩm hoặc dịch vụ.
- Cấu hình: Upload ảnh (kích thước chuẩn: 1920x600px); nhập link đi kèm (nếu cần); chọn thứ tự hiển thị; chọn có autoplay hay không.
- Ví dụ: Slider banner chính trên đầu trang chủ của hầu hết các website TMĐT.
🔗 Footer Links
- Mục đích: Tạo nhóm liên kết ở chân trang (footer).
- Dùng cho: Liên kết nhanh đến các trang tĩnh: Chính sách bảo mật, Điều khoản dịch vụ, Liên hệ, Giới thiệu…
- Cấu hình: Nhập tiêu đề nhóm link (vd: “Về chúng tôi”); nhập danh sách link con.
- Ví dụ: Chân trang của Shopee có các mục: “Hỗ trợ khách hàng”, “Về Chúng tôi”, “Chính sách bán hàng”…
⚙️ Service Content
- Mục đích: Hiển thị dịch vụ hoặc cam kết ở chân trang.
- Dùng cho: Trình bày các cam kết của shop: Giao hàng nhanh, Hỗ trợ 24/7, Thanh toán an toàn…
- Cấu hình: Nhập tiêu đề dịch vụ; mô tả ngắn hoặc icon minh họa.
- Ví dụ: Phần “Dịch vụ của chúng tôi” ở footer: giao hàng miễn phí, đổi trả dễ dàng, chăm sóc khách hàng 24/7.
✅ Như vậy, mỗi type trong Theme Settings sẽ giúp bạn quản lý một khối nội dung khác nhau trên trang chủ.
- Nếu muốn show sản phẩm → chọn Product Carousel
- Nếu muốn show danh mục → chọn Category Carousel
- Nếu muốn show banner ảnh → chọn Image Carousel
- Nếu muốn thêm text/HTML → chọn Static Content
- Nếu muốn quản lý link ở footer → chọn Footer Links hoặc Service Content
3. Thay đổi logo và favicon cho web
Truy cập https://[your_website]/admin/settings/channels/edit/1.
Tìm đến khối Design và tiến hành upload logo và favicon như yêu cầu:
Như vậy, chúng ta đã tìm hiểu về cách tùy chỉnh giao diện trang chủ. Ở phần kế tiếp, chúng ta sẽ bắt tay vào thực hành nhé!
Viết bình luận