Tạo banner khuyến mãi trên Header của theme Flatsome

Tối ưu hóa Header với Banner khuyến mãi trên Flatsome Theme

Đối với các website thương mại điện tử sử dụng theme Flatsome, việc hiển thị thông báo khuyến mãi hoặc các chương trình ưu đãi ngay tại vị trí Header là cách hiệu quả để tăng tỷ lệ chuyển đổi. Tại STAR WAR Digital Solutions, chúng tôi thường xuyên nhận được yêu cầu tối ưu hóa giao diện để làm nổi bật thông điệp marketing mà không làm ảnh hưởng đến trải nghiệm người dùng trên thiết bị di động.

Dưới đây là hướng dẫn kỹ thuật giúp bạn tích hợp banner khuyến mãi vào vị trí trên cùng của Header một cách chuyên nghiệp.

Bước 1: Chuẩn bị Banner

Trước khi can thiệp vào mã nguồn, bạn cần chuẩn bị hình ảnh banner phù hợp:

• Kích thước: Nên đồng bộ với chiều ngang của layout website (ví dụ: 1200px).
• Thiết kế: Đảm bảo hình ảnh có độ phân giải tốt, dung lượng đã được tối ưu để không làm chậm tốc độ tải trang.

Bước 2: Tạo nội dung bằng UX Block

Thay vì chèn ảnh trực tiếp, việc sử dụng UX Block giúp bạn dễ dàng quản lý và thay đổi nội dung sau này mà không cần sửa code:

1. Truy cập UX Blocks > Add New.
2. Sử dụng các element có sẵn trong UX Builder để thiết kế.
3. Thiết lập Section với padding = 0 và màu nền (Background color) trùng khớp với màu chủ đạo của banner để tạo sự liền mạch.
4. Lưu lại và ghi nhớ Shortcode hoặc ID của Block vừa tạo.

Bước 3: Tích hợp vào Header bằng Hook

Để hiển thị Block này ngay phía trên Header, bạn cần sử dụng hook flatsome_before_header. Hãy thêm đoạn code dưới đây vào file functions.php của theme con (Child Theme):

function add_block_header_top(){
    // Thay thế [shortcode-cua-ban] bằng shortcode UX Block bạn đã tạo
    echo do_shortcode('[ux_block id="ID-HOAC-SHORTCODE-CUA-BAN"]');
}
add_action('flatsome_before_header','add_block_header_top');

Lưu ý: Luôn thực hiện sao lưu dữ liệu trước khi chỉnh sửa file functions.php để tránh lỗi phát sinh ngoài ý muốn.

Kết luận

Việc tùy biến Header bằng cách sử dụng UX Block kết hợp với Hook trong Flatsome là giải pháp tối ưu, đảm bảo tính linh hoạt cho quản trị viên website. Cách làm này giúp banner hiển thị đồng nhất trên mọi thiết bị mà không cần cài đặt thêm các plugin bên thứ ba gây nặng hệ thống.

Nếu bạn cần hỗ trợ tùy chỉnh chuyên sâu hơn về giao diện hoặc tối ưu hóa hiệu suất cho hệ thống WordPress của doanh nghiệp, đội ngũ kỹ thuật tại STAR WAR Digital Solutions luôn sẵn sàng đồng hành cùng bạn.