Nâng cao ứng dụng cửa hàng của bạn với các công cụ tùy chỉnh trong ứng dụng Shopper

SHOPLINE hiện hỗ trợ tùy chỉnh nâng cao cho ứng dụng cửa hàng của bạn, mang lại cho bạn quyền kiểm soát lớn hơn về diện mạo và chức năng của các trang ứng dụng của bạn. Bằng cách tạo các thành phần và trang web tùy chỉnh, bạn có thể điều chỉnh trải nghiệm ứng dụng cửa hàng của mình để phản ánh tốt hơn thương hiệu của bạn và đáp ứng nhu cầu kinh doanh của bạn.

Hướng dẫn này sẽ hướng dẫn bạn qua các loại trang được hỗ trợ, phương pháp cấu hình và cách thêm các thành phần tùy chỉnh bằng cách sử dụng trình chỉnh sửa giao diện.

Các phương pháp tùy chỉnh được hỗ trợ và các trang áp dụng

Để đáp ứng các nhu cầu hiển thị khác nhau trong các tình huống khác nhau, SHOPLINE cung cấp hai công cụ tùy chỉnh trang linh hoạt: Các thành phần tùy chỉnh và Các trang tùy chỉnh. Mỗi công cụ phục vụ một mục đích khác nhau, và chúng có thể được sử dụng cùng nhau để đạt được trải nghiệm ứng dụng hoàn chỉnh hơn.

Các thành phần tùy chỉnh

Các thành phần tùy chỉnh cho phép bạn chèn các khối nội dung tùy chỉnh vào các trang cụ thể. Khi tạo một thành phần, bạn phải chỉ định một trang mục tiêu. Bạn có thể thêm thành phần vào các trang được hỗ trợ khác thông qua trình chỉnh sửa mã hoặc trình chỉnh sửa giao diện. Các trang được hỗ trợ bao gồm:

• Trang chủ
• Trang chi tiết sản phẩm
• Túi mua sắm
• Bảng thêm nhanh
• Trang tùy chỉnh

Các trang web tùy chỉnh

Các trang web tùy chỉnh được sử dụng để tạo các trang độc lập, chẳng hạn như các trang đích khuyến mãi hoặc các trang câu chuyện thương hiệu. Khi được xuất bản, nội dung sẽ được hiển thị ngay lập tức mà không cần cấu hình thêm trong trình chỉnh sửa giao diện.

Để hiển thị một liên kết hoặc nút đến trang tùy chỉnh trên một trang khác, bạn có thể nhúng mục nhập bằng cách sử dụng Các thành phần tùy chỉnh, cho phép điều hướng mượt mà và tích hợp nội dung giữa các phần khác nhau của cửa hàng của bạn. Ngoài ra, bạn có thể cấu hình nó như một trang chuyển hướng bằng cách sử dụng Các liên kết sâu.

Tạo các thành phần và trang web tùy chỉnh

Bạn có thể quản lý tất cả các thành phần và trang web tùy chỉnh của mình trực tiếp trong bảng điều khiển quản trị SHOPLINE. Các quy trình tạo và chỉnh sửa được tập trung trong một giao diện duy nhất để đảm bảo tính nhất quán và hiệu quả.

Để truy cập cài đặt tùy chỉnh, hãy đi đến Ứng dụng Người mua > Cài đặt ứng dụng > Phát triển tùy chỉnh trong quản trị SHOPLINE của bạn. Trên trang này, bạn sẽ thấy hai tab: Các khối tùy chỉnh và Các trang web tùy chỉnh, mỗi tab tương ứng với một tính năng tùy chỉnh khác nhau.

Tạo một thành phần tùy chỉnh

1. Trong tab Các khối tùy chỉnh, nhấp vào Tạo một khối tùy chỉnh ở góc trên bên phải.
   
2. Trong bảng Cài đặt ở bên phải, điền vào các chi tiết sau:

• • Tên khối: Đặt tên cho thành phần để dễ nhận diện và quản lý trong tương lai.
  • Mô tả khối (tùy chọn): Cung cấp một mô tả ngắn gọn nếu cần.
  • Trang được chỉ định: Chọn các trang mà bạn muốn thành phần tùy chỉnh xuất hiện.
    

    Ghi chú: Bạn phải chỉ định thành phần cho ít nhất một trang để lưu hoặc xuất bản nó. Bạn có thể quay lại trình chỉnh sửa mã sau để chỉ định thêm các trang hoặc thêm thành phần bằng cách sử dụng trình chỉnh sửa giao diện.

• • Hình ảnh xem trước khối: Tải lên một hình ảnh sẽ được sử dụng làm hình ảnh xem trước cho thành phần. 

3. Trong trình chỉnh sửa mã, viết mã tùy chỉnh của bạn bằng HTML, CSS hoặc JavaScript.
   
4. Trong bảng bên phải, chuyển sang tab Xem trước để xem cách thành phần sẽ xuất hiện trên cửa hàng.
   
5. Nhấp vào Lưu để lưu thành phần để chỉnh sửa thêm. Nếu bạn chèn thành phần vào một trang ở giai đoạn này, nó sẽ hiển thị nhãn Đang phát triển. Khi việc phát triển hoàn tất, nhấp vào Xuất bản để làm cho thành phần hoạt động và hiển thị đúng trên trang.
   

Sau khi tạo một thành phần tùy chỉnh, hãy tham khảo phần tiếp theo của bài viết này để tìm hiểu cách thêm nó bằng cách sử dụng Trình chỉnh sửa giao diện.

Tạo một trang web tùy chỉnh

1. Trong tab Các trang web tùy chỉnh, nhấp vào Tạo một trang web tùy chỉnh ở góc trên bên phải.
   
2. Trong bảng Cài đặt ở bên phải, nhập tên trang và tùy chọn thêm mô tả.
   
3. Trong trình chỉnh sửa mã, viết mã tùy chỉnh của bạn bằng HTML, CSS hoặc JavaScript.
   
4. Trong bảng bên phải, chuyển sang tab Xem trước để xem cách trang sẽ xuất hiện trên cửa hàng.
   
5. Nhấp vào Lưu để lưu trang để chỉnh sửa trong tương lai, hoặc nhấp vào Xuất bản để làm cho nó hoạt động.
   

Thêm các thành phần tùy chỉnh trong Trình chỉnh sửa giao diện

Khi bạn đã tạo và xuất bản một thành phần tùy chỉnh, bạn có thể thêm nó vào các trang được hỗ trợ trên giao diện cửa hàng của bạn bằng cách sử dụng trình chỉnh sửa giao diện.

1. Từ bảng điều khiển SHOPLINE của bạn, đi đến Ứng dụng Người mua > Thiết kế Ứng dụng và nhấp vào Thiết kế để mở trình chỉnh sửa giao diện.
   
2. Trong trình chỉnh sửa giao diện, điều hướng đến trang mà bạn muốn chèn thành phần tùy chỉnh. (Trong ví dụ này, chúng tôi sẽ sử dụng Trang chủ.)
   
3. Trong bảng bên trái, nhấp vào + Thêm thành phần, chuyển sang tab Tùy chỉnh, và chọn thành phần tùy chỉnh mà bạn muốn thêm. Ngoài ra, nhấp vào + Tạo một khối tùy chỉnh để đi đến trình chỉnh sửa mã và tạo một thành phần tùy chỉnh mới.
   
4. Điều chỉnh vị trí của thành phần bằng cách kéo nó trong bố cục trang khi cần.
   
5. Nhấp vào Lưu để lưu các thay đổi của bạn để chỉnh sửa sau, hoặc nhấp vào Công bố > Công bố lên Ứng dụng trực tiếp để thực hiện các thay đổi ngay lập tức.
   

Mẹo và Thực tiễn Tốt nhất 

Để đảm bảo các thành phần tùy chỉnh và trang web của bạn mang lại trải nghiệm tốt nhất có thể, hãy ghi nhớ các mẹo sau: 

Duy trì tính nhất quán trong thiết kế và sự phù hợp với thương hiệu 

Sử dụng phông chữ, màu sắc và khoảng cách phù hợp với thương hiệu tổng thể của cửa hàng bạn. Một thiết kế đồng bộ tạo dựng niềm tin và mang lại trải nghiệm duyệt web mượt mà hơn cho người mua. 

Tối ưu hóa bố cục cho thiết bị di động 

Đảm bảo các thành phần tùy chỉnh của bạn hoàn toàn phản hồi và hiển thị đúng trên các kích thước màn hình khác nhau, cung cấp trải nghiệm trong ứng dụng mượt mà và thân thiện với người dùng.

Giữ hiệu suất trong tâm trí 

Tránh sử dụng quá nhiều mã nặng hoặc hình ảnh lớn, có thể làm chậm thời gian tải trang. Mã hiệu quả, sạch sẽ không chỉ cải thiện hiệu suất mà còn nâng cao SEO và trải nghiệm người dùng tổng thể.