Hướng dẫn sử dụng theme Flatsome chi tiết nhất từ a-z năm 2026

Flatsome là gì và tại sao nên chọn theme này?

Flatsome là theme WordPress bán chạy nhất trên ThemeForest, được phát triển bởi UX-Themes với hơn 200.000 lượt mua. Theme được thiết kế chuyên biệt cho WooCommerce, tích hợp trình tạo trang UX Builder kéo thả mạnh mẽ, tốc độ tải nhanh và giao diện hiện đại. Dù bạn xây dựng shop bán hàng, website công ty hay landing page, Flatsome đều đáp ứng tốt mà không cần biết code.

Nếu bạn đang tìm kiếm theme phù hợp cho dự án của mình, hãy tham khảo thêm tại kho theme WordPress để so sánh và lựa chọn. Bài hướng dẫn dưới đây sẽ đi qua toàn bộ các thao tác cơ bản đến nâng cao khi sử dụng Flatsome theo kiểu cầm tay chỉ việc.

Hướng dẫn tùy chỉnh các thành phần giao diện trong Flatsome

Toàn bộ tùy chỉnh giao diện của Flatsome được tập trung trong WordPress Customizer, giúp bạn xem trước thay đổi trực tiếp trước khi lưu.

Tùy chỉnh màu sắc, font chữ và logo trong Flatsome

Để thay đổi màu sắc, font chữ và logo, vào Giao diện > Tùy biến.

Tiếp theo chọn Style để tùy chỉnh màu sắc chủ đạo, màu phụ và bộ font chữ. Flatsome hỗ trợ hơn 600 Google Fonts, cho phép bạn cài đặt font riêng biệt cho tiêu đề và nội dung. Để thay logo, tìm mục Logo trong Customizer và upload file PNG hoặc SVG của thương hiệu bạn.

Thêm CSS tùy biến và mã JavaScript bên thứ ba

Để chèn các đoạn CSS riêng hoặc tích hợp script từ bên thứ ba như Facebook Pixel, Google Tag Manager hay Hotjar, vào Advanced > Global Settings. Tab Custom CSS dùng để ghi đè style mà không cần sửa file theme, giúp bảo toàn code khi cập nhật phiên bản mới.

Cấu hình tính năng blog trong Flatsome

Mặc dù Flatsome chuyên cho bán hàng, theme vẫn hỗ trợ đầy đủ tính năng blog. Vào Giao diện > Tùy biến > Blog để cấu hình.

Phần Blog Single Post gồm các tùy chọn:

• Transparent Header: header trong suốt khi đọc bài
• Enable Header Meta: hiển thị ngày đăng, tác giả, danh mục dưới tiêu đề
• Enable Featured Image: hiển thị ảnh đại diện đầu bài
• Enable Share Icons: nút chia sẻ mạng xã hội
• Enable Footer Meta: tag và thông tin liên quan cuối bài
• Enable Blog Author Box: khung giới thiệu tác giả
• Enable Next/Prev Navigation: điều hướng qua lại giữa các bài viết

Tạo và sử dụng shortcode UX Blocks trong Flatsome

UX Blocks cho phép bạn thiết kế một khối nội dung bằng UX Builder rồi tái sử dụng nó ở bất kỳ đâu trên website thông qua shortcode. Để tạo, vào Flatsome > UX Blocks > Add New, thiết kế nội dung, sau đó copy shortcode hiển thị ở góc phải màn hình.

Sau khi có shortcode, dán vào bất kỳ trang, bài viết hoặc widget nào. Đây là cách hiệu quả để đặt banner khuyến mãi, khung CTA hoặc section phức tạp mà không cần thiết kế lại từ đầu.

Việt hóa theme Flatsome bằng Loco Translate

Flatsome mặc định tiếng Anh. Để dịch sang tiếng Việt, cài plugin Loco Translate rồi thực hiện các bước sau:

1. Vào Loco Translate > Themes, chọn Flatsome

2. Nhấn New Language để tạo file ngôn ngữ mới

3. Chọn Vietnamese (vi), đặt Location là Custom rồi nhấn Start Translating

4. Lọc chuỗi cần dịch, điền bản dịch vào ô Translation, nhấn Save và xóa cache website

Ưu tiên dịch các chuỗi quan trọng như: nút “Add to Cart”, “Checkout”, thông báo giỏ hàng, nhãn form đăng nhập và thông báo lỗi thanh toán. Nếu cần hỗ trợ trong quá trình cài đặt, bạn có thể sử dụng dịch vụ hỗ trợ kỹ thuật WordPress để được xử lý nhanh chóng.

Tùy chỉnh WooCommerce trong Flatsome

Flatsome tích hợp bộ tùy chỉnh WooCommerce riêng biệt, truy cập tại Flatsome > Theme Options > WooCommerce.

Cấu hình Store Notice và Product Catalog

Phần Store Notice cho phép hiển thị thông báo toàn trang ngay đầu header, phù hợp để thông báo khuyến mãi, chính sách vận chuyển miễn phí hoặc sự kiện đặc biệt.

Tại mục Product Catalog, bạn cấu hình kiểu sắp xếp sản phẩm mặc định. Flatsome hỗ trợ 6 tùy chọn:

• Default Sorting: sắp xếp mặc định theo tên
• Popularity (Sales): theo sản phẩm bán chạy
• Average Rating: theo đánh giá cao nhất
• Sort by Most Recent: theo sản phẩm mới nhất
• Sort by Price (Asc): giá từ thấp đến cao
• Sort by Price (Desc): giá từ cao xuống thấp

Tùy chỉnh layout trang sản phẩm đơn lẻ

Trang sản phẩm ảnh hưởng trực tiếp đến tỷ lệ chuyển đổi. Flatsome cho phép tùy chỉnh layout, kiểu hiển thị gallery ảnh (Standard, Stacked, Sticky, Left Thumbnails, Right Thumbnails), kích thước ảnh và số sản phẩm liên quan.

Tối ưu Site Search tìm kiếm sản phẩm nhanh

Tính năng Site Search của Flatsome hiển thị kết quả tìm kiếm ngay khi khách hàng gõ, không cần tải lại trang. Vào phần WooCommerce > Site Search để cấu hình.

Các thiết lập cần chú ý:

• Enable Live Search: bật tìm kiếm trực tiếp hiển thị kết quả ngay lập tức
• Search Results Latency: đặt khoảng 500 đến 1000ms để cân bằng tốc độ và tải server
• Search by SKU: tìm theo mã sản phẩm
• Search by Tag: tìm theo tag sản phẩm
• Show Blog and pages in search results: hiển thị Bài viết (Post) và Trang (Page) trong kết qủa tìm kiếm

Xây dựng landing page với UX Builder trong Flatsome

UX Builder là trình tạo trang kéo thả tích hợp sẵn của Flatsome với hơn 80 element và hơn 300 mẫu section dựng sẵn. Đây là công cụ giúp bạn tạo landing page chuyên nghiệp, tối ưu chuyển đổi mà không cần kỹ năng lập trình. Để bắt đầu, tạo trang mới trong WordPress và chọn Edit with UX Builder.

Trong giao diện UX Builder, chọn Flatsome Studio để import mẫu dựng sẵn từ thư viện của nhà sản xuất, hoặc chọn Add Elements để kéo thả từng element theo ý muốn.

Sau khi import, mỗi trang có cấu trúc Section > Column > Element. Nhấn vào bất kỳ thành phần nào, chọn Options để tùy chỉnh padding, background, animation và visibility. Một mẹo hữu ích là cấu hình Visibility riêng cho desktop, tablet và mobile để tối ưu hiển thị trên từng thiết bị.

Sau khi hoàn thiện, nhấn Publish để xuất bản trang.

Tùy chỉnh Header và Footer trong Flatsome

Flatsome là một trong số ít theme WordPress có header dạng kéo thả hoàn toàn. Theme hỗ trợ hai phiên bản header riêng biệt cho desktop và mobile, cho phép tối ưu điều hướng trên từng loại thiết bị mà không ảnh hưởng lẫn nhau.

Thiết lập Header kéo thả với preset có sẵn

Để tiết kiệm thời gian, chọn từ các Header Presets mà nhà sản xuất cung cấp sẵn. Bạn có thể kéo thả tự do các thành phần như: Logo, Menu chính, Thanh tìm kiếm, Giỏ hàng, Tài khoản, Số điện thoại và Button CTA vào bất kỳ vị trí nào trong header. Ngoài ra, Flatsome hỗ trợ Sticky Header giúp thanh điều hướng cố định khi người dùng cuộn trang.

Tùy chỉnh Footer gồm ba khu vực chính

Footer trong Flatsome gồm ba khu vực: Footer 1 (cột widget chính), Footer 2 (nội dung bổ sung) và Absolute Footer (bottom bar chứa copyright). Dùng thành phần Edit Footer Widgets để thêm widget vào từng khu vực.

Chèn widget lần lượt vào Footer 1 trước, sau đó đến Footer 2. Nếu không cần Footer 2, tắt nó đi để tránh khoảng trắng không cần thiết.

Cuối cùng, chỉnh sửa nội dung text copyright và thêm logo phương thức thanh toán (Visa, Mastercard, VNPAY, MoMo) cho phần bottom footer. Nếu gặp khó khăn trong quá trình tùy chỉnh, bạn có thể liên hệ để được trợ giúp trực tiếp.

Mẹo tối ưu hiệu năng website khi dùng Flatsome

Flatsome đã được tối ưu tốt từ đầu, nhưng để đạt điểm Core Web Vitals cao, bạn nên kết hợp thêm một số biện pháp sau:

• Bật Lazy Load trong Advanced > Performance của Flatsome
• Dùng plugin cache như WP Rocket hoặc LiteSpeed Cache để minify CSS và JS
• Upload ảnh định dạng WebP và nén ảnh trước khi đưa lên website
• Kết hợp Cloudflare CDN để phân phối tài nguyên tĩnh nhanh hơn
• Sử dụng hosting NVMe tốc độ cao với PHP 8.2 và OPcache để Flatsome chạy mượt mà nhất

Câu hỏi thường gặp về theme Flatsome

Flatsome có phù hợp để làm website bán hàng WooCommerce không?

Có. Flatsome được thiết kế chuyên biệt cho WooCommerce với trang sản phẩm tối ưu, giỏ hàng nhanh và trang thanh toán tùy chỉnh linh hoạt. Hơn 200.000 website bán hàng trên toàn thế giới đang sử dụng Flatsome là minh chứng rõ ràng nhất cho sự phù hợp này.

UX Builder của Flatsome có khác gì Elementor không?

UX Builder là trình tạo trang tích hợp riêng của Flatsome, nhẹ hơn và nhanh hơn Elementor vì được tối ưu hoàn toàn cho theme. Elementor là plugin độc lập có hệ sinh thái addon phong phú hơn. Nếu chỉ dùng Flatsome, UX Builder là lựa chọn tốt hơn về tốc độ. Flatsome cũng tương thích với Elementor nếu bạn muốn kết hợp cả hai.

Flatsome có hỗ trợ tiếng Việt không?

Flatsome không tích hợp sẵn tiếng Việt nhưng có thể việt hóa hoàn toàn bằng plugin Loco Translate theo hướng dẫn trong bài. Bạn cũng có thể tìm các file ngôn ngữ .po/.mo đã dịch sẵn từ cộng đồng WordPress Việt Nam để tiết kiệm thời gian.

Cần cập nhật Flatsome như thế nào sau khi mua?

Sau khi kích hoạt license bằng Purchase Code, Flatsome sẽ hiển thị thông báo cập nhật tự động trong bảng điều khiển WordPress giống các plugin thông thường. Luôn backup website trước khi nhấn cập nhật để đảm bảo an toàn.

Có thể dùng Flatsome cho website giới thiệu công ty không?

Hoàn toàn có thể. Flatsome rất linh hoạt và hoạt động tốt cho cả website doanh nghiệp, portfolio, blog và landing page nhờ UX Builder đa năng và bộ element phong phú.

Flatsome có ảnh hưởng đến tốc độ tải trang không?

Flatsome có điểm PageSpeed Insights trung bình từ 70 đến 85 trên desktop sau khi cài mới. Điểm số thực tế phụ thuộc vào chất lượng hosting, số plugin cài thêm và cấu hình cache. Khi kết hợp hosting NVMe và plugin cache phù hợp, Flatsome hoàn toàn có thể đạt điểm Core Web Vitals trên 90.