Hướng dẫn này giúp bạn thay logo và favicon cho cửa hàng BettaMax trong phần Branding của Page Builder. Logo hiển thị trên header cửa hàng, favicon hiển thị trên tab trình duyệt. Thực hiện trong khoảng 5 phút.
Bước 1: Chuẩn bị file logo và favicon #
Trước khi vào hệ thống, hãy chuẩn bị sẵn file ảnh đúng kích thước. Upload sai kích thước có thể khiến logo bị mờ, méo hoặc không hiển thị đúng trên các thiết bị.
- Logo chính: Kích thước khuyến nghị 250 x 100px. Định dạng PNG nền trong suốt để hiển thị tốt trên mọi nền màu.
- Favicon: Kích thước 32 x 32px hoặc 16 x 16px. Định dạng PNG hoặc ICO. Đây là icon nhỏ hiển thị trên tab trình duyệt.
Một số công cụ thiết kế Logo bằng AI:
Bước 2: Truy cập phần Branding trong My Store #
Logo và favicon được quản lý trong mục Branding bên trong trình chỉnh sửa giao diện. Đây là nơi tập trung toàn bộ cài đặt nhận diện thương hiệu của cửa hàng.
- Từ thanh menu bên trái, chọn My Store > Theme.
- Nhấn Customize để mở Page Builder.
- Trong Page Builder, nhấn vào biểu tượng 3 vòng tròn -> Branding trên bảng menu bên trái.
Bước 3: Tải lên logo mới #
Sau khi vào mục Branding, bạn sẽ thấy 2 khu vực upload riêng biệt cho logo chính và favicon. Tải lên từng file theo đúng vị trí tương ứng.
- Trong phần Logo, nhấn vào vùng upload hoặc nút Upload Image.
- Chọn file logo từ máy tính (định dạng PNG hoặc JPG, kích thước 250 x 100px).
The user uploads the logo and favicon to the store - Logo mới xuất hiện trên preview ngay sau khi tải lên thành công. Kiểm tra logo hiển thị đúng trên header cửa hàng trong phần canvas bên phải.
Bước 4 Tải lên favicon #
Favicon là icon nhỏ xuất hiện trên tab trình duyệt bên cạnh tên cửa hàng. Favicon rõ nét giúp khách hàng nhận ra cửa hàng nhanh hơn khi họ mở nhiều tab cùng lúc.
- Trong phần Favicon ngay bên dưới phần Logo, nhấn vào vùng upload hoặc nút Upload Image.
- Chọn file favicon từ máy tính (định dạng PNG hoặc ICO, kích thước 32 x 32px hoặc 16 x 16px).
- Kiểm tra favicon xuất hiện đúng trong phần preview.
Bước 5: Lưu và kiểm tra kết quả #
Sau khi tải lên cả logo và favicon, lưu lại thay đổi và kiểm tra trực tiếp trên cửa hàng để đảm bảo hiển thị đúng trên cả desktop và mobile.
- Nhấn Save ở góc trên cùng của Page Builder để lưu thay đổi.
- Mở cửa hàng trên trình duyệt để kiểm tra logo hiển thị trên header.
- Kiểm tra favicon xuất hiện trên tab trình duyệt bên cạnh tên cửa hàng.
