Navy Toys — Giao Diện Mới & Chuyển Đổi Dữ Liệu Shopify
Làm mới cửa hàng mô hình sưu tầm Navy Toys: thiết kế đã được khách duyệt được dựng lại thành giao diện Shopify riêng, kèm bộ công cụ làm sạch và cập nhật danh mục 40.000 sản phẩm mà vẫn giữ nguyên địa chỉ trang cũ.
- Năm
- 2026
- Bộ công nghệ
- 10 công nghệ
Xem qua sản phẩm
Bản desktop
Bản mobile
Phạm vi & vai trò của mình
Fullstack Developer (Solo / End-to-End)
Phạm vi sản phẩm
Dựng storefront Next.js và trang quản trị ở giai đoạn một: danh mục, trang sản phẩm, giỏ hàng, danh sách yêu thích, blog, trang nội dung và bốn ngôn ngữ.
Viết script nhập file xuất sản phẩm của Shopify, chuẩn hóa tên studio và series, xếp sản phẩm mới nhất lên đầu.
Dựng theme Shopify trên nền Dawn: header, footer, trang chủ, trang collection, trang sản phẩm, giỏ hàng, blog, danh sách yêu thích, bộ chọn tiền tệ và ngôn ngữ.
Viết script đồng bộ dữ liệu qua Shopify Admin API: metafield, tag, collection tự động theo series, studio và loại nguồn, trang nội dung, menu, ngôn ngữ và bản dịch.
Thiết lập SEO: tiêu đề và meta cho sản phẩm, mô tả collection, kiểm tra JSON-LD sản phẩm và danh sách URL cũ.
Viết unit test cho các hàm lập kế hoạch đồng bộ, chuẩn hóa danh mục, giá theo phiên bản và quy tắc nội dung.
Luồng chính
Khách duyệt theo series, studio hoặc loại nguồn (anime, game, phim), lọc trong collection và xem thông số mô hình ngay dưới khối mua hàng.
Sản phẩm có nhiều phiên bản được bán dưới dạng các biến thể có giá riêng; với hàng đặt trước, khách phải đồng ý điều khoản đặt trước ngay trong giỏ hàng trước khi thanh toán.
Chủ shop sửa trang chủ trong theme editor của Shopify: banner, dải sản phẩm theo tab, ô series và studio, khối giới thiệu và liên hệ.
Công nghệ
- Shopify
- Liquid
- Shopify Admin API
- Next.js
- PostgreSQL
- Prisma
- React
- TypeScript
- Tailwind CSS
- Node.js test runner
Cách mình giải quyết
Bài toán cần giải quyết
Navy Toys bán mô hình và tượng sưu tầm cho khách quốc tế trên Shopify, với 40.000 sản phẩm. Dữ liệu xuất ra từ store lẫn lộn: tên studio và series viết nhiều kiểu, thông số sản phẩm nằm trong mô tả thay vì trường riêng. Giai đoạn đầu, giao diện mới và trang quản trị được dựng trên Next.js. Sau khi cân nhắc phương án thanh toán, khách chọn ở lại Shopify, nên thiết kế đã duyệt phải chuyển thành theme Shopify mà vẫn giữ nguyên các URL đang có thứ hạng tìm kiếm.
Quyết định kỹ thuật
Ở lại Shopify thay vì tự vận hành storefront: thanh toán, đơn hàng và quản trị dùng sẵn của Shopify, không phải duy trì máy chủ riêng.
Mọi script dữ liệu mặc định chỉ chạy thử, cần cờ --apply mới ghi, và bỏ qua phần đã xong nên chạy lại an toàn.
Các khối trang chủ trỏ tới collection theo handle và tới file theo tên, nên cùng một theme dùng được trên store thử nghiệm lẫn store chính.
Giữ handle collection cũ và chỉ đổi luật lọc bên trong, để URL đang có thứ hạng tìm kiếm không đổi.
Bài toán phức tạp
Shopify không tính bộ lọc cho collection quá lớn; theme thay bằng dropdown theo series, studio và loại nguồn dẫn sang collection nhỏ hơn, collection nhỏ vẫn dùng bộ lọc chuẩn.
Ảnh sản phẩm được đẩy lên theo từng đợt có kiểm soát tốc độ để không vượt giới hạn xử lý ảnh của Shopify, sau mỗi đợt có bước rà ảnh lỗi để đẩy lại.
Store thử nghiệm và store chính dùng hai cách cấp quyền API khác nhau, nên script đọc cấu hình theo từng store và luôn in ra store đang ghi.
Sửa lỗi điều hướng trong bản Next.js: trang mới mở ra bị header che tiêu đề do cách router xử lý cuộn mượt, đã kiểm tra lại ở 375, 768 và 1280px.
Kết quả đạt được
Giai đoạn một là bản cửa hàng kèm trang quản trị, nhập cả danh mục từ file xuất của Shopify; đây là bản thiết kế khách đã duyệt. Giai đoạn hai dựng lại thiết kế đó thành giao diện Shopify, chủ shop tự chỉnh được từng khối trên trang chủ. Bộ công cụ tự động cập nhật thông số sản phẩm, bộ sưu tập tự động, trang nội dung, menu và bản dịch, tất cả chạy thử trước khi ghi thật. Giao diện mới đã được đưa lên cửa hàng chính và đang hoạt động.
Điểm nổi bật
Dựng lại thiết kế Next.js đã duyệt thành theme Shopify trên nền Dawn: phần tùy biến tách riêng thành các section, snippet và file CSS/JS, chỉ sửa file gốc của Dawn khi bắt buộc để dễ cập nhật về sau.
Làm sạch danh mục: chuẩn hóa tên studio và series viết nhiều kiểu khác nhau, rút thông số (tỉ lệ, kích thước, số lượng phát hành, ngày phát hành) từ mô tả sang metafield để lọc và hiển thị được.
Bảo toàn SEO: chụp lại toàn bộ URL đang chạy và kiểm tra trạng thái từng URL trước khi chuyển đổi, giữ handle sản phẩm và collection cũ, viết mô tả cho collection để Shopify dùng làm meta description.
Kết nối với mình
Cảm ơn bạn đã ghé thăm góc nhỏ của mình. Rất mong chúng ta sẽ có dịp trò chuyện và hợp tác!
Mình luôn cởi mở với những cuộc trò chuyện về phát triển sản phẩm, ứng dụng AI hay các ý tưởng khởi nghiệp. Cứ thoải mái ném thẳng một tin nhắn cho mình nhé!
Nhận hợp tác chọn lọc · trả lời trong ngày