Các Tính Năng Mới trong Chủ Đề OS 3.0

Giao diện OS 3.0 của SHOPLINE liên tục được phát triển với các tính năng mới mang lại sự linh hoạt và cá nhân hóa cao hơn trong thiết kế cửa hàng.

Hướng dẫn này sẽ giới thiệu các chức năng mới nhất chỉ có trên các giao diện OS 3.0.

Cho phép khách hàng chọn số sản phẩm trên mỗi hàng trên thiết bị di động

Hãy để khách hàng của bạn kiểm soát nhiều hơn trải nghiệm duyệt sản phẩm bằng cách cho phép họ điều chỉnh cách hiển thị sản phẩm trên thiết bị di động.

Với tính năng Tùy chỉnh bố cục hiển thị sản phẩm, khách hàng có thể chuyển đổi giữa việc hiển thị một hoặc hai sản phẩm trên mỗi hàng — dù họ thích ô lớn để xem chi tiết hay ô nhỏ để xem nhanh hơn.

Cách thiết lập

1. Từ bảng quản trị SHOPLINE của bạn, vào Cửa hàng trực tuyến > Thiết kế > Giao diện của tôi. Chọn một giao diện OS 3.0 (ví dụ, Fashion) và nhấn Thiết kế để vào trình chỉnh sửa giao diện.
   
2. Trong trình chỉnh sửa giao diện, chuyển sang chế độ xem trên thiết bị di động, sau đó vào trang Bộ sưu tập để tùy chỉnh bố cục danh sách sản phẩm.
   
3. Chọn một bộ sưu tập từ danh sách thả xuống. Trong phần Danh sách sản phẩm, bật Công tắc đa cột để kích hoạt tính năng chuyển đổi hiển thị trên di động.
   
4. Chọn số cột mặc định và số cột thay thế, sau đó nhấn Lưu để áp dụng thay đổi.
   

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

• Tính khả dụng: Hỗ trợ trên tất cả các chủ đề OS 3.0 ngoại trừ Bottle.
• Hỗ trợ thiết bị: Hiện chỉ có sẵn cho thiết bị di động.
• Tương thích: Vui lòng kiểm tra với bất kỳ plugin đang hoạt động nào để đảm bảo hiển thị đúng. Một số plugin tùy chỉnh có thể ảnh hưởng đến cách lưới trang danh sách sản phẩm hiển thị.
• Tích hợp: Không liên quan đến API hoặc chức năng tải tệp lên.

Cải thiện Điều hướng với Đường dẫn Breadcrumb Có thể Cấu hình

Hãy cung cấp cho khách hàng của bạn một cách tiêu chuẩn, rõ ràng để điều hướng cửa hàng bằng cách triển khai breadcrumb theo đường dẫn truyền thống. Những cải tiến này cung cấp điều hướng có thể sử dụng chung, hiển thị thứ bậc trang mà khách hàng đã theo dõi (ví dụ: Trang chủ / Danh mục / Sản phẩm).

Hệ thống breadcrumb mới cung cấp điều hướng rõ ràng theo đường dẫn để cải thiện trải nghiệm khách hàng và khả năng sử dụng cửa hàng. 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, danh mục hoặc trang chủ.

Hiểu về Ba Loại Phần tử Breadcrumb

Để đảm bảo rõ ràng về các tính năng, có ba phần tử breadcrumb riêng biệt trong các chủ đề OS 3.0, mỗi phần tử có vị trí và logic khác nhau:

• Khối Breadcrumb Toàn cầu Mới (Tiêu chuẩn Đề xuất):
  • Logic: Sử dụng thứ bậc đường dẫn trang truyền thống (ví dụ: Trang chủ / Danh mục / Sản phẩm).
  • Vị trí: Có thể thêm vào tất cả các trang thông qua một phần chuyên dụng mới trong trình chỉnh sửa chủ đề.
  • Ví dụ về Đường dẫn: 
    1. Trang Chi tiết Sản phẩm: Thường hiển thị dưới dạng Trang chủ / {Tiêu đề Bộ sưu tập} / {Tiêu đề Sản phẩm} hoặc Trang chủ / {Tiêu đề Sản phẩm}.
    2. Trang Bài viết Blog: Hiển thị dưới dạng Trang chủ / {Tiêu đề Bộ sưu tập Blog} / {Tiêu đề Bài viết Blog}.
  • Cách sử dụng: Đây là khối được đề xuất cho điều hướng chung.
• Breadcrumb Danh mục Đa cấp Di sản (Chỉ Trang Chi tiết Sản phẩm)
  • Logic: Dựa vào dữ liệu phân loại đa cấp của miền sản phẩm.
  • Vị trí: Chỉ xuất hiện dưới dạng một khối trong Trang Chi tiết Sản phẩm.

• Node "Trang chủ" trên Trang Bộ sưu tập Cũ (Có thể sửa):
  • Logic: Một node "Trang chủ" được mã hóa cứng chồng lên hình ảnh danh mục.
  • Vị trí: Chỉ xuất hiện trên các Trang Danh sách Bộ sưu tập.
  • Cách sử dụng: Trước đây không thể cấu hình và được coi là lỗi, nhưng một cài đặt cấu hình mới hiện cho phép người bán ẩn nó sau khi cập nhật.

Cách Thiết Lập

Thực hiện theo các bước sau để kích hoạt hệ thống breadcrumb mới được khuyến nghị và giải quyết các vấn đề hiển thị cũ.

Từ bảng quản trị SHOPLINE của bạn, đi tới Cửa hàng trực tuyến > Thiết kế > Giao diện của tôi. Chọn một giao diện OS 3.0 và nhấp vào Thiết kế để vào trình chỉnh sửa giao diện.

Tình huống 1. Kích hoạt Khối Breadcrumb Toàn diện:

Để kích hoạt Khối Breadcrumb mới được khuyến nghị, hãy làm theo các bước sau:

1. Đi tới trang bạn muốn (ví dụ: trang chủ, trang chi tiết sản phẩm) trong trình chỉnh sửa giao diện.
2. Dưới module tương ứng, nhấp vào Thêm thành phần, chuyển sang tab Giao diện, sau đó tìm và chọn Breadcrumbs.
   
3. Sau khi thêm khối Breadcrumb, thiết lập bảng màu ưa thích, chọn bật trên máy tính để bàn và/hoặc thiết bị di động, và cấu hình bố cục theo nhu cầu. Khi hoàn tất, nhấp Lưu để áp dụng cài đặt.
   

Tình huống 2. Ẩn Node Trang Bộ sưu tập Cũ:

Nếu bạn muốn ẩn node trang Bộ sưu tập không thể cấu hình, hãy làm theo các bước sau:

1. Trong trình chỉnh sửa giao diện, điều hướng đến trang Bộ sưu tập.
2. Trong module Tiêu đề Bộ sưu tập, nhấp vào Hình ảnh Bộ sưu tập. Trong bảng cài đặt, tìm và bật Ẩn breadcrumb.
3. Nhấp Lưu để áp dụng thay đổi.

Hạn Chế Tính Năng

• Truy cập Breadcrumbs Cũ: Phần tử breadcrumb cũ (nay được đổi tên thành Breadcrumbs Danh mục đa cấp) vẫn yêu cầu sử dụng dữ liệu phân loại đa cấp của miền sản phẩm và yêu cầu người bán được đưa vào danh sách trắng để truy cập.
• Loại bỏ phần tử cũ: Phần tử "Trang chủ" được mã hóa cứng trên trang Bộ sưu tập không thể bị loại bỏ hoàn toàn, nhưng tính năng mới cho phép ẩn nó.

Kích hoạt Bố cục Ngang Linh hoạt trong Trang Chi tiết Sản phẩm

Cải tiến này giải quyết một hạn chế chính trong các bố cục chủ đề trước đây bằng cách cho phép người bán và các ứng dụng bên thứ ba triển khai các sắp xếp phức tạp, không theo chiều dọc trong phần thông tin của trang chi tiết sản phẩm. Trước đây, các khối thông tin sản phẩm bị giới hạn trong một cột dọc duy nhất, điều này ngăn cản các nhu cầu thiết kế 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.

Bằng cách giới thiệu một phần tử cấu trúc mới, bạn có thể kiểm soát chính xác việc sắp xếp các thành phần sản phẩm cụ thể trên trang chi tiết sản phẩm, phù hợp với triết lý thiết kế linh hoạt tổng thể của các chủ đề OS 3.0.

Cách Thiết lập

Để áp dụng bố cục ngang cho các phần tử trong khu vực thông tin sản phẩm của bạn, bạn sẽ sử dụng một bộ chứa nội dung mới:

1. Từ bảng quản trị SHOPLINE của bạn, đi tới Cửa hàng trực tuyến > Thiết kế > Chủ đề của tôi. Chọn một chủ đề OS 3.0 (ví dụ, Fashion) 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 mô-đun Sản phẩm, tìm Phần sản phẩm > Thông tin sản phẩm. Di chuột qua Thông tin sản phẩm, nhấp vào biểu tượng +, và chọn Bộ chứa nội dung dưới Chủ đề. Bộ chứa này hoạt động như một lớp bố cục trung gian.
4. Sau khi thêm bộ chứa, di chuột qua nó để thêm các khối thông tin như Tiêu đề, Giá và bộ chọn Số lượng. Bạn có thể kéo thả các khối để điều chỉnh thứ tự. Bên trong bộ chứa mới này, thêm các khối thông tin sản phẩm tiêu chuẩn (như Tiêu đề) mà bạn muốn sắp xếp theo chiều ngang.
5. Khi các khối đã được thêm, nhấp vào Bộ chứa 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 chuyên dụng của bộ chứa để thiết lập sắp xếp ngang và căn chỉnh các phần tử đã thêm ở bước trước. Điều này cho phép bạn đặt nhiều thành phần cạnh nhau, chẳng hạn như nút Mua hàng và bộ chọn Số lượng.
6. Nhấp Lưu để áp dụng các thay đổi của bạn.

Hạn chế Tính năng

• Khả năng sử dụng chủ đề: Tính năng này không được hỗ trợ bởi chủ đề Bottle, đây là chủ đề OS 3.0 duy nhất hiện tại không được bao gồm.
• Hạn chế vị trí đặt: Điều khiển bố cục ngang chỉ có sẵn trong nút bộ chứa nội dung chuyên dụng nằm dưới phần Thông tin sản phẩm chính trên trang Sản phẩm. Nó không ghi đè sắp xếp dọc của mẫu trang Chi tiết sản phẩm nói chung.

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

Bản cập nhật này giới thiệu khối nhóm Nút mua hàng, được thiết kế để tập trung khu vực mua sắm và cải thiện tỷ lệ chuyển đổi bằng cách tạo ra trải nghiệm hình ảnh tập trung hơn.

Trước đây, các yếu tố mua hàng được quản lý như 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. Nhóm Nút mua hàng mới "đóng gói lại" các yếu tố này thành một đơn vị thống nhất. Điều này cho phép bạn dễ dàng kéo toàn bộ nhóm trong trình chỉnh sửa và hỗ trợ bố cục hàng đơn chuyên nghiệp (đặt Bộ chọn số lượng và Tùy chọn Thêm vào giỏ hàng cạnh nhau), một thiết kế 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

Để tạo khu vực thanh toán gọn gàng và chuyên nghiệp hơn bằng cách căn chỉnh khối Nút mua hàng và các bộ chọn trên trang chi tiết sản phẩm của bạn, hãy làm theo các bước sau:

1. Từ bảng quản trị SHOPLINE của bạn, vào Cửa hàng trực tuyến > Thiết kế > Chủ đề của tôi. Chọn một chủ đề OS 3.0 (ví dụ, Fashion) và nhấp 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, theo thứ tự: Sản phẩm > Thông tin sản phẩm. Nhấp để mở rộng Thông tin sản phẩm để tìm thành phần Nút mua hàng tích hợp sẵn.
   
4. Dưới mục Sắp xếp, chọn hướng bố cục 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ị để có giao diện gọn gàng, chuyển đổi cao).
   • Dọc: Đặt chúng chồng lên nhau.
5. Để cấu hình cài đặt cho toàn bộ nhóm nút, nhấp vào thành phần Nút mua hàng và điều chỉnh các tùy chọn theo nhu cầu.
   
6. Bạn có thể kéo toàn bộ nhóm như một đơn vị duy nhất đến vị trí mong muốn trong phần Thông tin sản phẩm.
7. Nhấp Lưu để áp dụng bố cục.

Hạn Chế Tính Năng

• Không Hỗ Trợ Giá Theo Bậc: Xin lưu ý rằng thành phần này hiện không hỗ trợ hiển thị "Giá theo bậc."
• Hạn Chế Vị Trí Đặt: Thành phần này hỗ trợ cố định ở dưới cùng trên trang chi tiết sản phẩm. Tuy nhiên, 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 đó.

Cấu Hình Tính Năng Tương Tác Trang Danh Sách Sản Phẩm

Để giúp khách hàng chuyển từ việc duyệt sang mua hàng nhanh hơn, chúng tôi đã nâng cấp trang danh sách sản phẩm nhằm rút ngắn đường đi mua hàng của khách, cho phép trải nghiệm tương tác phong phú mà không cần ứng dụng bên thứ ba hoặc phát triển tùy chỉnh phức tạp.

Tính Năng Chính

• Tính Năng Xem Nhanh: Thêm nút Xem nhanh vào thẻ sản phẩm để khách hàng có thể xem chi tiết sản phẩm và thực hiện hành động mà không cần rời khỏi trang danh sách.
• Đường Dẫn Mua Hàng Linh Hoạt: Định nghĩa hành vi "Thêm vào giỏ hàng" — chọn giữa cửa sổ bật lên, lớp nổi hoặc thêm trực tiếp vào giỏ hàng để phù hợp với chiến lược bán hàng của bạn.
• Tùy Chỉnh Thẻ Sản Phẩm: Thẻ sản phẩm hiện hỗ trợ các khối có thể tái sử dụng và nguồn động, cho phép hiển thị cá nhân hóa cao.

Cách Thiết Lập

Để cấu hình các tính năng trang danh sách sản phẩm hỗ trợ duyệt và hành động mua hàng trực tiếp, hãy làm theo các bước dưới đây.

Tính Năng 1: Nút Xem Nhanh

Tính năng nút Xem nhanh cho phép khách hàng xem chi tiết sản phẩm và thực hiện hành động mà không cần rời khỏi trang danh sách sản phẩm. Để cấu hình:

1. Trong Trình chỉnh sửa giao diện, vào trang Bộ sưu tập. Dưới phần Bộ sưu tập, nhấp vào biểu tượng mũi tên xuống để chọn một bộ sưu tập xem trước.
   
2. Dưới khối Danh sách sản phẩm, tìm và di chuột qua phần Thẻ sản phẩm, nhấp + (Thêm nội dung), và chọn Nút Xem nhanh.
   
3. Sau khi thêm, một nút với văn bản mặc định Xem thêm sẽ xuất hiện dưới thẻ sản phẩm. Bạn có thể tùy chỉnh văn bản nút, màu sắc và định dạng trong cài đặt của nó.
   
4. Nhấp Lưu để áp dụng bố cục.

Tính Năng 2: Lớp Nổi Khi Di Chuột

Tính năng lớp nổi khi di chuột hiển thị các hành động liên quan đến mua hàng hoặc nội dung bổ sung khi khách hàng di chuột qua hình ảnh sản phẩm. Để cấu hình:

1. Trong Trình chỉnh sửa giao diện, vào trang Bộ sưu tập. Dưới phần Bộ sưu tập, nhấp vào biểu tượng mũi tên xuống để chọn một bộ sưu tập xem trước.
   
2. Dưới khối Danh sách sản phẩm, tìm và di chuột qua khối Chồng hình ảnh, nhấp + (Thêm nội dung), và chọn Nút Xem nhanh.
   
3. Trong phần Cài đặt của khối Chồng hình ảnh, điều chỉnh hiệu ứng khi di chuột (ví dụ: liên tục, mờ dần vào, hoặc mờ dần ra).
   
4. Nhấp Lưu để áp dụng bố cục.

Tính năng 3: Nhãn Tiếp Thị Động

Tính năng nhãn tiếp thị động cho phép bạn hiển thị các nhãn văn bản bắt mắt, linh hoạ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 các trang Chi tiết sản phẩm của bạn. Để cấu hình tính năng này:

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

2. Dưới cấp mẫu mong muốn trong 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: Để 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, hãy chọn khối cha của nó để áp dụng cài đặt căn chỉnh, vì căn chỉnh trực tiếp khung có thể không thay đổi vị trí.

3. Để tạo nhãn có giao diện chuyên nghiệp, nhấp vào khối Văn bản phong phú. Từ bảng cài đặt bên phải, bạn có thể 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.

4. Nhấp Lưu để áp dụng bố cục.

Hạn Chế Tính Năng

• Cấu hình Lớp Nổi: Bạn phải tự cấu hình nội dung lớp và logic hoạt ảnh để menu nổi hiển thị đúng.
• Khả năng sử dụng chủ đề: Các cải tiến trang danh sách sản phẩm này có sẵn trên tất cả các chủ đề OS 3.0 ngoại trừ chủ đề Bottle.

Sử Dụng Khối Mô Tả Đa Cấp Cho Bố Cục Sản Phẩm Nâng Cao

Cải tiến này giúp các nhà bán hàng xây dựng các trang chi tiết sản phẩm tinh vi, hiệu suất cao mà không cần viết một dòng mã nào. Trước đây, việc 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 "Nổi bật sản phẩm liên quan" thường yêu cầu phát triển tùy chỉnh hoặc sử dụng nhiều trình soạn thảo văn bản phong phú khó căn chỉnh. Bằng cách sử dụng khối Mô tả đa cấp, bạn có thể tạo các bố cục trực quan chuyên nghiệp theo kiểu thẻ ngay trong khu vực thông tin sản phẩm.

Thực hành tốt nhất: Cải thiện chuyển đổi với 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 "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 đầu tiên, 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

Để thực hiện phân tách chi tiết chuyên nghiệp bằng cách sử dụng khối Mô tả đa cấp trong khu vực thông tin sản phẩm của bạn, hãy làm theo các bước sau:

1. Từ bảng quản trị SHOPLINE của bạn, đi tới Cửa hàng trực tuyến > Thiết kế > Chủ đề của tôi. 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 bạn muốn xem trước các thay đổi.
   
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ó. Bạn có thể thêm các khối phổ quát khác nhau—chẳng hạn như Tiêu đề, Văn bản phong phú, và Logo—bên trong khối chính này để xây dựng bố cục 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 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 "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 Lưu để áp dụng các thay đổi của bạn.

Hạn chế của 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.
• Phạm vi bố cục: Khối này được thiết kế đặc biệt cho các 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.
• Tỷ lệ nội dung: Để duy trì hiệu suất trên thiết bị di động, nên giới hạn số lượng khối lồng nhau trong một container Mô tả đa cấp để đảm bảo 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

Sự cải tiến này giải quyết thách thức cân bằng giữa mật độ thông tin cao và giao diện người dùng sạch sẽ trên trang chi tiết sản phẩm. Trước đây, các thương nhân thường phải lựa chọn giữa việc làm khách hàng choáng ngợp với thuật ngữ kỹ thuật và chi tiết chính sách hoặc bỏ qua các chi tiết sản phẩm sâu sắc có thể hỗ trợ quyết định mua hàng. Bằng cách sử dụng khối Nhãn văn bản và khối con tương tác Tooltip, bạn có thể 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, đảm bảo rằng các chi tiết bổ sung chỉ cách một lần di chuột hoặc chạm.

Bằng cách giới thiệu phương pháp thông tin phân lớp này, 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 Tooltip ẩn các chi tiết phụ phía sau một bong bóng kích hoạt khi di chuột. Thiết kế này phù hợp với thói quen duyệt web hiện đại bằng cách giữ cho đường dẫn chuyển đổi chính tập trung và không rối mắt, cung cấp giá trị ngay lập tức chỉ khi người mua tìm kiếm ngữ cảnh bổ sung.

Thực hành tốt nhất: Nâng cao Hệ thống phân cấp trực quan 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 sản phẩm y tế, chúng tôi khuyến nghị 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 lời nhắc bong bóng tức thì của khối con Tooltip, 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à phân lớp hơn. Điều này không chỉ cải thiện đáng kể kết cấu tương tác của trang mà còn giúp khách hàng nhanh chóng hiểu giá trị sản phẩm, rút ngắn con đường ra quyết định.

Cách thiết lập

Để kích hoạt và cấu hình các nhãn tương tác và tooltip trong khu vực thông tin sản phẩm của bạn, hãy làm theo các bước sau:

1. Từ bảng điều khiển quản trị SHOPLINE của bạn, đi tới Cửa hàng trực tuyến > Thiết kế > Chủ đề của tôi. 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 bạn muốn để xem trước các thay đổi.
   

3. Dưới Module Sản phẩm, tìm và 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: Để 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 dưới phần Thông tin sản phẩm, sau đó thêm khối Nhãn văn bản bên 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 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ó.

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 khu vực khối Nhãn văn bản ở thanh bên, tìm và 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 được cung cấp để soạn nội dung cho bong bóng giải thích của bạn.
   
6. Trên cửa hàng trực tiếp, Nhãn văn bản sẽ xuất hiện bên dưới thông tin sản phẩm; khi người dùng di chuột qua nhãn (trên máy tính để bàn) hoặc chạm vào nó (trên thiết bị di động), một bong bóng bật lên sẽ hiển thị nội dung được cấu hình trong Chú giải công cụ.
   
7. Nhấp vào Lưu để áp dụng các thay đổi của bạn.

Hạn chế của 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.
• Thực hành tốt nhất về nội dung: Mặc dù khối con Chú giải công cụ 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.

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

Tính năng nâng cao này cho phép người bán tùy chỉnh tương tác phóng to hình ảnh trên trang chi tiết sản phẩm theo từng danh mục sản phẩm cụ thể. Bằng cách cung cấp nhiều chế độ phóng to—chẳng hạn như di chuột, cuộn, hoặc chuyển đổi bằng mũi tên—người bán có thể cải thiện trải nghiệm kiểm tra sản phẩm cho khách hàng. Chức năng này được thiết kế để tăng thời gian khách hàng ở lại trang, xây dựng sự tự tin khi mua hàng và giảm tỷ lệ trả hàng bằng cách cho phép khách hàng xem kỹ kết cấu và thông số sản phẩm trước khi mua.

Thực hành tốt nhất: Chọn kiểu phóng to phù hợp với ngành 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. 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 gian. 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 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

Để tùy chỉnh cài đặt kính lúp cho phương tiện sản phẩm của bạn, hãy làm theo các bước sau:

1. Từ bảng điều khiển quản trị SHOPLINE của bạn, đi tới Cửa hàng trực tuyến > Thiết kế > Chủ đề của tôi. 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 bạn muốn xem trước các thay đổi.
   
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 con Tệp phương tiện sản phẩm để truy cập cấu hình kính lúp.
   

5. Tìm nhóm cài đặt Kính lúp và 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. Để có độ rõ nét phóng to tối ưu, hãy đảm bảo hình ảnh sản phẩm của bạn tuân theo các thông số kỹ thuật được đề xuất trong "Hướng dẫn kích thước hình ảnh."

6. Dưới phần Kính lúp, bạn có thể cấu hình độc lập các kiểu phóng to cho các thiết bị khác nhau:
   • 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; người dù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 ảnh.
   
8. Nhấn Lưu để áp dụng các thay đổi của bạn.

Hạn Chế Tính Năng

• Khả Dụng Chủ Đề: Tính năng này chỉ dành riêng cho chủ đề Fashion và các chủ đề con của nó. Hiện tại không được hỗ trợ trên chủ đề Bottle.
• Giới Hạn 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.

Tùy Chỉnh Biểu Tượng Mạng Xã Hội

Để giúp các nhà bán hàng quảng bá các nền tảng chuyên biệt hoặc theo vùng miền (như Discord, LINE hoặc Reddit) ngoài các biểu tượng phổ biến như Facebook và Instagram, SHOPLINE hiện hỗ trợ hiển thị mạng xã hội tùy chỉnh. Điều này cho phép bạn tải lên các biểu tượng cá nhân hóa và đặt liên kết đích mà không cần mã hóa tùy chỉnh hay ứng dụng bên thứ ba.

Cách Thiết Lập

Để cấu hình biểu tượng mạng xã hội tùy chỉnh cho phần đầu trang hoặc chân trang cửa hàng của bạn, làm theo các bước sau:

1. Từ bảng quản trị SHOPLINE, vào Cửa hàng trực tuyến > Thiết kế > Chủ đề của tôi. Chọn một chủ đề OS 3.0 tương thích (ví dụ: Fashion) và nhấn Thiết kế để vào trình chỉnh sửa chủ đề.
2. Trong trình chỉnh sửa chủ đề, vào Cài đặt chủ đề > Mạng xã hội.
   
3. Cuộn xuống cuối trang để tìm phần Mạng xã hội tùy chỉnh. Bạn sẽ thấy năm vị trí có sẵn được đánh dấu từ Mạng xã hội 1 đến Mạng xã hội 5. Chọn bất kỳ vị trí nào để bắt đầu cấu hình.
   
4. Cấu hình các thiết lập sau cho mỗi mục:
   
   • Tải lên biểu tượng: Tải lên hình ảnh tùy chỉnh của bạn (biểu tượng sẽ hiển thị màu xám cho đến khi hình ảnh được tải lên thành công).

   • Liên kết: Nhập URL đích đầy đủ.

     Lưu ý: Trường Liên kết là bắt buộc. Bạn phải nhập định dạng URL hợp lệ (ví dụ: https://...) để lưu cài đặt.

5. Nhấn Lưu để áp dụng các biểu tượng vào Đầu trang hoặc Chân trang của bạn.
   

Thông Số Kỹ Thuật Biểu Tượng

Để đảm bảo hiển thị tối ưu, vui lòng tuân theo các hướng dẫn sau:

• Định dạng được hỗ trợ: JPG, SVG và PNG
• Kích thước tệp: Khuyến nghị dưới 200KB.
• Kích thước đề xuất: 20px x 20px hoặc 25px x 25px

Hạn chế tính năng

• Giới hạn số lượng: Bạn có thể thêm tối đa 5 biểu tượng mạng xã hội tùy chỉnh.
• Tính khả dụng của chủ đề: Tính năng này được hỗ trợ trên tất cả các chủ đề miễn phí chính thức OS 3.0, ngoại trừ chủ đề Bottle. Nó không được hỗ trợ trên các chủ đề trả phí của bên thứ ba.
   

Sao chép các phần giữa các trang

Việc thiết kế các trang cửa hàng nhất quán giờ đây dễ dàng hơn với tính năng Sao chép vào bộ nhớ tạm. Bạn có thể nhân bản một phần—bao gồm tất cả nội dung và cài đặt tùy chỉnh của nó—và dán nó vào bất kỳ mẫu trang nào khác trong cửa hàng của bạn.

Bản cập nhật này loại bỏ nhu cầu phải xây dựng lại thủ công các phần giống hệt nhau (chẳng hạn như biểu ngữ, khối hình ảnh, khu vực khuyến mãi hoặc nội dung tùy chỉnh) khi chuyển đổi giữa Trang chủ, Trang bộ sưu tập hoặc Bài đăng blog. 

Cách thiết lập

Để sao chép bố cục trang của bạn trên các mẫu khác nhau, hãy làm theo các bước sau:

1. Từ bảng điều khiển quản trị SHOPLINE của bạn, đi tới Cửa hàng trực tuyến > Thiết kế > Chủ đề của tôi. Chọn một chủ đề OS 3.0 tương thích (ví dụ, Fashion) 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ủ đề, chuyển sang trang mong muốn và tìm phần bạn muốn tái sử dụng trong thanh bên trái.
3. Nhấp vào biểu tượng ba chấm (Thêm hành động) và chọn Sao chép vào bộ nhớ tạm.
   

4. Đi đến trang bạn muốn thêm phần đó. Sau đó nhấp vào biểu tượng ba chấm trên bất kỳ phần hiện có nào và chọn Dán bên dưới.
   

   Mẹo: Tính năng này đặc biệt hữu ích cho các bài đăng Blog và trang Sản phẩm. Bạn có thể dán các phần khuyến mãi trực tiếp phía trên hoặc dưới nội dung cố định (như phần thân bài viết hoặc thông tin sản phẩm).

5. Phần sẽ được chèn tự động, và trình chỉnh sửa sẽ cuộn để hiển thị nội dung bạn vừa dán.
   
6. Nhấp vào Lưu.

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

• Hạn chế phần: Không phải tất cả các phần đều hỗ trợ thao tác sao chép. Các phần cốt lõi của một loại trang cụ thể không thể được nhân bản. Ví dụ, bạn không thể sao chép các phần Sản phẩm hoặc Sản phẩm được đề xuất sang các mẫu trang khác.
• Giới hạn số lượng: Để đảm bảo hiệu suất trang tối ưu, mỗi trang có giới hạn 25 phần. Nếu một trang đã đạt giới hạn này, tùy chọn Dán sẽ bị mờ đi.
• Bộ nhớ tạm: Nội dung đã sao chép được lưu trong bộ nhớ nội bộ của trình chỉnh sửa. Nó sẽ bị xóa khi bạn đóng trình chỉnh sửa chủ đề.
• Khả năng hỗ trợ chủ đề: Tính năng này được hỗ trợ trên tất cả các chủ đề OS 3.0 miễn phí chính thức, ngoại trừ chủ đề Bottle. Nó không được hỗ trợ trên các chủ đề trả phí của bên thứ ba.