Rolleston Square - a Drupal 11 retail centre site with an interactive Mapplic store locator

Rolleston Square is the biggest retail centre in Selwyn District. We migrated the site from ageing WordPress to a modern Drupal 11 build with a Mapplic-powered interactive store map, a news section, and easy-to-edit content.

Rolleston Square is *the* shopping centre for the Selwyn District near Christchurch - 40-plus specialty shops covering food and restaurants, fashion, gifts and homewares, health and beauty, banking and services, plus everyday anchors like Woolworths and The Warehouse. The site is the public-facing front door for shoppers looking for a specific store, a place to eat, or what's on that weekend, and it's the digital home that the centre's management company Colliers uses to keep the community informed.

After many years on an ageing WordPress platform, the site had hit the point where updates were slow, navigation was starting to creak, and the visual design was showing its age. Colliers asked BlueFusion to modernise the experience for visitors and to make it much easier for the management team to keep store information, categories and news current.

We rebuilt the site from the ground up on Drupal 11. The priorities were clear: make it fast, make it easy to edit, and make it obvious for a visitor to find what they're looking for and make it work on mobile devices. Stores are modelled as content with structured fields - logo, categories, opening hours, contact details, location - so the same piece of store content drives the directory listings, the category pages, the homepage feature tiles, the interactive map and the store detail page. Editors update the store in one place and the change flows everywhere.

The standout feature is the interactive centre map, built using Mapplic. Rolleston Square is actually two adjacent blocks (RS East on Masefield Drive and RS West on Rolleston Drive), so the map lets visitors see the whole centre at a glance, pan and zoom, and click any tenancy to jump straight through to the store's page. Tying the map pins to the same store content type that drives the directory means no duplicate data entry for editors - add a location once, and the map and tennant stay in sync with the directory automatically.

Alongside the store directory and map, we added a news and events section so Colliers and the centre's tenants can surface what's happening - new menu launches, seasonal events, special offers, school-holiday activities. Each article is taggable (News, Offers, Events) and shows on the homepage teaser row so the site stays feeling fresh between visits.

The front-end theme is custom-built with TailwindCSS and AlpineJS for a lean, fast, mobile-first experience. The site is hosted on Upsun with Cloudflare in front for edge caching, TLS and protection. We handle ongoing content updates, platform patching and minor site tweaks for the client, and also run Google Ads to drive shoppers to the centre.

 

Under the hood

  • Drupal 11
  • Custom component-based theme with TailwindCSS and AlpineJS
  • Mapplic for the interactive centre map, driven by the same store content type as the directory
  • Structured store content type with category taxonomy (Food & Restaurants, Gifts & Home, Health & Fitness, Services, Style & Beauty)
  • News & Events section with tagging (News, Offers, Events)
  • Upsun hosting with Cloudflare in front
  • Ongoing content updates, platform updates and support from BlueFusion
  • Google Ads campaign management
Is your company working with Drupal?

Register so you can upload case studies and your company profile