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 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 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 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 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í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ác điều chỉnh có sẵn bao gồm kiểu phông, kích thước phông, 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 hiệu ứng của các thay đổi phông chữ trong bảng xem trước bên phải. Sau đó, nhấp Lưu để giữ cài đặt hoặc Xuất bản để áp dụng ngay lập tức.

    

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/thường, 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. Nhấp Lưu để giữ cài đặt hoặc Xuất bản để áp dụng ngay lập tức.

Cài Đặt Phông Chữ Tiêu Đề Sản Phẩm cho Trang Danh Sách Sản Phẩm

Phần Tiêu đề sản phẩm cho phép bạn tùy chỉnh cách tên sản phẩm được hiển thị trong ứng dụng cửa hàng của bạn. Các cài đặt này áp dụng cho tiêu đề sản phẩm hiển thị trên trang danh sách sản phẩm.

Để 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.

   

4. 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.
5. Nhấp Lưu để giữ cài đặt hoặc Xuất bản để áp dụng ngay lập tức.

Thiết Lập Phông Chữ Giá Cho Trang Danh Sách Sản Phẩm

Mục Giá cho phép bạn tùy chỉnh cách hiển thị giá sản phẩm trong ứng dụng cửa hàng của bạn. Các cài đặt này áp dụng cho giá hiển thị trên trang danh sách sản phẩm, bao gồm giá gốc, giá khuyến mãi và giá dành cho thành viên.

Để 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. Xem trước hiệu ứng thay đổi phông chữ giá trong bảng xem trước bên phải.
6. Nhấp Lưu để giữ cài đặt hoặc Xuất bản để áp dụng ngay lập tức.

Cài Đặt Phông Chữ Văn Bản Chính

Mục Văn bản chính 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, như tên mục, 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:

• Văn bản chính – lớn: Tên mục và tiêu đề danh mục
• Văn bản chính – 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á
• Văn bản chính – 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 Phông chữ của Trình chỉnh sửa Thiết kế Ứng dụng, nhấp vào Thân bài.

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

   

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

   • Kiểu: Chọn độ đậm của phông chữ (ví dụ, Thường 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 thân bài 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. Nhấp Lưu để giữ cài đặt hoặc Xuất bản để áp dụng ngay lập tức.

Ghi chú và Thực hành Tốt nhất

• Xác định phông chữ trước khi tạo kiểu văn bản: Đặt phông chữ chính và phông chữ phụ 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à Thân bài để đả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 đối với văn bản thân bài, để 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ấp Xuất bản.