Thiết Kế Trang Sản Phẩm của Bạn trong Trình Chỉnh Sửa Giao Diện (Chủ Đề OS 3.0)

Trang Sản phẩm là nơi việc duyệt sản phẩm chuyển thành mua hàng, làm cho nó trở thành một trong những điểm chạm quan trọng nhất trong hành trình khách hàng. Với Trình chỉnh sửa Chủ đề cho Chủ đề OS 3.0, bạn có thể trình bày sản phẩm với phương tiện có thể phóng to, mô tả có cấu trúc, nút mua hàng được tối giản và bố cục tùy chỉnh linh hoạt, tất cả đều không cần viết mã.

Hướng dẫn này giải thích cách truy cập trình chỉnh sửa trang Sản phẩm, cấu hình các thành phần độc quyền của nó và tùy chỉnh nội dung, kiểu dáng và bố cục của các trang sản phẩm của bạn.

Bắt đầu với Trình chỉnh sửa trang Sản phẩm

Truy cập Trình chỉnh sửa

Để truy cập Trình chỉnh sửa Chủ đề và tùy chỉnh trang Sản phẩm, hãy làm theo các bước sau:

1. Từ quản trị SHOPLINE của bạn, đi tới Cửa hàng trực tuyến > Thiết kế.
2. Tìm chủ đề hiện tại của bạn và nhấp vào nút Thiết kế.
   
3. Trong Bộ chọn trang ở trên cùng, chọn Sản phẩm > Mặc định.
   

Hiểu về các thành phần độc quyền của sản phẩm

Không giống như Trang chủ, trang Sản phẩm có các thành phần chuyên biệt tự động lấy dữ liệu động từ danh mục sản phẩm của bạn. Chúng nằm trong thanh bên thành phần bên trái:

• Thông tin sản phẩm: Hiển thị dữ liệu thiết yếu như Tiêu đề, Giá và Thông tin Thuế.
• Bộ chọn biến thể: Cần thiết để khách hàng chọn kích cỡ, màu sắc hoặc chất liệu.
• Nút mua hàng: Chứa các nút "Thêm vào giỏ" và "Mua ngay".
• Mô tả sản phẩm: Đồng bộ nội dung trực tiếp từ trường mô tả trong quản trị sản phẩm của bạn.
• Gợi ý sản phẩm: Một phần "Bạn cũng có thể thích" được hệ thống tạo ra.

Cải thiện điều hướng với Đường dẫn điều hướng

Bạn có thể thêm một khối Đường dẫn điều hướng vào trang Sản phẩm để giúp khách hàng theo dõi đường đi điều hướng của họ (ví dụ: Trang chủ / Bộ sưu tập / Sản phẩm). Tất cả các nút trong đường dẫn ngoại trừ trang hiện tại đều có thể nhấp được, cho phép khách hàng dễ dàng quay lại các trang trước, bộ sưu tập hoặc trang chủ.

Cách Thiết Lập

1. Từ trang quản trị SHOPLINE của bạn, vào Cửa hàng trực tuyến > Thiết kế. Chọn một chủ đề OS 3.0 và nhấp vào Thiết kế để vào Trình chỉnh sửa chủ đề.
2. Trong Trình chỉnh sửa chủ đề, điều hướng đến Trang sản phẩm.
3. Dưới module tương ứng, nhấp vào + Thêm thành phần, chuyển sang tab Chủ đề, và chọn khối Breadcrumbs.
   

4. Cấu hình bảng màu bạn ưa thích và chọn có bật khối Breadcrumb trên máy tính để bàn và/hoặc thiết bị di động hay không. Khi hoàn tất, nhấp Lưu để áp dụng cài đặt.
   

   Lưu ý: Đối với điều hướng tiêu chuẩn dựa trên đường dẫn, chúng tôi khuyến nghị sử dụng khối Breadcrumbs này.

Khi cấu hình breadcrumbs trên trang Sản phẩm, lưu ý các điểm sau:

• Khối Breadcrumb (Khuyến nghị): Hiển thị cấu trúc điều hướng tiêu chuẩn dựa trên đường dẫn, thường được hiển thị dưới dạng Trang chủ / {Tên bộ sưu tập} / {Tên sản phẩm}. Đây là lựa chọn được khuyến nghị cho hầu hết các nhà bán hàng.
• Breadcrumbs Danh mục đa cấp: Thành phần này chỉ có trên trang Sản phẩm và dựa vào dữ liệu phân loại đa cấp của miền sản phẩm. Nó yêu cầu nhà bán hàng được đưa vào danh sách trắng để truy cập. Để kích hoạt, vui lòng liên hệ đội ngũ hỗ trợ của chúng tôi.

Hạn chế tính năng:

• Khả năng sử dụng chủ đề: Tính năng này có trên tất cả các chủ đề OS 3.0.

Tùy chỉnh Nội dung và Kiểu dáng với CSS Tùy chỉnh

Thêm Khối qua Hover

Trong các chủ đề OS 3.0, bạn có thể chèn các phần tử chính xác vào vị trí bạn muốn trong khu vực thông tin sản phẩm.

• Mẹo Hover: Di chuyển con trỏ vào khoảng trống giữa các khối hiện có (ví dụ: giữa Giá và Mô tả). Một biểu tượng [+] sẽ xuất hiện. Nhấp vào đó để thêm một khối Nội dung tùy chỉnh.
  
   

  Lưu ý: Nếu bạn không thấy nút "+" , hãy đảm bảo con trỏ của bạn được đặt chính giữa khoảng trống dọc giữa các khối.

Sửa đổi hoặc Ẩn Văn bản Mặc định

Nếu bạn muốn tùy chỉnh hoặc ẩn các cụm từ hệ thống mặc định dưới giá sản phẩm, chẳng hạn như "Đã bao gồm thuế" hoặc "Phí vận chuyển sẽ được tính khi thanh toán", SHOPLINE cung cấp hai phương pháp hiệu quả. Bạn có thể chỉnh sửa trực tiếp văn bản trong cài đặt nội dung chủ đề hoặc sử dụng Trợ lý Mã AI hội thoại để tạo CSS Tùy chỉnh.

Phương pháp 1: Ẩn văn bản qua "Chỉnh sửa nội dung chủ đề mặc định"

Phương pháp này cho phép bạn tra cứu nhãn hệ thống và ẩn chúng bằng cách thay thế văn bản bằng một ký tự khoảng trắng.

1. Từ bảng quản trị SHOPLINE của bạn, vào Cửa hàng trực tuyến. Tìm chủ đề hiện tại của bạn, nhấp vào biểu tượng ba chấm [...] (thêm hành động), và chọn Chỉnh sửa văn bản mặc định.
   
2. Ở thanh tìm kiếm trên cùng, nhập "shipping" hoặc "tax", sau đó tìm các trường văn bản mục tiêu trong phần Sản phẩm > Chi tiết sản phẩm từ kết quả lọc.
   
3. Xóa văn bản hiện có trong trường, sau đó nhập một khoảng trắng duy nhất. Khoảng trắng này sẽ hướng dẫn cửa hàng hiển thị nhãn như thể nó đã bị ẩn hoàn toàn.
   
4. Nhấp Cập nhật để lưu thay đổi.

Phương pháp 2: Ẩn văn bản qua Trợ lý Mã AI (CSS Tùy chỉnh)

Nếu bạn muốn một phương án nhanh hơn hoặc muốn thực hiện các chỉnh sửa hình ảnh chính xác mà không thay đổi vĩnh viễn nội dung chủ đề, bạn có thể sử dụng Trợ lý Mã AI tích hợp để tự động tạo và áp dụng CSS Tùy chỉnh.

1. Trong trình chỉnh sửa chủ đề, điều hướng đến Trang sản phẩm.
2. Mở trợ lý bằng cách nhấp vào biểu tượng Trợ lý mã AI nằm bên cạnh tiêu đề thành phần (hoặc bên cạnh tiêu đề CSS tùy chỉnh trong bảng cài đặt).
   
3. Mô tả thay đổi phong cách cửa hàng mà bạn muốn thực hiện một cách hội thoại trong trường chat.
4. Trợ lý sẽ xử lý yêu cầu của bạn và tự động xuất ra khối mã CSS tương ứng.
5. Nhấp vào Áp dụng. Mã được tạo sẽ tự động điền vào trường CSS tùy chỉnh ngay lập tức, và bạn sẽ thấy bản xem trước trực quan ngay bên phải màn hình.
   
6. Nhấp vào Lưu ở góc trên bên phải của trình chỉnh sửa chủ đề để xuất bản các thay đổi lên cửa hàng trực tiếp của bạn.

Khi tinh chỉnh phong cách trực quan của Trang sản phẩm, hãy ghi nhớ các nguyên tắc tạo kiểu và mẹo khắc phục sự cố sau để duy trì thiết kế cửa hàng nhất quán.

Sự khác biệt về phong cách với các thành phần do ứng dụng hỗ trợ

Các tính năng như phần Sản phẩm được đề xuất thường được điều khiển bởi các ứng dụng phía sau và hiển thị độc lập với bố cục cốt lõi của chủ đề của bạn.

Nếu bạn đã cấu hình các kiểu thiết kế toàn cục (chẳng hạn như các góc bo tròn hoặc bóng đổ cụ thể) trong Cài đặt toàn cục, các kiểu này có thể không tự động áp dụng cho các thẻ do ứng dụng hỗ trợ này. Để khắc phục điều này và đảm bảo sự nhất quán về mặt hình ảnh trên tất cả các phần, bạn có thể áp dụng CSS tùy chỉnh theo phạm vi trang để căn chỉnh thủ công các kiểu thẻ.

Lựa Chọn Giữa CSS Toàn Cục và CSS Giới Hạn Theo Trang

Khi áp dụng CSS Tùy Chỉnh để điều chỉnh giao diện cửa hàng của bạn, điều quan trọng là chọn phạm vi đúng để tránh làm hỏng bố cục trang web của bạn:

• CSS Giới Hạn Theo Trang (Khuyến nghị cho trang Sản phẩm): Đối với các chỉnh sửa riêng biệt trên trang Sản phẩm (chẳng hạn như ẩn một khối mô tả cụ thể hoặc điều chỉnh kiểu dáng), luôn áp dụng mã trong thanh cài đặt của trang Sản phẩm. Điều này giới hạn các thay đổi chỉ trên trang Sản phẩm và ngăn ngừa việc làm gián đoạn bố cục không mong muốn trên Trang chủ hoặc các trang Bộ sưu tập của bạn.
• CSS Toàn Cục: Chỉ áp dụng mã vào cài đặt Toàn Cục nếu bạn muốn thay đổi giao diện có hiệu lực trên tất cả các trang của cửa hàng trực tuyến của bạn.

Tạo Bố Cục Độc Đáo với Mẫu Giao Diện

Vấn đề phổ biến: "Tôi chỉnh sửa một trang Sản phẩm, và nó thay đổi tất cả sản phẩm của tôi!" Điều này xảy ra vì bạn đang chỉnh sửa Mẫu Sản phẩm Mặc định. Để tạo giao diện độc đáo cho một dòng sản phẩm cụ thể:

1. Trong Bộ chọn trang, nhấp vào trang Sản phẩm > + Tạo mẫu.
   
2. Thiết kế bố cục độc đáo của bạn (ví dụ, thêm hình ảnh "Hướng dẫn kích cỡ" dành riêng cho trang phục).
   
3. Đi tới Sản phẩm > Chỉnh sửa Sản phẩm. Trong danh sách thả xuống Mẫu giao diện, gán mẫu mới của bạn cho sản phẩm cụ thể đó.
   

Khắc Phục Sự Cố: Vấn Đề Hiển Thị Mẫu Màu

Nếu bạn nhận thấy hai hàng mẫu màu xuất hiện trên trang Sản phẩm của bạn, hoặc các mẫu màu bị thiếu trong phần Bạn cũng có thể thích, rất có thể do xung đột giữa hai nguồn màu đang hoạt động.

Tại Sao Điều Này Xảy Ra

SHOPLINE hỗ trợ hai cách để hiển thị mẫu màu trên trang Sản phẩm của bạn: bảng màu tích hợp sẵn của giao diện, và ứng dụng Bộ Lọc Sản Phẩm & Mẫu Màu. Khi cả hai được bật cùng lúc, chúng sẽ hiển thị độc lập và tạo ra các mẫu màu trùng lặp trên trang Sản phẩm.

Quy tắc Nguồn Đơn

Để tránh xung đột, chỉ nên kích hoạt một nguồn màu tại một thời điểm. Trước khi quyết định sử dụng nguồn nào, hãy lưu ý sự khác biệt chính giữa hai nguồn:

Cách Tắt Bảng Màu Tích Hợp Sẵn của Chủ đề

Nếu bạn chọn sử dụng ứng dụng Mẫu màu làm nguồn duy nhất, hãy tắt bảng màu tích hợp sẵn của chủ đề để tránh xung đột:

1. Từ trang quản trị SHOPLINE của bạn, vào Cửa hàng trực tuyến > Thiết kế.
2. Tìm chủ đề hiện tại của bạn và nhấp vào Thiết kế để mở trình chỉnh sửa chủ đề.
3. Trong Trình chỉnh sửa Chủ đề, nhấp vào Cài đặt toàn cục ở thanh bên trái.
4. Chọn Sản phẩm, sau đó tắt Thêm nhanh bảng màu vào giỏ hàng.
5. Nhấp vào Lưu để áp dụng thay đổi.

Nếu Bạn Cần Mẫu Màu trong Mục "Bạn cũng có thể thích"

Ứng dụng Bộ lọc Sản phẩm & Mẫu màu không hỗ trợ hiển thị mẫu màu trong mục Bạn cũng có thể thích. Nếu việc hiển thị này quan trọng đối với cửa hàng của bạn, hãy chuyển sang sử dụng bảng màu tích hợp sẵn của chủ đề. Để biết hướng dẫn thiết lập, tham khảo "Cấu hình Mẫu màu Sử dụng Màu Đặt tên (Chủ đề OS 3.0)."

Trưng bày Sản phẩm của Bạn

Sử dụng Tùy chỉnh Kính lúp Nâng cao cho Phương tiện Sản phẩm

Kính lúp nâng cao cho phép bạn tùy chỉnh tương tác phóng to hình ảnh trên trang Sản phẩm để phù hợp với danh mục sản phẩm của bạn. Bằng cách chọn chế độ phóng to phù hợp, bạn có thể giúp khách hàng xem kỹ kết cấu và thông số sản phẩm trước khi mua, tạo sự tin tưởng khi mua hàng và giảm tỷ lệ trả hàng.

Thực hành tốt nhất: Chọn kiểu phóng to phù hợp với ngành hàng của bạn

Việc chọn kiểu phóng to phù hợp với đặc tính sản phẩm có thể ảnh hưởng đáng kể đến tỷ lệ chuyển đổi:

• Điện tử 3C (ví dụ: Bàn phím, Máy ảnh): Chúng tôi khuyên dùng Di chuột để phóng to. Khách hàng thường cần nhanh chóng kiểm tra "loại giao diện" hoặc "bố cục nút bấm," và phóng to khi di chuột cung cấp cách hiệu quả nhất để xem các chi tiết kỹ thuật này.
• Đồ gia dụng & Trang trí: Chúng tôi khuyên dùng Chuyển đổi mũi tên toàn màn hình. Những sản phẩm này dựa vào bố cục và không khí. Cho phép người dùng chuyển đổi qua các cảnh bằng mũi tên giúp cải thiện cảm nhận nhập vai của họ về sản phẩm.
• Thời trang cao cấp & Phụ kiện: Chúng tôi khuyên dùng Nhấp để xem chi tiết hình ảnh đầy đủ hoặc Cuộn hình ảnh dài toàn màn hình. Khách hàng trong phân khúc này cần xem cận cảnh cực kỳ chi tiết về kết cấu vải và tay nghề thủ công.

Cách Thiết Lập

1. Từ trang quản trị SHOPLINE của bạn, đi tới Cửa hàng trực tuyến > Thiết kế. Chọn một chủ đề OS 3.0 tương thích (ví dụ: Thời trang) và nhấp vào Thiết kế để vào trình chỉnh sửa chủ đề.
2. Trong trình chỉnh sửa chủ đề, điều hướng đến Trang sản phẩm và chọn một sản phẩm để xem trước các thay đổi của bạn.
   
3. Dưới Module sản phẩm, mở rộng phần Sản phẩm và nhấp vào thành phần Phương tiện sản phẩm.
4. Nhấp vào khối phụ Tệp phương tiện sản phẩm để truy cập cấu hình kính lúp.
   

5. Dưới cài đặt Kính lúp, bật Bật kính lúp.

   Lưu ý: Cài đặt Kính lúp chỉ phóng to hình ảnh phương tiện; các lớp phủ sẽ không được phóng to.

6. Trong phần Cài đặt Kính lúp, cấu hình kiểu phóng to riêng biệt cho từng loại thiết bị:
   • Kiểu phóng to trên máy tính để bàn:
     
     • Cuộn ảnh dài toàn màn hình (Mặc định): Tốt nhất để duyệt các hình ảnh dài, chi tiết.
       
     • Chuyển đổi mũi tên toàn màn hình: Tốt nhất cho các bức ảnh phong cách sống có không khí nặng.
       
     • Di chuột: Tốt nhất để kiểm tra kỹ thuật các bộ phận cụ thể của sản phẩm.
       
   • Kiểu phóng to trên thiết bị di động:
     • Chuyển đổi mũi tên toàn màn hình (Mặc định): Trải nghiệm duyệt trên di động tiêu chuẩn.
       
     • Cuộn ảnh dài toàn màn hình: Cho phép cuộn dọc trong chế độ toàn màn hình.
       
     • Nhấn để xem chi tiết ảnh đầy đủ: Mở một lớp mới hiển thị ảnh ở tỷ lệ tối đa; khách hàng có thể kéo để xem chi tiết và nhấn lại để trở về.
       
7. Nếu muốn, bật Hiển thị kính lúp để hiển thị biểu tượng kính lúp trên phương tiện như một dấu hiệu trực quan cho việc phóng to.
   
8. Nhấn Lưu để áp dụng các thay đổi của bạn.

Giới Hạn Tính Năng

• Khả Dụng Chủ Đề: Tính năng này có sẵn trên tất cả các chủ đề OS 3.0 ngoại trừ chủ đề Bottle.
• Hạn Chế Video: Nếu giao diện người dùng cho một module video bị ẩn, kính lúp sẽ không hoạt động cho phần tử video cụ thể đó.
• Phạm Vi Ảnh Hưởng: Hiệu ứng kính lúp chỉ áp dụng cho hình ảnh media gốc; bất kỳ lớp phủ văn bản hoặc phần tử giao diện người dùng nào sẽ giữ nguyên tỷ lệ ban đầu.

Nổi Bật Thuộc Tính Chính với Nhãn Tiếp Thị Động

Nhãn Tiếp Thị Động cho phép bạn hiển thị các nhãn văn bản linh hoạt, bắt mắt (ví dụ: "Phiên bản giới hạn" hoặc "Chất liệu hữu cơ") trực tiếp trên trang Sản phẩm của bạn để làm nổi bật các thuộc tính chính của sản phẩm. Bạn cũng có thể kết nối nhãn với metafield biến thể sản phẩm để văn bản tự động cập nhật khi khách hàng chọn một biến thể khác — ví dụ, hiển thị "Có thể giặt máy" cho tùy chọn màu cotton và "Chỉ giặt tay" cho tùy chọn lụa của cùng một sản phẩm.

Cách Thiết Lập

1. Trong Trình chỉnh sửa Chủ đề, điều hướng đến Trang sản phẩm và chọn một sản phẩm để xem trước các thay đổi của bạn.
   

2. Ở thanh bên trái, nhấp vào + Thêm thành phần để thêm một Phần tùy chỉnh. Trong phần đó, thêm một Khung chứa nội dung, sau đó thêm một khối Văn bản phong phú.
   

   Mẹo: Để có sự linh hoạt hơn trong bố cục, bạn có thể thêm trước một Khung chứa nội dung, sau đó thêm khối Văn bản phong phú bên trong khung đó. Để căn chỉnh hoặc di chuyển khung chứa, hãy chọn khối cha của nó để áp dụng các cài đặt căn chỉnh, vì căn chỉnh trực tiếp khung chứa có thể không thay đổi vị trí của nó.

3. Nhấp vào khối Văn bản phong phú. Trong bảng cài đặt bên phải, tùy chỉnh Màu nền, Bán kính góc và Độ trong suốt để phù hợp với phong cách thương hiệu của bạn.
   

   Mẹo:  Sử dụng biểu tượng Thêm nguồn động trong trình chỉnh sửa Văn bản phong phú để kết nối nhãn với các metafield sản phẩm cụ thể nhằm cập nhật nội dung động. Bạn cũng có thể kết nối nó với một Metafield biến thể sản phẩm. Để nhãn tự động cập nhật khi người mua chuyển đổi biến thể, hãy đảm bảo một thành phần Bộ chọn biến thể được thêm vào trang.

4. Nhấp Lưu để áp dụng các thay đổi của bạn.

   Lưu ý: Để biết chi tiết cấu hình đầy đủ về cách hiển thị metafield biến thể, bao gồm các loại dữ liệu được hỗ trợ và hướng dẫn nguồn động, xem "Cấu hình Nguồn động (Metafields) trong Trình chỉnh sửa Chủ đề OS 3.0."

Hạn chế tính năng

• Khả năng sử dụng chủ đề: Tính năng này có sẵn trên tất cả các chủ đề OS 3.0 ngoại trừ chủ đề Bottle.

Cấu trúc Thông tin Sản phẩm

Sử dụng các khối mô tả đa cấp cho bố cục sản phẩm nâng cao

Khối Mô tả đa cấp cho phép bạn xây dựng các bố cục trực quan phức tạp theo kiểu thẻ ngay trong khu vực thông tin sản phẩm, mà không cần viết một dòng mã nào. Sử dụng nó để hiển thị thông tin có cấu trúc như thẻ khuyến mãi, chứng nhận sản phẩm hoặc các điểm nổi bật liên quan đến sản phẩm theo một hệ thống phân cấp trực quan chuyên nghiệp.

Thực hành tốt nhất: Cải thiện chuyển đổi với các bố cục có cấu trúc

Để tối đa hóa lợi ích của tính năng này, hãy sử dụng khối Mô tả đa cấp để tổ chức các chi tiết phức tạp thành các phần dễ quét. Đối với các mặt hàng giá cao, chúng tôi khuyên bạn nên lồng các khối Tiêu đề, Văn bản phong phú và Logo trong khối chứa này để tạo thành một "Thẻ Tin cậy" (ví dụ: hiển thị logo thương hiệu cùng với bảo hành). Cách tiếp cận này tăng mật độ thông tin trong màn hình hiển thị ban đầu, tạo ra một hệ thống phân cấp hình ảnh chuyên nghiệp giúp nâng cao tính cạnh tranh của sản phẩm và giảm tỷ lệ thoát.

Cách Thiết Lập

1. Từ trang quản trị SHOPLINE của bạn, đi tới Cửa hàng trực tuyến > Thiết kế. Chọn một chủ đề OS 3.0 và nhấp vào Thiết kế để vào Trình chỉnh sửa Chủ đề.
2. Trong Trình chỉnh sửa Chủ đề, điều hướng đến Trang sản phẩm và chọn một sản phẩm để xem trước các thay đổi của bạn.
   
3. Di chuột qua phần Thông tin sản phẩm, nhấp vào + Thêm nội dung, và chọn khối Mô tả đa cấp.
   

4. Nhấp vào khối Mô tả đa cấp để truy cập cài đặt của nó. Thêm các khối chung, như Tiêu đề, Văn bản phong phú, và Logo, bên trong khối này để xây dựng bố cục bạn mong muốn.
   

   Lưu ý: Khi bạn cập nhật Tiêu đề trong bảng cài đặt bên phải, tên trong menu thanh bên trái sẽ tự động đồng bộ, giúp bạn dễ dàng nhận diện và quản lý nhiều khối.

5. Bạn cũng có thể bật tùy chọn Hiển thị gập để xác định xem mô tả có nên được thu gọn mặc định hay hiển thị đầy đủ.
   
6. Sắp xếp các khối lồng nhau để đạt được bố cục bạn mong muốn, chẳng hạn như "căn chỉnh hình ảnh-văn bản theo dòng" hoặc hiệu ứng hình ảnh "dạng thẻ".
   
7. Nhấp vào Lưu để áp dụng các thay đổi của bạn.

Hạn Chế Tính Năng

• Khả năng hỗ trợ chủ đề: Tính năng này được hỗ trợ bởi tất cả các chủ đề OS 3.0 ngoại trừ chủ đề Bottle.
• Phạm vi bố cục: Khối này được thiết kế cho bố cục cấu trúc trong phần Thông tin sản phẩm và không hỗ trợ tải lên tệp bên ngoài hoặc tích hợp API.
• Quy mô nội dung: Để duy trì hiệu suất trên thiết bị di động, hãy giới hạn số lượng khối lồng nhau trong một khối Mô tả đa cấp để giữ bố cục sạch sẽ và dễ đọc trên màn hình nhỏ hơn.

Sử dụng Nhãn văn bản và Tooltip để Nâng cao Thông tin Sản phẩm

Khối Nhãn văn bản và khối con tương tác Chú giải công cụ cho phép bạn cung cấp các giải thích chuyên nghiệp một cách không gây phiền nhiễu trên trang Sản phẩm của bạn. Nhãn văn bản đóng vai trò như một điểm neo trực quan — chẳng hạn như "Tìm hiểu thêm" hoặc "Thông tin vận chuyển" — trong khi Chú giải công cụ hiển thị các chi tiết bổ sung trong một bong bóng kích hoạt khi di chuột, giữ cho đường dẫn chuyển đổi chính tập trung và không bị rối mắt.

Thực hành tốt nhất: Nâng cao thứ bậc hình ảnh chuyên nghiệp

Đối với các sản phẩm chuyên biệt như chăm sóc da hoặc các mặt hàng y tế, chúng tôi khuyên bạn nên cấu hình giải thích thành phần và chi tiết hiệu quả trong các khối Nhãn văn bản. Bằng cách sử dụng các gợi ý bong bóng tức thì của khối con Chú giải công cụ, bạn có thể trình bày các chi tiết kỹ thuật một cách chuyên nghiệp và có tầng lớp hơn, giúp khách hàng nhanh chóng hiểu giá trị sản phẩm và rút ngắn con đường ra quyết định.

Cách thiết lập

1. Từ trang quản trị SHOPLINE của bạn, đi tới Cửa hàng trực tuyến > Thiết kế. Chọn một chủ đề OS 3.0 và nhấp vào Thiết kế để vào Trình chỉnh sửa Chủ đề.
2. Trong Trình chỉnh sửa Chủ đề, điều hướng đến trang Sản phẩm và chọn một sản phẩm để xem trước các thay đổi của bạn.
   

3. Di chuột qua phần Thông tin sản phẩm, nhấp vào + Thêm nội dung, và chọn Nhãn văn bản.
   

   Mẹo: Để có sự linh hoạt bố cục hơn, bạn có thể thêm trước một Khung chứa nội dung dưới phần Thông tin sản phẩm, sau đó thêm khối Nhãn văn bản vào trong khung chứa đó. Để căn chỉnh hoặc di chuyển khung chứa, hãy chọn khối cha của nó để áp dụng các thiết lập căn chỉnh, vì căn chỉnh trực tiếp khung chứa có thể không thay đổi vị trí của nó.

4. Nhấp vào khối Nhãn văn bản để nhập văn bản bạn muốn (ví dụ: "Tìm hiểu thêm") và điều chỉnh màu nền để phù hợp với phong cách thương hiệu của bạn.
   
5. Trong khối Nhãn văn bản ở thanh bên, di chuột qua khối con Chú giải công cụ, nhấp vào + Thêm nội dung, và chọn Văn bản phong phú. Sử dụng trình soạn thảo để soạn nội dung cho bong bóng giải thích của bạn.
   

6. Nhấp Lưu để áp dụng các thay đổi của bạn.

   Lưu ý: Trên cửa hàng trực tiếp, Nhãn văn bản xuất hiện bên dưới thông tin sản phẩm. Khi khách hàng di chuột qua nhãn trên máy tính để bàn hoặc chạm vào trên thiết bị di động, một bong bóng bật lên sẽ hiển thị nội dung Chú giải công cụ.

Hạn chế tính năng

• Tính khả dụng của Chủ đề: Tính năng này được hỗ trợ bởi tất cả các chủ đề OS 3.0 ngoại trừ chủ đề Bottle.
• Thực hành tốt nhất về Nội dung: Mặc dù khối phụ Tooltip hỗ trợ văn bản phong phú và liên kết, nó phù hợp nhất cho các giải thích ngắn gọn, có tác động để duy trì trải nghiệm người dùng mượt mà.
• API & Tải lên: Tính năng này được quản lý trực tiếp trong Trình chỉnh sửa Chủ đề và không hỗ trợ tích hợp API bên ngoài hoặc tải lên tệp.

Thúc đẩy Hành động Mua hàng

Tối ưu hóa Trang Sản phẩm với Nhóm Nút Mua hàng

Khối Nhóm nút Mua hàng tập trung tất cả các yếu tố liên quan đến mua hàng thành một đơn vị thống nhất, tạo ra trải nghiệm mua sắm tập trung hơn giúp cải thiện tỷ lệ chuyển đổi. Trước đây, các yếu tố mua hàng được quản lý dưới dạng các khối riêng lẻ, điều này có thể dẫn đến bố cục không đồng nhất hoặc vô tình xóa bỏ trong quá trình tùy chỉnh. Với khối Nhóm nút Mua hàng, bạn có thể kéo toàn bộ nhóm như một đơn vị duy nhất trong trình chỉnh sửa và cấu hình bố cục hàng đơn chuyên nghiệp đặt Bộ chọn số lượng và Nút Thêm vào giỏ hàng cạnh nhau, một thiết kế có tỷ lệ chuyển đổi cao thường được các thương hiệu thương mại điện tử hàng đầu toàn cầu sử dụng.

Cách Thiết lập

1. Từ quản trị SHOPLINE của bạn, đi tới Cửa hàng trực tuyến > Thiết kế. Chọn một chủ đề OS 3.0 và nhấp vào Thiết kế để vào Trình chỉnh sửa Chủ đề.
2. Trong Trình chỉnh sửa Chủ đề, điều hướng đến Trang Sản phẩm.
3. Ở thanh bên trái, mở rộng phần Sản phẩm > Thông tin sản phẩm để tìm thành phần Nhóm nút Mua hàng tích hợp sẵn.
   
4. Dưới Bố trí, chọn hướng bố trí cho Bộ chọn số lượng và Nút Mua hàng:
   
   • Ngang: Đặt chúng cạnh nhau trong cùng một hàng (được khuyến nghị cho giao diện gọn gàng, có tỷ lệ chuyển đổi cao).
   • Dọc: Xếp chồng chúng lên nhau.
5. Nhấp vào thành phần Nhóm nút Mua hàng để cấu hình cài đặt cho toàn bộ nhóm nút.
   
6. Kéo toàn bộ nhóm đến vị trí bạn muốn trong phần Thông tin sản phẩm.
7. Nhấp Lưu để áp dụng các thay đổi của bạn.

Hạn chế của Tính năng

• Giá theo cấp bậc: Thành phần này hiện không hỗ trợ hiển thị giá theo cấp bậc.
• Hạn chế vị trí đặt: Thành phần này chỉ hỗ trợ cố định ở dưới cùng trên trang Sản phẩm. Nó không hỗ trợ cố định ở dưới cùng trên các trang khác như cửa sổ bật lên hoặc trang bộ sưu tập, và sẽ không tự động bao gồm các nút mua hàng khi được thêm vào các trang đó.

Quản lý vị trí đặt nút Mua hàng trên thiết bị di động

Trên thiết bị di động, Nhóm nút Mua hàng được cố định ở dưới cùng màn hình theo mặc định để khách hàng có thể hoàn tất việc mua hàng mà không cần cuộn trang. Nếu cửa hàng của bạn cũng sử dụng ứng dụng Upsell & Add-ons sản phẩm để hiển thị các gói hoặc combo trên trang Sản phẩm, các nút mua hàng cố định có thể chồng lên nội dung của ứng dụng đó khi khách hàng cuộn trang.

Nếu bạn nhận thấy sự chồng lấn này, hãy chuyển vị trí nút trên di động từ cố định dưới cùng sang đặt nội tuyến:

1. Trong Trình chỉnh sửa Chủ đề, điều hướng đến trang Sản phẩm và chọn thành phần Nút Mua hàng.
2. Tìm Vị trí nút mua trên di động và thay đổi từ Chân trang nổi cố định sang Nhúng trong trang.
   
3. Nhấn Lưu để áp dụng thay đổi.

Tùy chỉnh bố cục trang

Kích hoạt bố cục ngang linh hoạt trong trang Sản phẩm

Khung nội dung giới thiệu một lớp cấu trúc mới trong trang Sản phẩm, cho phép bạn sắp xếp các khối thông tin sản phẩm theo chiều ngang thay vì bị giới hạn trong một cột dọc duy nhất. Điều này cho phép thiết kế bố cục hiện đại như đặt Bộ chọn số lượng bên cạnh Nút Mua hàng, hoặc đặt nút Danh sách yêu thích cạnh tiêu đề sản phẩm, mà không cần phát triển tùy chỉnh.

Cách thiết lập

1. Từ quản trị SHOPLINE của bạn, vào Cửa hàng trực tuyến > Thiết kế. Chọn một chủ đề OS 3.0 và nhấn Thiết kế để vào Trình chỉnh sửa Chủ đề.
2. Trong Trình chỉnh sửa Chủ đề, điều hướng đến trang Sản phẩm.
3. Dưới Sản phẩm > Thông tin sản phẩm, di chuột qua Thông tin sản phẩm, nhấn + Thêm nội dung, và chọn Khung nội dung trong phần Chủ đề. Khung này hoạt động như một lớp bố cục trung gian.
4. Di chuột qua khung, nhấn + Thêm nội dung, và thêm các khối thông tin sản phẩm bạn muốn sắp xếp theo chiều ngang, như Tiêu đề, Giá, hoặc Bộ chọn số lượng. Kéo thả các khối để điều chỉnh thứ tự.
5. Nhấn vào Khung nội dung để cấu hình bố cục, bao gồm sắp xếp khối, lề và kích thước. Sử dụng các điều khiển bố cục để đặt nhiều thành phần cạnh nhau.
6. Nhấn Lưu để áp dụng thay đổi.

Giới hạn tính năng

• Khả năng sử dụng chủ đề: Tính năng này được hỗ trợ bởi tất cả các chủ đề OS 3.0 ngoại trừ chủ đề Bottle.
• Hạn chế vị trí đặt: Điều khiển bố cục ngang chỉ có sẵn trong phần Container Nội dung dưới phần Thông tin sản phẩm. Nó không ghi đè bố cục dọc của mẫu Trang sản phẩm nói chung.