Tính năng Bản đồ đường phố giúp bạn tạo sản phẩm cá nhân hoá dựa trên bản đồ bằng cách tích hợp Customix với Mapbox. Khách hàng có thể nhập vị trí của riêng họ và có thể chọn thêm một trong các kiểu bản đồ tuỳ chỉnh của bạn khi thiết kế sản phẩm.

1. Kết nối Customix với tài khoản Mapbox của bạn

Trước tiên, đăng nhập vào tài khoản Mapbox của bạn: https://console.mapbox.com/, sau đó trong mục Token, tạo và sao chép một public token:

Vào Cài đặt → Dịch vụ, tìm Mapbox trong Dịch vụ khả dụng, rồi nhập access token Mapbox của bạn. Sau khi kết nối, thẻ sẽ hiển thị trạng thái Đã kết nối màu xanh lá.

2. Lưu các kiểu bản đồ vào thư viện tài nguyên

Chỉ thực hiện bước này nếu bạn muốn khách hàng chọn giữa nhiều kiểu bản đồ trên storefront. Bỏ qua nếu bạn chỉ cần một kiểu duy nhất.

  • Vào Tài nguyên → Bản đồ.
  • Bấm Thêm bản đồ → Thêm thư mục, đặt tên cho thư mục (ví dụ: Map Styles), rồi mở thư mục đó.
  • Bấm Thêm bản đồ, rồi chọn tuỳ chọn Thêm bản đồ
  • Trong Mapbox Studio, mở kiểu bạn muốn → Share → Production → cuộn xuống Developer resources và sao chép Style URL (mapbox://styles/...).
  • Dán vào trường URL kiểu bản đồ trong Customix và bấm Lưu.

Lặp lại cho từng kiểu bạn muốn cung cấp.

3. Thêm thành phần Bản đồ đường phố vào mẫu

  • Mở một mẫu và bấm biểu tượng Thành phần ở thanh bên trái.
  • Chọn Bản đồ đường phố. Thành phần được thêm vào canvas và phần thiết lập của nó hiển thị ở bên phải.
  • Trong Nội dung, thiết lập Initial Location: nhập toạ độ hoặc bấm Chọn trên bản đồ.
  • Ở Kiểu bản đồ, chọn một kiểu mặc định (Streets, Satellite, Outdoors, Light, Dark) hoặc chọn Tuỳ chỉnh:

Nếu bạn chọn Tuỳ chỉnh, quay lại Mapbox Studio → mở kiểu đó → Share → sao chép URL Preview only (https://api.mapbox.com/styles/v1/...), dán vào trường URL kiểu bản đồ tuỳ chỉnh, rồi bấm Áp dụng kiểu

4. Bật cá nhân hoá cho khách hàng

Trong phần Cá nhân hoá của thiết lập Bản đồ đường phố:

  • Cá nhân hoá bằng vị trí: chọn mục này để khách hàng có thể tìm kiếm và chọn địa chỉ của riêng họ trên storefront. Bạn có thể đặt Nhãn (ví dụ: Your address) và Văn bản hướng dẫn tuỳ chọn.
  • Cá nhân hoá bằng kiểu bản đồ: chọn mục này để khách hàng chọn giữa nhiều kiểu bản đồ. Trong cửa sổ bật lên xuất hiện, chọn thư mục bạn đã tạo ở Bước 2 (ví dụ: Map Styles) và bấm Xong

Lưu mẫu. Thành phần Bản đồ đường phố giờ đã sẵn sàng trên storefront của bạn: khách hàng có thể nhập vị trí của riêng họ và, nếu đã bật, chọn kiểu bản đồ họ thích:

5. Mặt nạ Bản đồ đường phố

Nếu muốn hiển thị bản đồ đường phố trong một hình dạng tuỳ chỉnh, bạn có thể dùng tính năng Mặt nạ. Sau khi tải lên một mặt nạ, bản đồ sẽ tự động được định hình lại cho khớp với hình dạng của mặt nạ đã tải lên.

Cập nhật ngày: 23/09/2026