Khắc phục sự cố chủ đề cửa hàng trực tuyến

Hình ảnh có thể hiển thị khác với mong đợi, nhưng nguyên nhân có thể do chính hình ảnh không tương thích với mục đích bạn đang dùng trong chủ đề. Đảm bảo kích thước hình ảnh chính xác đối với hình ảnh bạn đang sử dụng. Tham khảo danh sách sự cố hiển thị thường gặp sau đây có thể xảy ra khi tải lên hình ảnh không tương thích:

• Nếu đầu trang hiển thị lớn hơn và hình ảnh logo hiển thị nhỏ hơn dự kiến, nguyên nhân có thể là do khoảng trắng trong tệp hình ảnh logo. Khoảng trắng trong tệp hình ảnh logo có thể khiến logo hiển thị nhỏ hơn và đầu trang lớn hơn. Chỉnh sửa tệp hình ảnh để đảm bảo ảnh được cắt sát logo và không có khoảng trắng.
• Nếu hình ảnh trong bản trình chiếu bị cắt, thì đây là chủ đích thiết kế nhằm đảm bảo hình ảnh hiển thị trên thiết bị di động giống như trên máy tính để bàn. Vì nội dung hiển thị nhỏ hơn nhiều trên màn hình thiết bị di động nên nhiều chi tiết có thể bị mất khi thu nhỏ nội dung. Thay vào đó, nội dung được cắt bớt để đảm bảo không bị mất chi tiết. Hình ảnh chân dung (có chiều cao lớn hơn chiều rộng) cũng có thể chiếm nhiều không gian trên máy tính để bàn. Đây là lý do tại sao hình ảnh bản trình chiếu có chiều cao tối đa. Bạn có thể thêm điểm trọng tâm vào hình ảnh bản trình chiếu để đảm bảo điểm trọng tâm luôn ở giữa hình ảnh.

  Tùy chọn chiều cao thích ứng: Nhiều chủ đề Shopify có cài đặt chiều cao thích ứng cho bản trình chiếu, giúp điều chỉnh chiều cao bản trình chiếu sao cho khớp với trang trình chiếu hình ảnh đầu tiên, giảm việc cắt xén trên nhiều kích cỡ màn hình khác nhau. Tính năng này được tích hợp ở tất cả chủ đề hiện được hỗ trợ do Shopify phát triển.

• Nếu hình ảnh GIF không hiển thị chính xác và được thêm vào cửa hàng bằng công cụ soạn thảo văn bản định dạng (ví dụ như trong mô tả sản phẩm hoặc bài đăng trên blog), thì nguyên nhân có thể do kích thước hình ảnh. Bạn có thể khắc phục bằng cách nhấp vào GIF trong công cụ soạn thảo văn bản định dạng rồi nhấp vào Chỉnh sửa hình ảnh. Trong menu thả xuống Kích thước hình ảnh, chọn Gốc. Sau đó, bạn có thể đổi kích thước ảnh GIF bằng cách nhấp và kéo các góc của hình ảnh vào trong để thu nhỏ hoặc ra ngoài để phóng to.
• Nếu hình ảnh có sự thay đổi màu sắc đáng kể trên cửa hàng so với ảnh gốc, có thể hình ảnh không ở hệ màu Red Green Blue (sRBG) tiêu chuẩn. Để khắc phục sự thay đổi màu này, hãy lưu tệp trong ứng dụng chỉnh sửa ảnh dưới dạng sRBG. Các thuật ngữ phổ biến cho thao tác này là "Web optimize", "Adjust image for Web" hoặc "Save for Web". Tìm hiểu thêm về cấu hình màu.
• Nếu hình ảnh sản phẩm trên trang bộ sưu tập không thẳng hàng, có thể cần điều chỉnh tỷ lệ khung hình trong tệp hình ảnh sản phẩm để có cùng tỷ lệ chiều cao so với chiều rộng, sau đó tải lên lại hình ảnh sản phẩm. Có thể sử dụng ứng dụng chỉnh sửa ảnh trên Shopify App Store.

Xem lại các sự cố sau để tìm sự cố cụ thể và các bước giúp khắc phục:

• Thiếu sản phẩm: Nếu cửa hàng thiếu sản phẩm, có thể cần xem lại Trạng thái và Kênh bán hàng trong phần Xuất bản của sản phẩm trên trang quản trị Shopify. Xác minh trạng thái sản phẩm là Đang hoạt động và sản phẩm có sẵn trên Cửa hàng trực tuyến.
• Thiếu bộ sưu tập: Nếu cửa hàng thiếu bộ sưu tập, có thể cần xem lại Kênh bán hàng trong phần Xuất bản của bộ sưu tập trên trang quản trị Shopify. Xác minh bộ sưu tập có sẵn trên Cửa hàng trực tuyến và đã được thêm vào menu.
• Hiển thị bộ sưu tập nhưng thiếu sản phẩm: Nếu bộ sưu tập đang hiển thị nhưng lại thiếu sản phẩm, có thể cần xem lại mọi bộ lọc thẻ của bộ sưu tập trong cài đặt Menu. Xác minh không có thẻ nào trong trường Lọc bộ sưu tập bằng thẻ có thể khiến sản phẩm không hiển thị.
• Tiền tệ không chính xác: Nếu tiền tệ hiển thị không chính xác cho sản phẩm hoặc trong bộ sưu tập, hãy xem lại mục Hiển thị tiền tệ trong phần Mặc định của cửa hàng tại Cài đặt > Chung để đảm bảo không có mã bổ sung nào. Tìm hiểu thêm về cách định dạng hiển thị tiền tệ cho khách hàng.
• Một số sản phẩm hiển thị khác nhau: Nếu một số sản phẩm hoặc bộ sưu tập hiển thị khác với phần còn lại, hãy xem lại Mẫu chủ đề được gán cho sản phẩm hoặc bộ sưu tập đó trong trang quản trị Shopify.
• Không thể chỉnh sửa mẫu sản phẩm hoặc bộ sưu tập: Nếu mẫu sản phẩm hoặc bộ sưu tập mặc định chuyển sang màu xám và không thể chọn trong trình biên tập chủ đề, bạn cần hiển thị ít nhất 1 sản phẩm hoặc bộ sưu tập trên kênh bán hàng Cửa hàng trực tuyến. Không thể chỉnh sửa các mẫu mặc định này nếu không có sản phẩm hoặc bộ sưu tập khả dụng để xem trước thay đổi. Tìm hiểu thêm về cách thay đổi tính khả dụng của bộ sưu tập và thiết lập tính khả dụng của sản phẩm trên kênh bán hàng.

Nếu nội dung đã dịch hiển thị không chính xác hoặc bị thiếu trên cửa hàng, có thể bản dịch của nội dung đã lỗi thời hoặc bị thiếu. Nội dung cũng có thể nằm trong một mẫu cụ thể của thị trường. Bất cứ khi nào thêm nội dung mới bằng ngôn ngữ mặc định, hãy nhớ chạy lại tính năng dịch tự động hoặc thêm bản dịch mới theo cách thủ công.

Các trạng thái sau có thể áp dụng cho nội dung đã dịch:

• Đã dịch: Nội dung đã có bản dịch.
• Lỗi thời: Nội dung ở ngôn ngữ mặc định đã được cập nhật, nhưng bản dịch chưa phản ánh các cập nhật này.
• Chưa dịch: Chưa có bản dịch cho loại nội dung này.

Khi xem lại nội dung đã dịch, hãy cập nhật mọi nội dung chưa dịch hoặc đã lỗi thời, sau đó nội dung đã dịch sẽ hiển thị chính xác.

Tìm hiểu thêm về cách dịch và bản địa hóa cửa hàng.

Nếu cửa hàng và trình biên tập chủ đề không hiển thị cùng một thông tin, hãy xem lại mẫu chủ đề đang chỉnh sửa. Có thể cần chỉnh sửa để cập nhật mẫu chủ đề nhằm hiển thị thông tin chính xác.

Ghi đè thị trường cho phép tạo các cửa hàng khác nhau cho từng thị trường và hiển thị nội dung đã dịch. Có thể bạn đã vô tình thao tác trong một thị trường cụ thể hoặc B2B khi cập nhật. Tìm nội dung bằng menu thả xuống Thị trường trong trình biên tập chủ đề để đảm bảo nội dung ở đúng thị trường.

Tìm hiểu thêm về tính năng ghi đè thị trường.

Tất cả chủ đề hiện có trên Cửa hàng chủ đề Shopify đều là chủ đề tương thích, nghĩa là chủ đề sẽ tự động điều chỉnh theo kích cỡ màn hình. Trong trình biên tập chủ đề, có thể chuyển đổi chế độ xem kích cỡ màn hình khi chỉnh sửa chủ đề để đảm bảo trang và hình ảnh hiển thị chính xác. Tìm hiểu thêm về cách xem các kích cỡ màn hình khác nhau trong trình biên tập chủ đề.

Nhiều phần và khối có cài đặt dành cho thiết bị di động để tùy chỉnh. Ví dụ: có thể thiết lập Số cột trên thiết bị di động trong phần Sản phẩm có liên quan. Có thể xem lại cài đặt phần liên quan đến thiết bị di động cho từng mẫu để khắc phục sự cố hiển thị trên các kích cỡ màn hình di động.

Một số tính năng của chủ đề có thể hiển thị khác nhau trên thiết bị di động và máy tính để bàn để đảm bảo chủ đề có khả năng tiếp cận trên mọi kích cỡ màn hình. Ví dụ: trên kích cỡ màn hình máy tính để bàn, bản trình chiếu có thể có lớp phủ văn bản, trong đó văn bản hiển thị đè lên trên hình ảnh, thường đi kèm độ mờ màu ảnh hoặc bóng văn bản. Tuy nhiên, trên kích cỡ màn hình di động, văn bản có thể hiển thị bên dưới bản trình chiếu. Đây là tính năng khả năng tiếp cận được thiết kế để có thể đọc được văn bản trên bất kỳ kích cỡ màn hình nào. Nếu văn bản vẫn là một lớp phủ, văn bản đó sẽ hiển thị rất nhỏ trên thiết bị di động, gây khó đọc.

Nếu phần bộ sưu tập nổi bật hoặc trang bộ sưu tập hiển thị kích thước không nhất quán hoặc không thẳng hàng khi xem cửa hàng trên thiết bị di động, nguyên nhân có thể do tỷ lệ khung hình không nhất quán. Lưới hình ảnh, chẳng hạn như hình ảnh sản phẩm hiển thị trong bộ sưu tập hoặc bộ sưu tập nổi bật, được thiết kế để tương thích với kích cỡ màn hình. Nếu tỷ lệ khung hình của các hình ảnh trong lưới hình ảnh không nhất quán, chúng có thể hiển thị khác nhau tùy theo kích cỡ màn hình. Hình ảnh sản phẩm hình vuông có kích thước 2048 x 2048 px thường phù hợp nhất với lưới sản phẩm. Hãy cập nhật hình ảnh để có tỷ lệ khung hình nhất quán nhằm tối ưu hóa trên mọi kích cỡ màn hình. Tìm hiểu thêm về tỷ lệ khung hình của ảnh.

Đôi khi, mã HTML được thêm vào công cụ soạn thảo văn bản định dạng xung đột với mã chủ đề. Nếu sự cố xuất hiện trên một trang duy nhất, chẳng hạn như trang sản phẩm, trang web hoặc bài đăng trên blog, nguyên nhân có thể do có mã HTML thừa. Mã thừa này đôi khi xuất hiện do sao chép và dán văn bản từ trang web khác.

Xem lại mã HTML

Có thể xem lại mã HTML trong công cụ soạn thảo văn bản định dạng.

Các bước thực hiện:

1. Đi tới trang trong trang quản trị.
2. Nhấp vào nút Hiển thị HTML để xem lại mã HTML.
3. Tìm mọi mã HTML có thể gây ra sự cố hiển thị và xóa mã đó đi.
4. Nhấp vào Lưu.

Xóa định dạng

Có thể tô sáng một phần văn bản và xóa định dạng HTML.

Các bước thực hiện:

1. Đi tới trang trong trang quản trị.
2. Tô sáng văn bản có sự cố định dạng.
3. Nhấp vào nút 🚫.
4. Nhấp vào Lưu.

Tìm hiểu thêm về công cụ soạn thảo văn bản định dạng.

Nếu cửa hàng chứa mã chuyển hướng người dùng đến các URL không kết nối với cửa hàng của bạn, hãy đảm bảo tính năng chuyển hướng đã bị hủy kích hoạt khi truy cập trình biên tập chủ đề.

Ví dụ: loại chuyển hướng này có thể được thêm vào cửa hàng để dẫn khách hàng đến các cửa hàng Shopify khác nhau tùy theo địa điểm của họ. Loại mã chuyển hướng này có thể có trong chủ đề hoặc ứng dụng bạn đã cài đặt.

Để xác minh chuyển hướng không cản trở trải nghiệm sử dụng trình biên tập, hãy sử dụng tham chiếu đến biến window.Shopify.designMode trong JavaScript để hủy kích hoạt chuyển hướng khi bạn truy cập trình biên tập chủ đề. Biến này được đặt thành true khi cửa hàng được tải trong trình biên tập và thành false khi không được tải.

Nếu bạn có các khối có thể thu gọn hoặc khối chủ đề khác hiển thị cùng nội dung trên mọi trang sản phẩm, bạn cần thiết lập nguồn động bằng trường siêu dữ liệu. Tình trạng này thường xảy ra khi thương nhân thêm thông tin dành riêng cho sản phẩm, chẳng hạn như thành phần hoặc hướng dẫn bảo quản vào một sản phẩm, nhưng lại hiển thị trên mọi sản phẩm.

Khối có thể thu gọn hiển thị cùng văn bản trên mọi sản phẩm

Khi thêm nội dung trực tiếp vào khối có thể thu gọn trong trình biên tập chủ đề, nội dung đó sẽ hiển thị trên tất cả trang sản phẩm. Để hiển thị nội dung dành riêng cho sản phẩm, bạn cần sử dụng các nguồn động bằng metafield:

1. Trong bảng điều khiển quản trị Shopify, đi đến Cài đặt > Trường siêu dữ liệu > Sản phẩm.
2. Nhấp vào Thêm định nghĩa.
3. Nhập Tên cho trường siêu dữ liệu, rồi nhấp vào Chọn loại nội dung.
4. Chọn Văn bản và Văn bản nhiều dòng.
5. Nhấp vào Lưu.
6. Chuyển đến trang sản phẩm trong bảng điều khiển quản trị và cuộn đến mục trường siêu dữ liệu ở cuối trang.
7. Thêm nội dung dành riêng cho sản phẩm vào trường siêu dữ liệu đã tạo.
8. Trong trình biên tập chủ đề, đi đến mẫu sản phẩm và tìm mục Hàng có thể thu gọn.
9. Trong cài đặt Nội dung hàng, nhấp vào nút .
10. Chọn trường siêu dữ liệu từ các tùy chọn hiện có.
11. Lưu thay đổi.

Bây giờ, mỗi sản phẩm sẽ hiển thị nội dung riêng khi điền trường siêu dữ liệu. Không có nội dung nào hiển thị nếu để trống trường siêu dữ liệu của sản phẩm đó.

Tìm hiểu thêm về hiển thị trường siêu dữ liệu trên cửa hàng trực tuyến và sử dụng trường siêu dữ liệu và siêu đối tượng làm nguồn động.

Nếu có lỗi cú pháp trong mã chủ đề, cảnh báo HTML error found (Phát hiện lỗi HTML) hoặc Theme error (Lỗi chủ đề) sẽ hiển thị trong trình biên tập chủ đề. Thông báo lỗi hiển thị tệp Liquid chứa lỗi.

Cảnh báo The theme you're looking for couldn't be found (Không tìm thấy chủ đề bạn đang tìm kiếm) có thể xuất hiện khi có bất kỳ HTML nào bị hỏng. Trang có thể không tải được trong trình biên tập chủ đề vì nhiều nguyên nhân, chẳng hạn như những nguyên nhân sau:

• sự cố kết nối mạng
• mã Liquid trong chủ đề không hợp lệ

Bạn có thể xác định vị trí thay đổi mã trong mã chủ đề và sửa mã. Nếu có thể xác định được tệp hiện có bị ảnh hưởng, bạn có thể khôi phục tệp đó về phiên bản trước khả dụng trong chế độ xem Dòng thời gian của trình soạn thảo mã.

Các bước thực hiện:

1. Nhấp vào tệp mục .liquid được liên kết trong thông báo lỗi hoặc xem lại tệp để tìm thay đổi gần đây. Thao tác này sẽ đưa bạn đến trang Chỉnh sửa HTML/CSS và mở tệp trong trình biên tập mã.
2. Duyệt qua mã trong tệp và tìm HTML hoặc Liquid không hợp lệ. Trình biên tập mã sẽ hiển thị lỗi cú pháp tiềm ẩn bằng màu đỏ. Các vấn đề phổ biến bao gồm:
   • Thừa thẻ đóng HTML, ví dụ: có thẻ đóng </div> nhưng không có thẻ mở <div>
   • Thừa thẻ HTML chưa đóng, ví dụ: có thẻ mở <div> nhưng không có thẻ đóng </div>
   • Thẻ HTML sai định dạng, ví dụ: <div class="my-class" nhưng không có dấu >
   • Mã Liquid sai định dạng
   • HTML bị hỏng trong tệp đoạn mã chủ đề được bao gồm
3. Sau khi tìm ra vấn đề, hãy sửa mã trong tệp chủ đề. Nếu bạn dùng chế độ xem Dòng thời gian của trình soạn thảo mã để chọn phiên bản trước và Khôi phục nội dung, toàn bộ nội dung tệp sẽ bị thay thế. Trước tiên, hãy sao chép nội dung tệp hiện tại vào nơi an toàn nếu bạn có thể muốn giữ lại bất kỳ thay đổi nào.
4. Nhấp vào Lưu.
5. Nhấp vào Chỉnh sửa chủ đề để quay lại trình biên tập chủ đề và xác nhận rằng thông báo lỗi đã biến mất.
6. Mở cửa hàng để xác minh nội dung hiển thị theo đúng dự kiến.

Lỗi "Exceeded maximum number of unique handles" (Đã vượt quá số tên định danh duy nhất tối đa)

Nếu bạn nhìn thấy thông báo lỗi Liquid như "Exceeded maximum number of unique handles for all_products" (Đã vượt quá số lượng tên định danh duy nhất tối đa đối với all_products) trên trang chủ, điều này thường có nghĩa là bạn đã thêm quá nhiều mục Sản phẩm nổi bật vào trang chủ (hầu hết chủ đề thường giới hạn ở 20 mục).

Cách giải quyết:

1. Trong bảng điều khiển quản trị Shopify, đi đến Cửa hàng trực tuyến > Chủ đề.
2. Tìm chủ đề hiện tại rồi nhấp vào Chỉnh sửa chủ đề.
3. Điều hướng đến trang chủ.
4. Xóa một số mục Sản phẩm nổi bật để nằm trong giới hạn của chủ đề.
5. Hãy cân nhắc sử dụng mục Bộ sưu tập nổi bật thay thế để hiển thị nhiều sản phẩm hiệu quả hơn và cải thiện hiệu suất cửa hàng.

Biểu tượng thanh toán thường được bao gồm theo mặc định ở phần chân trang trong hầu hết các chủ đề để cho khách hàng biết những phương thức thanh toán bạn chấp nhận. Nếu biểu tượng thanh toán không hiển thị ở chân trang của chủ đề, bạn có thể kiểm tra những nội dung sau:

1. Trong trình biên tập chủ đề, điều hướng đến mục Chân trang rồi xác minh cài đặt Hiển thị biểu tượng thanh toán đã được kích hoạt.
2. Trong bảng điều khiển quản trị Shopify, đi đến Cài đặt > Thanh toán rồi xác minh rằng có ít nhất một phương thức thanh toán đang hoạt động. Bạn có thể phải hoàn thành thiết lập tài khoản thì biểu tượng của một số phương thức thanh toán mới hiển thị.
3. Nếu sử dụng cổng thanh toán của bên thứ ba, biểu tượng thanh toán có thể không hiển thị do giới hạn của nền tảng.

Nếu bạn đã xác minh các cài đặt này nhưng biểu tượng thanh toán vẫn chưa hiển thị, bạn có thể cần nhận hỗ trợ về chủ đề.