Hợp nhất Shop, nội dung & gói thuê bao trên một nền tảng

Vấn đề

Blue Ocean tìm đến bọn mình với mong muốn rõ ràng: hiện đại hóa và đơn giản hóa hệ thống hiện tại. Ở thời điểm đó, sự hiện diện online được tạo thành từ nhiều hệ thống tách rời nhau: một Shopware-5-Shop cũ cho thương mại điện tử và một website TYPO3 riêng cho nội dung như tạp chí, bài báo chí, gói đăng ký, sticker và các ưu đãi khác – phân tán trên hai domain khác nhau.

Cấu trúc này hình thành theo lịch sử phát triển, nhưng kéo theo nhiều thách thức. Người dùng phải chuyển qua lại giữa các domain trong suốt hành trình, khiến Customer Journey trở nên phức tạp không cần thiết. Đồng thời, các chủ đề như đa ngôn ngữ, thiết lập theo quốc gia (Đức, Áo, Thụy Sĩ) và mở rộng tính năng cũng chỉ triển khai được với mức linh hoạt hạn chế.

Về mặt kỹ thuật cũng còn nhiều dư địa để tối ưu: thiết lập SEO chưa đồng bộ sạch sẽ, dữ liệu có cấu trúc (schema.org) chỉ có một phần, hiệu năng chưa tối ưu và Core Web Vitals chưa phát huy hết tiềm năng. Thêm vào đó, cả Shopware 5 lẫn TYPO3 về lâu dài đều không còn là nền tảng bền vững – do End of Life và support dần kết thúc.

Vì vậy, điểm xuất phát đã rất rõ: nội dung giá trị thì nhiều, mô hình sản phẩm và subscription rất mạnh – nhưng lại bị phân tán trên nhiều hệ thống, tạo ra độ phức tạp không cần thiết cho người dùng và khả năng mở rộng kỹ thuật bị giới hạn.

Trước đó

Giải pháp

Cùng với team Blue Ocean, bọn mình đã đưa ra một quyết định chiến lược rõ ràng: tất cả hệ thống cần được hợp nhất, hiện đại hóa và nâng cấp lên một kiến trúc bền vững cho tương lai.

Nền tảng cốt lõi là migration từ Shopware 5 sang Shopware 6. Đồng thời, bọn mình chủ động chọn cách tiếp cận headless với Shopware Frontends. Backend vẫn chạy trên Shopware, còn frontend được triển khai bằng Nuxt và Vue – nhanh, linh hoạt và có thể tùy biến theo nhu cầu.

Một phần trung tâm của dự án là gom toàn bộ nội dung về một mối. Thay vì một trang TYPO3 riêng, giờ bọn mình dùng một headless CMS tên Strapi, nơi các nội dung như magazine, bài báo chí, stickercards và nhiều nội dung khác có thể được quản trị theo cấu trúc rõ ràng. Nhờ headless setup, mọi thứ trông như được làm đồng bộ – trên một domain, không bị đứt gãy trải nghiệm.

Dựa trên đó, bọn mình đã:

• phát triển thiết kế mới cho homepage, category, product pages, subscription & checkout
• triển khai nhất quán branding, hệ màu và thế giới thương hiệu của Blue Ocean
• xây dựng lại toàn bộ luồng subscription
• tích hợp hệ thống quảng cáo nội bộ cho khách hàng E2B (các slot quảng cáo trên nhiều trang)

Ngoài ra, SEO kỹ thuật, schema.org, tối ưu performance và một tracking setup đầy đủ qua Google Tag Manager cũng được triển khai – bao gồm cookie consent, Google Analytics và Shopware Analytics.

Sau đó

Kết quả

Hiện tại, Blue Ocean sở hữu một nền tảng hiện đại, tập trung, kết nối hoàn hảo giữa shop, nội dung và marketing.

Giao diện mới mang lại:

• Customer Journey được đơn giản hóa rõ rệt
• toàn bộ nội dung và sản phẩm trên một domain
• tốc độ tải tốt hơn và Core Web Vitals được tối ưu
• cấu trúc SEO sạch sẽ, bao gồm schema.org đầy đủ
• mô hình subscription linh hoạt và khả năng quảng cáo nội bộ

Chỉ một thời gian ngắn sau khi relaunch, Google Search Console đã cho thấy những tín hiệu tích cực đầu tiên: ít lỗi kỹ thuật hơn, thứ hạng tốt hơn và lượng click tăng lên.

Điểm giá trị nhất là nền tảng kỹ thuật mới: nhờ headless approach với Shopware, Nuxt, Vue và Strapi, Blue Ocean giờ linh hoạt hơn rất nhiều. Nội dung mới, feature mới hoặc mô hình kinh doanh mới có thể triển khai nhanh hơn – không còn bị ràng buộc bởi các cấu trúc CMS hay shop kiểu truyền thống.

Quá trình hợp tác trong nhiều tháng diễn ra rất sát sao, có cấu trúc và mang tính đối tác. Vì vậy bọn mình càng vui hơn khi hôm nay có thể giới thiệu một shop tạo nền tảng vững chắc cho sự tăng trưởng tiếp theo của Blue Ocean – về mặt kỹ thuật, thẩm mỹ và chiến lược.