case study


How city’super Rebuilt their Online Store For Customers and Staff

city'super enhances their Shopify store experience for both customers and staff, with a leading omnichannel customer experience and staff CMS.

May 5, 2022
Hong Kong


Shopify Plus

services provided

Shopify Plus UIUX site re-design, UIUX enhancements and optimization, Advanced search and filter, Omnichannel planning and features, Shopify theme customization, Navigation enhancement, Applications and extensions
Since 1996, city'super has been Hong Kong's leading upmarket supermarket. city'super operates stores across Greater China, and offers a premium selection of products from around the world for busy urban professionals who pursue a premium quality of life.

With the goal of enriching customers’ lifestyles by providing innovative shopping experiences, city’super set about expanding its integrated commerce experience. Building on the success of their prior Shopify store, city’super envisioned a new online store that served media-rich visuals to customers, making it easy to shop for seasonal produce and festive occasion specials and highlights. With Wave Commerce, city’super built a new Shopify store designed to showcase its vast inventory of items in an efficient, and easy-to-manage content management system (CMS).

Goal: Ensuring Great Shopping Experiences at Scale

After the initial launch of its Shopify store in 2019, city’super wanted to extend its vision of an online retail experience for customers supported by an optimized retail fulfillment operation. Utilizing the latest Shopify features, city’super wanted to enrich its product pages and redesign its store UI/UX to effectively showcase a range of products with customized categories and a brand menu. In addition, they wanted to provide enhanced store CMS functionalities for internal teams to manage an efficient retail engine. When the time came, city’super engaged Wave Commerce once again to design and implement their new digital storefront experience.

Solution: An Integrated Suite of User-Centric Features

As a retailer handling thousands of products – from fresh seafood to household items – and a multitude of order availability scenarios, city’super needed an online store that could be a central hub for delivering smooth shopping experiences at scale with bespoke features for Hong Kong consumers. Wave Commerce worked with city’super to identify a suitable new store theme, as well as develop a new customer-facing interface and admin CMS features while preserving and extending order handling customizations from its prior Shopify store.

Offering a Fluid Browsing Experience

Based on city’super’s requirements, Wave Commerce customized a Shopify theme that could help online shoppers easily navigate through its inventory, where items could be grouped by brand and categories. To help store visitors find and discover items easily, Wave Commerce developed navigation menus, top picks and highlight collections, as well as brand collections.

Each navigation feature is designed to showcase products in a different way. The hamburger menu helps shoppers more accustomed to lists quickly find the product types they are looking for, while the “mega menu” uses visuals to highlight seasonal items, categories, and brands.

Numerous on-page features also anticipate customers’ needs. For example, shoppers can quickly add items to their cart while browsing. A sticky add-to-cart option on product pages and featured collections save shoppers those extra seconds – sometimes minutes – looking for related products or finding out specific product information.

Making the Store CMS a Breeze

Having a user-friendly CMS to keep store items and promotional campaigns updated is essential. Behind the consumer-facing store, Wave Commerce created an admin interface for city’super staff to manage content blocks, such as a curated set of “top pick” items embedded throughout store pages.

With a custom-built CMS, city’super‘s teams can insert features without any coding to drive sales – from tagging new items to managing visual assets. For example, item images can display a % off badge and pages can include ranking lists or countdown timers. If a marketing team wants to highlight a product with video, they can do so with a video embed directly in the product page.

In addition, the Shopify admin also provides data and insights for campaign performance and sales trends. Instead of just building a standalone online store, city’super has leveraged Shopify as a content management system to develop and iterate retail campaigns with ease.

Accounting for Logistics and Omnichannel Fulfillment Scenarios

Arguably, the most important aspect of online commerce is behind the scenes. How inventory is managed, categorized, and tagged can save staff time when doing bulk item uploads and item groupings. With customized item and store checkout rules, city’super is able to better facilitate order handling and fulfillment.

Creating the right type of logic handling ensures that online store orders are fulfilled correctly every time, even with complex cases and at high volumes. For example, Wave Commerce worked with city’super to create rules for product types, such as ones that are only available for store pickup. By creating these order handling rules, Wave Commerce helped city’super delight customers with convenient online shopping that leads to timely deliveries.

Enabling a Retail Team to Craft Online Store Experiences

With the new online store, city’super’s team can continue to confidently maintain and improve their customers’ online shopping experience. By working closely with city’super’s team to integrate storefront communication and the store’s backend logic for shipping restrictions, Wave Commerce helped city’super anticipate the needs of customers and take their professional customer service online. With the new online store, city’super is able to reach more customers and provide a convenient way for them to buy their favourite products any day, any time.