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
- Nhà bán hàng truy cập vào trang ứng dụng Ap Compare Product.
- Chọn Cài đặt ứng dụng.
- Nhập tên miền Haravan.
- 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.
- 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".
- 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
Sau khi cài đặt, ứng dụng giúp tạo ra 3 file trong giao diện hiện tại của Nhà bán hàng, bao gồm:
- page.ap-compare.liquid
- ap-compare-product.css
- ap-compare-product.liquid
Đồng thời các đoạn mã {% include 'ap-compare-product' %}
sẽ được thêm vào cuối mỗi file theme.liquid.
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
- Nhà bán hàng vào trong Hiệu chỉnh theme, mở tập tin có tên product-loop.liquid.
- 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
<div id="ap_compare_item"></div> |

Tạo Trang so sánh
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:
- Tab biểu tượng
- 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.
Nếu Nhà bán hàng có câu hỏi hoặc cần hỗ trợ hãy liên hệ qua các kênh hỗ trợ:
- Email: support@apollotheme.com
- Skype Support: trandinhnghiait
- Gửi yêu cầu hỗ trợ: