Tài liệu ứng dụng Shopify
Mọi thứ bạn cần để thiết lập và tùy chỉnh chuyển đổi tiền tệ trên cửa hàng Shopify
Mục lục
1 Cài đặt
Cài đặt từ Shopify App Store
- Truy cập trang ứng dụng Currency.Wiki trên Shopify App Store
- Nhấn 'Add app' và cấp quyền cài đặt
- Ứng dụng sẽ mở và hướng dẫn bạn qua trình hướng dẫn thiết lập
- Hoàn thành trình hướng dẫn để bắt đầu chuyển đổi giá
Mẹo: Trình hướng dẫn thiết lập chỉ mất khoảng 2 phút và hướng dẫn bạn từng bước.
2 Trình hướng dẫn thiết lập
Trình hướng dẫn thiết lập giúp bạn cấu hình ứng dụng đúng cách. Hướng dẫn cập nhật định dạng tiền tệ và bật nhúng ứng dụng.
Bước 1: Chào mừng
Xem trước các bước thiết lập và nhấn 'Let's Get Started'.
Bước 2: Cập nhật định dạng tiền tệ
Vào Shopify Admin → Settings → General → Store defaults. Tìm tiền tệ của bạn và nhấn menu ba chấm → 'Change currency formatting'. Cập nhật trường HTML với class của chúng tôi:
HTML có tiền tệ:
<span class="cwiki">${{amount}} USD</span>
HTML không có tiền tệ:
<span class="cwiki">${{amount}}</span>
Quan trọng: Class cwiki là bắt buộc. Nó giúp ứng dụng xác định đâu là giá trên trang để chỉ chuyển đổi giá thực, không chuyển đổi số điện thoại hay mã đơn hàng.
Bước 3: Bật nhúng ứng dụng
Bật ứng dụng trong phần App Embeds của giao diện:
- Vào Online Store → Themes → Customize
- Tìm 'App embeds' ở thanh bên trái
- Tìm 'Currency.Wiki App' và bật ON
- Nhấn Lưu trong trình chỉnh sửa giao diện
Bước 4: Xác minh thiết lập
Nhấn 'Scan My Store' để xác minh thiết lập đã hoàn tất. Trình hướng dẫn sẽ kiểm tra class cwiki và nhúng ứng dụng. Nếu thành công, bạn đã sẵn sàng!
3 Kiểu giao diện tiện ích
Chọn 1 trong 6 kiểu giao diện tiện ích phù hợp thiết kế cửa hàng. Mỗi kiểu đều có thể tùy chỉnh màu thương hiệu.
Danh sách thả xuống tối giản
Tích hợp gọn vào header với danh sách thả xuống đơn giản. Phù hợp đặt ở góc phải trên cùng.
Nút nổi
Nút nổi thân thiện di động với bảng mở rộng. Tuyệt vời cho cửa hàng ưu tiên di động. Đặt ở các góc.
Thanh bên trượt
Bảng trượt toàn chiều cao với chức năng tìm kiếm. Lý tưởng cho cửa hàng có nhiều loại tiền.
Cửa sổ bật lên
Lớp phủ giữa màn hình với bố cục lưới. Mang lại trải nghiệm chọn tiền tệ tập trung.
Chuyển tab nội tuyến
Tab ngang cho tiền tệ phổ biến. Chuyển nhanh không cần mở menu.
Biểu tượng góc
Biểu tượng góc tối giản mở rộng khi nhấn. Ít gây chú ý cho thiết kế sạch.
Mẹo: Dùng trang Cài đặt tiện ích trong quản trị ứng dụng để xem trước tất cả kiểu với màu cửa hàng.
4 Bảng điều khiển quản trị
Bảng điều khiển quản trị cho bạn toàn quyền kiểm soát cách chuyển đổi tiền tệ trên cửa hàng.
Trang chủ bảng điều khiển
Bật/tắt tiện ích, xem thống kê chuyển đổi, và xem trước trực tiếp tiện ích.
Cài đặt tiện ích
Chọn kiểu tiện ích, vị trí, màu sắc, kích thước, bo góc và tùy chọn hiển thị cờ.
Quản lý tiền tệ
Bật/tắt tiền tệ, sắp xếp lại danh sách, cấu hình tự động nhận diện và cài đặt ưu tiên tỷ giá.
Phân tích
Xem biểu đồ chuyển đổi, top tiền tệ sử dụng, và hiểu phân bố khách hàng quốc tế.
Chủ đề & Giao diện
Chọn chế độ chủ đề (auto, sáng, tối, tùy chỉnh), đặt màu, bật hiệu ứng kính, và cấu hình chế độ tối.
Thông báo thanh toán
Bật thông báo trên trang giỏ hàng/thanh toán để khách biết tiền tệ thanh toán.
5 Cài đặt nâng cao
Cài đặt nâng cao cho phép người dùng Pro kiểm soát định dạng giá và hành vi chuyển đổi.
Định dạng giá (Pro)
- Số chữ số thập phân - Kiểm soát số chữ số thập phân hiển thị (0-6).
- Định dạng số - Chọn kiểu định dạng (Auto, US, EU, Ấn Độ, Space•Dot, Space•Comma).
- Vị trí ký hiệu - Đặt ký hiệu tiền tệ trước hoặc sau số tiền, hoặc tự động theo từng loại tiền.
- Làm tròn - Chuẩn, luôn làm tròn lên, luôn làm tròn xuống, hoặc không làm tròn. Có thể làm tròn về .99.
Tích hợp giao diện (Pro)
Nhúng tiện ích hoặc thông báo giỏ hàng thủ công vào bất kỳ đâu trong theme bằng các đoạn HTML sau:
Nhúng tiện ích (thêm vào header.liquid hoặc bất kỳ section nào):
<div class="cwiki-widget"></div>
Nhúng thông báo giỏ hàng (thêm vào cart.liquid):
<div class="cwiki-banner"></div>
Tùy chọn lập trình viên (Pro)
- Ghi đè CSS - Thêm CSS tùy chỉnh để chỉnh giao diện tiện ích.
- Lắng nghe click - Chuyển đổi lại giá khi nhấn vào các phần tử cụ thể (ví dụ: chọn size, tùy chọn sản phẩm).
- Phần tử giá bổ sung - Nhắm mục tiêu thêm các phần tử giá ngoài class .cwiki mặc định.
- Mẫu URL - Quét lại giá khi URL chứa chuỗi cụ thể (cho nội dung AJAX, cuộn vô hạn).
- Độ trễ chuyển đổi - Chờ trước khi chuyển đổi giá (cho nội dung tải sau khi trang sẵn sàng).
Lưu ý: Các tùy chọn này dành cho người dùng nâng cao. Hãy kiểm tra trên theme thử nghiệm trước khi xuất bản.
6 Khắc phục sự cố
Giá không chuyển đổi?
Đảm bảo class cwiki đã có trong cài đặt định dạng tiền tệ. Vào Settings → General → Store defaults và kiểm tra HTML. Đồng thời xác minh nhúng ứng dụng đã bật trong trình tùy chỉnh giao diện.
Tiện ích không hiển thị?
Kiểm tra nhúng ứng dụng đã bật trong phần App Embeds của theme. Thử mở trình tùy chỉnh giao diện, tìm App Embeds và đảm bảo Currency.Wiki đã bật. Lưu và làm mới cửa hàng.
Giá bị nhấp nháy khi tải?
Ứng dụng được thiết kế tải không nhấp nháy. Nếu vẫn thấy nhấp nháy, kiểm tra các plugin cache có thể gây ảnh hưởng. Đảm bảo nhúng ứng dụng tải ở phần head của theme.
Nhận diện sai tiền tệ?
Nhận diện địa lý dựa trên địa chỉ IP. VPN hoặc mạng công ty có thể ảnh hưởng. Khách luôn có thể chọn tiền tệ thủ công. Bạn cũng có thể đặt tiền tệ dự phòng trong cài đặt.
Tiện ích không khớp giao diện?
Dùng cài đặt Chủ đề & Giao diện để tùy chỉnh màu sắc, hoặc bật chế độ Auto để tự động nhận diện màu theme. Bạn cũng có thể dùng CSS tùy chỉnh trong Cài đặt nâng cao để chỉnh chi tiết.
Cần hỗ trợ?
Đội ngũ hỗ trợ sẵn sàng giải đáp mọi thắc mắc về cài đặt hoặc cấu hình.
