Tùy Chỉnh Phông Chữ Cho Cửa Hàng Trong Ứng Dụng Shopper

Mô-đun Phông chữ trong Ứng dụng Shopper cho phép bạn tùy chỉnh kiểu chữ trên các trang ứng dụng của cửa hàng, giúp bạn duy trì sự nhất quán thương hiệu và cải thiện khả năng đọc nội dung.

Trong Trình chỉnh sửa Thiết kế Ứng dụng, bạn có thể xác định phông chữ chính và phụ và điều chỉnh chi tiết kiểu phông chữ cho các khu vực nội dung chính, bao gồm tiêu đề, tên sản phẩm, giá cả và văn bản thân bài. Tất cả các phông chữ được hỗ trợ đều lấy từ Google Fonts, đảm bảo tính tương thích rộng rãi và hiển thị đáng tin cậy trên các thiết bị.

Trong bài viết này, bạn sẽ biết cách tìm cài đặt phông chữ trong Ứng dụng Shopper và cách cấu hình phông chữ cho các loại nội dung khác nhau. Bạn cũng sẽ hiểu cách xem trước, lưu và xuất bản các thay đổi để chúng có hiệu lực trên toàn bộ ứng dụng cửa hàng của bạn.

Tổng quan và Truy cập Cài đặt Phông chữ

Tất cả các cài đặt liên quan đến phông chữ cho ứng dụng cửa hàng của bạn được quản lý trong phần Phông chữ của Trình chỉnh sửa Thiết kế Ứng dụng. Để truy cập cài đặt phông chữ:

1. Từ bảng quản trị SHOPLINE của bạn, đi tới Kênh > Ứng dụng Shopper > Thiết kế Ứng dụng, sau đó nhấp vào Thiết kế.

2. Trong bảng bên trái của Trình chỉnh sửa Thiết kế Ứng dụng, nhấp vào Phông chữ.

   

Trong phần này, bạn có thể cấu hình kiểu chữ cho các khu vực nội dung khác nhau trên ứng dụng của bạn. Các cài đặt có sẵn được tổ chức thành các danh mục sau:

• Phông chữ: Đặt phông chữ chính và phụ được sử dụng trên toàn bộ ứng dụng của bạn.
• Tiêu đề: Tùy chỉnh kiểu phông chữ cho các tiêu đề ở các cấp độ khác nhau.
• Tiêu đề sản phẩm: Điều chỉnh kiểu chữ cho tên sản phẩm.
• Giá: Xác định cách hiển thị giá sản phẩm.
• Thân bài: Cấu hình kiểu phông chữ cho nội dung văn bản chung.

Ứng dụng Shopper sử dụng một phông chữ chính và một phông chữ phụ làm kiểu chữ cơ bản cho ứng dụng của bạn. Các họ phông chữ này được chọn và quản lý duy nhất trong phần Phông chữ.

Trong các danh mục khác, như Tiêu đề, Tiêu đề sản phẩm, Giá và Thân bài, bạn có thể chọn áp dụng phông chữ chính hoặc phụ đã được định nghĩa trong phần Phông chữ và điều chỉnh cách hiển thị của nó. Các điều chỉnh có sẵn bao gồm kiểu phông chữ, kích thước phông chữ, cài đặt chữ hoa và chiều cao dòng.

Thiết lập Phông chữ Chính và Phụ

Trong phần Phông chữ, bạn xác định kiểu chữ cơ bản được sử dụng trên toàn bộ ứng dụng cửa hàng của bạn bằng cách đặt một phông chữ chính và một phông chữ phụ. Các phông chữ này là nền tảng cho các cài đặt phông chữ khác trong Ứng dụng Shopper.

Mỗi phông chữ bao gồm hai phần:

• Phông chữ ưu tiên: Phông chữ được áp dụng đầu tiên 
• Phông chữ dự phòng: Phông chữ dự phòng được sử dụng tự động khi phông chữ ưu tiên không hỗ trợ một số ký tự nhất định

Cấu hình Phông chữ Chính và Phông chữ Phụ

Để cấu hình phông chữ chính hoặc phông chữ phụ:

1. Trong phần Phông chữ, tìm Phông chữ chính hoặc Phông chữ phụ.

2. Dưới Phông chữ ưu tiên, nhấp vào Chọn lại, sau đó chọn một phông chữ từ Google Fonts.

   

3. Dưới Phông chữ dự phòng, nhấp vào Chọn lại, sau đó chọn một phông chữ dự phòng để đảm bảo văn bản vẫn dễ đọc khi xuất hiện các ký tự không được hỗ trợ.

   

4. (Tùy chọn) Nhấp vào Đặt lại về mặc định để khôi phục cài đặt phông chữ mặc định.
5. xem trước và kiểm tra các thay đổi mới nhất, hoặc nhấp vào Xuất bản lên Ứng dụng Sản xuất để xuất bản chúng lên ứng dụng cửa hàng trực tiếp của bạn.

Cách Sử Dụng Các Phông Chữ Này

Phông chữ chính và phụ được định nghĩa ở đây không tự áp dụng kiểu dáng. Thay vào đó, chúng được tham chiếu trong các danh mục phông chữ khác—chẳng hạn như Tiêu đề, Tiêu đề sản phẩm, Giá, và Nội dung—nơi bạn có thể chọn phông chữ sử dụng và điều chỉnh các chi tiết như kích thước phông chữ, độ đậm, kiểu chữ hoa, và chiều cao dòng.

Thiết Lập Phông Chữ Tiêu Đề Trên Các Trang Cửa Hàng

Phần Tiêu đề cho phép bạn tùy chỉnh kiểu chữ cho các tiêu đề hiển thị trên ứng dụng cửa hàng của bạn, chẳng hạn như tiêu đề trang và tiêu đề phần. Bạn có thể cấu hình kiểu phông chữ riêng biệt cho các cấp độ tiêu đề khác nhau.

Các Cấp Độ Tiêu Đề Có Sẵn

Ứng dụng Shopper hỗ trợ các cấp độ tiêu đề sau trên các trang khác nhau:

• Tiêu đề 1: Tiêu đề thành phần trên Trang chủ và Trang tùy chỉnh
• Tiêu đề 2: Tiêu đề thành phần trên trang Chi tiết sản phẩm và trang Giỏ hàng
• Tiêu đề 3: Tiêu đề phần và tiêu đề đánh giá trên trang Chi tiết sản phẩm
• Tiêu đề 4: Tiêu đề thuộc tính trên trang Chi tiết sản phẩm

Mỗi cấp độ tiêu đề có thể được tùy chỉnh độc lập.

Thiết Lập Phông Chữ Tiêu Đề

Để cấu hình phông chữ tiêu đề:

1. Trong phần Phông chữ của Trình chỉnh sửa Thiết kế Ứng dụng, nhấp vào Tiêu đề.

2. Dưới Phông chữ, chọn sử dụng Phông chữ chính hoặc Phông chữ phụ.

   

3. Tìm cấp độ tiêu đề bạn muốn tùy chỉnh (Tiêu đề 1–Tiêu đề 4).

4. Điều chỉnh các cài đặt sau theo nhu cầu:

   • Kiểu: Chọn độ đậm của phông chữ (ví dụ, Thường 400).
   • Chữ in hoa: Bật tùy chọn này để hiển thị văn bản dưới dạng chữ in hoa.
   • Kích thước phông chữ: Kéo thanh trượt hoặc nhập giá trị để đặt kích thước phông chữ.
   • Chiều cao dòng mặc định: Bật để sử dụng chiều cao dòng mặc định, hoặc tắt để tùy chỉnh.

   

5. Lặp lại các bước trên cho các cấp độ tiêu đề khác nếu cần.
6. Xem trước hiệu ứng của các thay đổi trong bảng xem trước bên phải.
7. Các thay đổi của bạn được lưu tự động. Ở góc trên bên phải, nhấp vào Xuất bản lên Snaplook để xem trước và kiểm tra các thay đổi mới nhất, hoặc nhấp vào Xuất bản lên Ứng dụng Sản xuất để xuất bản chúng lên ứng dụng cửa hàng trực tiếp của bạn.

Thiết Lập Phông Chữ Tiêu Đề Sản Phẩm

Phần Tiêu đề sản phẩm cho phép bạn cấu hình cách hiển thị tiêu đề sản phẩm trong ứng dụng, bao gồm trên các trang Danh sách sản phẩm và Túi hàng/Danh sách yêu thích.

Để cấu hình phông chữ tiêu đề sản phẩm:

1. Trong bảng Phông chữ của Trình chỉnh sửa Thiết kế Ứng dụng, nhấp vào Tiêu đề sản phẩm.

2. Dưới mục Phông chữ, chọn áp dụng Phông chữ chính hoặc Phông chữ phụ.

   

3. Dưới mục Tiêu đề sản phẩm (Trang danh sách sản phẩm), điều chỉnh các cài đặt sau:

   • Kiểu: Chọn độ đậm của phông chữ (ví dụ, Regular 400).
   • Kích thước phông chữ: Kéo thanh trượt hoặc nhập giá trị để đặt kích thước phông chữ.
   • Chiều cao dòng mặc định: Bật để sử dụng chiều cao dòng mặc định, hoặc tắt để tùy chỉnh chiều cao dòng.

   

4. Dưới mục Tiêu đề sản phẩm trong Giỏ hàng/Danh sách yêu thích, cấu hình các cài đặt sau:

   • Kiểu: Chọn độ đậm của phông chữ. Mặc định là Regular (400).
   • Kích thước phông chữ: Kéo thanh trượt hoặc nhập giá trị để đặt kích thước phông chữ. Mặc định là 12 px.
   • Chiều cao dòng mặc định: Bật để sử dụng chiều cao dòng mặc định, hoặc tắt để đặt chiều cao dòng tùy chỉnh. Mặc định được bật.

   Lưu ý: Các cài đặt Tiêu đề sản phẩm trong Giỏ hàng/Danh sách yêu thích áp dụng cho cả trang Túi mua sắm và Danh sách yêu thích.

   

5. Xem trước hiệu ứng của các thay đổi phông chữ trong bảng xem trước bên phải.
6. Các thay đổi của bạn được lưu tự động. Ở góc trên bên phải, nhấp vào Xuất bản lên Snaplook để xem trước và kiểm tra các thay đổi mới nhất, hoặc nhấp vào Xuất bản lên Ứng dụng Sản xuất để xuất bản chúng lên ứng dụng cửa hàng trực tiếp của bạn.

Thiết lập Phông chữ Giá

Phần Giá cho phép bạn cấu hình cách hiển thị giá sản phẩm trong ứng dụng. Các cài đặt này áp dụng cho Giá, Giá so sánh và Giá thành viên trên trang Danh sách sản phẩm, cũng như Giá danh sách Giỏ hàng/Danh sách yêu thích, Giá so sánh Giỏ hàng/Danh sách yêu thích và Tổng ước tính Giỏ hàng.

Để cấu hình phông chữ giá:

1. Trong bảng Phông chữ của Trình chỉnh sửa Thiết kế Ứng dụng, nhấp vào Giá.

2. Dưới Phông chữ, chọn áp dụng Phông chữ chính hoặc Phông chữ phụ.

   

3. Dưới Giá niêm yết (Trang danh sách sản phẩm), điều chỉnh các cài đặt sau:

   • Kiểu: Chọn độ đậm của phông chữ (ví dụ, Regular 400).
   • Kích thước phông chữ: Kéo thanh trượt hoặc nhập giá trị để đặt kích thước phông chữ.

   

4. Dưới Giá gạch ngang (Trang danh sách sản phẩm), điều chỉnh:

   • Kiểu: Chọn độ đậm của phông chữ.
   • Kích thước phông chữ: Đặt kích thước phông chữ cho giá gạch ngang.

   

5. Dưới Giá niêm yết Giỏ hàng/Danh sách yêu thích, bạn có thể cấu hình các cài đặt sau:

   • Kiểu: Chọn độ đậm của phông chữ. Mặc định là Semibold (600).
   • Kích thước phông chữ: Kéo thanh trượt hoặc nhập giá trị để đặt kích thước phông chữ. Mặc định là 14 px.

   

6. Dưới Giá so sánh Giỏ hàng/Danh sách yêu thích, bạn có thể cấu hình các cài đặt sau:

   • Kiểu: Chọn độ đậm của phông chữ. Mặc định là Regular (400).
   • Kích thước phông chữ: Kéo thanh trượt hoặc nhập giá trị để đặt kích thước phông chữ. Mặc định là 10 px.

   

7. Dưới mục Tổng ước tính giỏ hàng, bạn có thể cấu hình các cài đặt sau:

   • Kiểu: Chọn độ đậm của phông chữ. Mặc định là Semibold (600).
   • Kích thước phông chữ: Kéo thanh trượt hoặc nhập giá trị để đặt kích thước phông chữ. Mặc định là 16 px.

   

   Lưu ý: Các cài đặt Giá danh sách Giỏ hàng/Danh sách yêu thích, Giá so sánh Giỏ hàng/Danh sách yêu thích và Tổng ước tính giỏ hàng áp dụng cho cả trang Túi mua sắm và Danh sách yêu thích.

8. Xem trước hiệu ứng của các thay đổi phông chữ giá trong bảng xem trước bên phải.
9. Các thay đổi của bạn được lưu tự động. Ở góc trên bên phải, nhấp vào Xuất bản lên Snaplook để xem trước và kiểm tra các thay đổi mới nhất, hoặc nhấp vào Xuất bản lên Ứng dụng Sản xuất để xuất bản chúng lên ứng dụng cửa hàng trực tiếp của bạn.

Thiết Lập Phông Chữ Văn Bản Chính

Mục Body cho phép bạn tùy chỉnh kiểu chữ cho nội dung văn bản chung trên ứng dụng cửa hàng của bạn, chẳng hạn như tên mặt hàng, mô tả, thông báo và thông tin hỗ trợ.

Các Loại Văn Bản Chính Có Sẵn

Ứng dụng Shopper hỗ trợ ba kích thước văn bản chính:

• Body – lớn: Tên mặt hàng và tiêu đề danh mục
• Body – thường: Văn bản mô tả, bao gồm thông báo, tóm tắt, khuyến mãi và đánh giá
• Body – nhỏ: Thông tin meta, thời gian, trạng thái và ghi chú liên quan

Mỗi loại văn bản chính có thể được cấu hình riêng biệt.

Cấu Hình Kiểu Văn Bản Chính

Để cấu hình phông chữ văn bản chính:

1. Trong bảng Fonts của Trình chỉnh sửa Thiết kế Ứng dụng, nhấp vào Body.

2. Dưới mục Fonts, chọn áp dụng Phông chữ chính hoặc Phông chữ phụ.

   

3. Đối với mỗi loại văn bản chính (Body – lớn, Body – thường, hoặc Body – nhỏ), điều chỉnh các cài đặt sau:

   • Kiểu: Chọn độ đậm của phông chữ (ví dụ, Regular 400).
   • Kích thước phông chữ: Kéo thanh trượt hoặc nhập giá trị để đặt kích thước phông chữ.
   • Chiều cao dòng mặc định: Bật để sử dụng chiều cao dòng mặc định, hoặc tắt để tùy chỉnh.

   

4. Lặp lại các bước trên cho các loại văn bản chính khác nếu cần.
5. Xem trước hiệu ứng của các thay đổi trong bảng xem trước bên phải.
6. Các thay đổi của bạn được lưu tự động. Ở góc trên bên phải, nhấp Xuất bản lên Snaplook để xem trước và kiểm tra các thay đổi mới nhất, hoặc nhấp Xuất bản lên Ứng dụng Sản xuất để xuất bản chúng lên ứng dụng cửa hàng trực tiếp của bạn.

Ghi Chú và Thực Tiễn Tốt Nhất

• Định nghĩa phông chữ trước khi tạo kiểu văn bản: Đặt phông chữ chính và phụ của bạn trong phần Phông chữ trước, sau đó điều chỉnh kiểu trong Tiêu đề, Tiêu đề sản phẩm, Giá và Nội dung để đảm bảo kiểu chữ nhất quán.
• Sử dụng phông chữ chính và phụ một cách có chủ đích: Áp dụng phông chữ chính cho nội dung chính và phông chữ phụ cho văn bản hỗ trợ để tạo ra thứ bậc hình ảnh rõ ràng.
• Xem trước các thay đổi trước khi xuất bản: Luôn xem lại hiệu ứng hình ảnh trong bảng xem trước để đảm bảo văn bản vẫn dễ đọc và nhất quán trên các trang khác nhau.
• Chọn kích thước phông chữ và chiều cao dòng phù hợp: Tránh kích thước phông chữ quá nhỏ hoặc khoảng cách dòng quá chặt, đặc biệt là đối với văn bản nội dung, để duy trì khả năng đọc trên thiết bị di động.
• Bật phông chữ dự phòng cho nội dung đa ngôn ngữ: Giữ bật phông chữ dự phòng để đảm bảo các ký tự không được phông chữ ưu tiên hỗ trợ (như tiếng Trung, tiếng Nhật hoặc tiếng Ả Rập) được hiển thị chính xác.
• Nhớ xuất bản các thay đổi của bạn: Các thay đổi sẽ không hiển thị với khách hàng cho đến khi bạn nhấn Xuất bản.