Ứng dụng - Ap Compare Product

Dù Nhà bán hàng kinh doanh sản phẩm gì, một điều chắc chắn là sẽ có những sản phẩm tương đồng. Các sản phẩm tương tự nhau về tính năng, thiết kế, màu sắc, đối tượng, kích thước,... Và không dễ dàng gì để Khách mua hàng lựa chọn được sản phẩm phù hợp nhất.

Thật may mắn là có một phương án tối ưu cho điều này: so sánh sản phẩm! 

Đó cũng chính là lý do ứng dụng Ap Compare Product ra đời.

Các mục liên quan

• Tổng quan về ứng dụng Ap Compare Product
• Cài đặt ứng dụng
• Cấu hình chức năng So sánh sản phẩm
• Thiết lập Trang so sánh

Tổng quan về ứng dụng Ap Compare Product

Ứng dụng Ap Compare Product do nhóm Apollo phát triển. Nhà bán hàng được phép trải nghiệm miễn phí 15 ngày, trước khi sử dụng chính thức với chi phí 30,000đ/tháng.

Ứng dụng Ap Compare Product:

• Cung cấp đầy đủ thông tin của các sản phẩm so sánh, Khách mua hàng có thể dễ dàng chọn lựa sản phẩm.
• Hỗ trợ các tuỳ chỉnh giao diện như màu sắc, biểu tượng hiển thị, ...
• Hỗ trợ chia sẻ các sản phẩm so sánh lên các mạng xã hội: facebook, google+, twitter, pinterest.
• Giao diện thân thiện bắt mắt - responsive design, hiển thị hỗ trợ tốt trên tất cả các trình duyệt phổ biến.
• Cài đặt ứng dụng đơn giản, nhanh chóng, dễ dàng sử dụng cho Khách mua hàng.

Cài đặt ứng dụng

1. Nhà bán hàng truy cập vào trang ứng dụng Ap Compare Product.
2. Chọn Cài đặt ứng dụng.
   

   

3. Nhập tên miền Haravan.
   

   

4. Nhà bán hàng nhập tên cửa hàng (ví dụ như aptest4.myharavan.com) hoặc apollotheme để đăng nhập vào ứng dụng.
   

   

5. Hệ thống điều hướng về Trang quản trị Haravan. Tại đây, Nhà bán hàng chọn "Cài ứng dụng Ap Compare Product".
   

   

6. Khi ứng dụng được cài đặt thành công, hệ thống tự động điều hướng về trang ứng dụng Ap Compare Product.
   

Để sử dụng ứng dụng, Nhà bán hàng hà bán hàng truy cập vào Trang quản trị Haravan -> Ứng dụng -> Ap Compare Product.

Cấu hình chức năng So sánh sản phẩm

Khi đó, chức năng So sánh sản phẩm đã được kích hoạt cho website. Điều Nhà bán hàng cần làm là hiển thị chức năng này ra website.

Tạo nút Thêm vào so sánh

1. Nhà bán hàng vào trong Hiệu chỉnh theme, mở tập tin có tên product-loop.liquid.
2. Dán đoạn mã vào dưới cùng của tệp.
   
   

   <div class='ap_cp_add'><input type="checkbox" data-img="{{ product.featured_image }}" data-title="{{product.title}}" data-id="{{ product.handle }}" class="ap-cp-add"><span>Thêm vào so sánh</span></div>

   
   

Nút thêm so sánh được hiển thị ra ngoài website.

Thêm nút so sánh cho một vị trí khác

Tạo Trang so sánh

Khi nhấn vào nút So sánh, ứng dụng sẽ điều hướng về trang so sánh để Khách mua hàng xem được các so sánh sản phẩm phù hợp.

Nhà bán hàng có thể chủ động điều hướng về trang so sánh này khi nhấp vào một menu. 

Cách thực hiện menu liên kết, Nhà bán hàng tham khảo chi tiết tại đây.

Đối với trang so sanh, Nhà bán hàng chọn loại Liên kết đến... là "Trang" và chọn trang đích là "SO SÁNH SẢN PHẨM" (đã được tạo tự động khi cài đặt ứng dụng).

Thiết lập Trang so sánh

Khi muốn thay đổi các thiết lập dành cho ứng dụng Ap Compare Product, Nhà bán hàng nhấp vào ứng dụng để vào trang dashboard.

Ứng dụng Ap Compare Product hỗ trợ Nhà bán hàng các thiết lập:

• So sánh tab
• Trang so sánh
• Chia sẻ liên kết
• Chỉnh sửa CSS

So sánh tab

Trong phần so sánh tab, Nhà bán hàng thực hiện được tùy chỉnh cho hai phần:

1. Tab biểu tượng
2. Kho sản phẩm

Tab biểu tượng

Phần Tab biểu tượng giúp tùy chỉnh các tab biểu tượng sẽ hiển thị trên trang web của Nhà bán hàng: biểu tượng, hiển thị, màu sắc, khoảng cách của panel tool.

• Chọn Biểu tượng. Hiện ứng dụng hỗ trợ Nhà bán hàng 7 biểu tượng so sánh.
  

  

• Tùy chỉnh Màu biểu tượng. Màu mặc định của ứng dụng là #464545.
• Đặt Vị trí. Nhà bán hàng có thể chọn một trong hai vị trí là Left (mặc định) và Right.
• Thiết lập khoảng cách của vị trí trong Khoảng cách trên (px). Tính năng này thể hiện khoảng cách tối thiểu của vị trị nút so sánh. Mặc định của ứng dụng là 50 px.
• Chọn Màu nền. Màu mặc định của ứng dụng là #ffffff.

Kho sản phẩm

Phần Kho sản phẩm hỗ trợ tùy chỉnh tab sản phẩm danh sách sẽ hiển thị trên trang web của Nhà bán hàng: màu nền nút so sánh, màu nền danh sách sản phẩm, số lượng sản phẩm tối đa cho phép so sánh.

• Chọn Màu danh sách sản phẩm. Màu mặc định của ứng dụng là #ffffff.
• Chọn Màu nút so sánh. Màu mặc định của ứng dụng là #464545.
• Đặt Số sản phẩm tối đa so sánh. Mặc định của ứng dụng là hiển thị 4 sản phẩm so sánh. Nhà bán hàng có thể thiết lập trong khoảng 1 đến 6.

Hiển thị cho cài đặt So sánh tab sẽ như hình:

Trang so sánh

Trong Trang so sánh, Nhà bán hàng có thể tùy chình được màu sắc và khoảng cách:

• Màu nền. Màu mặc định của ứng dụng là #ffffff.
• Màu chữ. Màu mặc định của ứng dụng là #000000.
• Màu biên. Màu mặc định của ứng dụng là #dddddd.
• Khoảng cách (px). Màu mặc định của ứng dụng là 0 px. Nhà bán hàng điền thông số khoảng cách muốn thiết lập.

Hiển thị cho cài đặt Trang so sánh sẽ như hình:

Chia sẻ liên kết

Bên cạnh việc thực hiện so sánh, ứng dụng còn hỗ trợ Nhà bán hàng chia sẻ liên kết so sánh trên các kênh Facebook, Google+, Tweet, Pinterest.

Hiển thị cho cài đặt Chia sẻ liên kết sẽ như hình:

Chỉnh sửa CSS

Để thực hiện chỉnh sửa css cho chức năng so sánh trên website (màu sắc, phong cách nút,...), Nhà bán hàng chèn đoạn code vào phần Chỉnh sửa CSS trong ứng dụng Ap Compare Product.

Lưu ý:

• Để các thao tác thiết lập có hiệu lực, Nhà bán hàng cần nhấn Lưu để ghi nhận.
  

  

• Khi muốn cấu hình ứng dụng và mặc định, Nhà bán hàng nhấn chọn Trở về mặc định.