Office Art & Design Shopify store case study – ongoing development of a live premium online store

The Office Art & Design Shopify store is not a website that was built once and left unchanged. It is a live premium office furniture store whose evolving products, prices, variants, campaigns and brands call for regular improvements, while the shopping experience must remain stable and easy to understand throughout.

In the project, Shopify Habitat theme customisation, navigation, product cards, collection and product pages, pricing and variant logic, and mobile usability have all evolved over several rounds. Alongside design and development, my work now also covers the store's ongoing technical and content maintenance.

The project and my role

The Office Art & Design's online store offers premium office furniture, ergonomic task chairs, desks, lounge furniture and accessories. Its brands include Herman Miller, HAY, Muuto, Knoll, NaughtOne and Colebrook Bosson Saunders.

My task went beyond producing a design concept. I needed to adapt the Shopify theme while preserving its editability and bringing the store closer to Office Art's visual standards and real business processes. In practice, this involved Liquid, CSS and JavaScript changes, organising product data, mobile testing and regular content updates.

The real challenges

Not every product in a range like this follows the same logic. Some need one clear price and a few options; others have multiple configurations, sizes, colours or setups. Certain products cannot yet show a public price, so instead of an empty or misleading amount, they need a clear “Price coming soon” state.

The project's main practical challenges were:

• multi-brand navigation: making many categories and brands easy to scan;
• different product types: presenting simple and configurable products consistently without losing accuracy;
• price communication: handling fixed prices, starting prices and temporarily unavailable prices consistently;
• product cards: coordinating the brand, price, badge, colour options and hover states;
• a live store: rolling out improvements in a reversible, testable way while business continued;
• mobile usability: adapting a large desktop menu to smaller screens with its own interaction logic.

The Habitat theme and navigation

The store is built on Shopify's Habitat theme, but the standard theme could not fully accommodate the entire range on its own. The desktop header, full navigation and mega menu went through several rounds of custom refinement. For example, the mega menu's promotional area was expanded from five items to six, accommodating more featured categories or campaigns without breaking the layout.

The mobile drawer could not simply be a squeezed-down desktop menu. Expandable sections, main categories and promotional blocks needed separate handling so users would not lose their place within multi-level navigation. The announcement bar and header were also visually aligned with the rest of the theme.

Product cards, pricing and swatches

Product cards are among the most frequently seen elements in a store, so many small decisions matter here. The brand, product name, price, optional badges and available colours needed to be balanced without competing for attention, while still giving visitors enough information to choose the right product.

Separate logic on cards and product pages handles regular prices, starting prices and products without a final public price. An earlier automatic price multiplier also had to be removed because it no longer produced reliable results with the actual product data. The goal was always to make every displayed price traceable and consistent.

Aeron variants and product data

A Herman Miller Aeron is a good example of why an attractive product page is not enough. Several finishes, sizes and equipment setups exist, and each must have the correct SKU, variant and price. A small discrepancy can result in the same configuration appearing at different prices, or leave the customer unsure which version they are choosing.

Checking product data is therefore not a one-off upload. Comparing A, B and C sizes, setups and their prices is part of ongoing maintenance. The storefront logic can only be reliable if the data stored in the admin is consistent too. This kind of quality control may be less visible than a new hero section, but it directly affects the store's usability and credibility.

Mobile usability and ongoing maintenance

A collection grid, colour selector or mega menu that works on desktop can become crowded on mobile. The drawer, product cards, buttons, longer product names and variant selection therefore received separate mobile testing. The aim was not to apply one global CSS patch but to keep important purchasing actions clear on small screens.

The project continued after launch: new products and categories are added, temporary features are hidden or highlighted, product pages and prices are updated, and alternative URLs, 404s and indexing signals are monitored in Search Console. Ongoing maintenance means keeping the store visually and technically consistent as it changes.

Results and lessons learned

The result is a Shopify store better suited to a premium, multi-brand product range and adapted to Office Art's actual operations rather than constrained by the off-the-shelf theme. The mega menu, collection pages, product cards, variant logic and mobile interface now work as parts of one system.

The store received a special award in the Webshop of the Year competition. I see this not as the result of any single impressive feature but as feedback on the way product structure, visual quality and usability support a strong online presence together. The main lesson, however, is that a store is not finished forever on launch day: a good system also needs to handle future changes. If you're considering a similar store or website, the website design pricing guide and services pages can help you explore your options.

FAQ

What Shopify tasks were part of the Office Art & Design project?

Customising the Habitat theme; rebuilding desktop and mobile navigation; refining product cards, prices, badges and swatches; organising collection and product pages; and providing ongoing content and technical maintenance.

Why was product and price presentation complicated?

The range includes simple and configurable products with different pricing models. The interface needed to handle starting prices, “Price coming soon” states, variants and SKU-specific setups clearly.

Why did the work continue after the store launched?

Because products, prices, campaigns and navigation change constantly in a live online store. The project therefore also includes regular maintenance, product-data checks, smaller improvements and mobile testing.

What was an important piece of external feedback on the project?

The Office Art & Design store received a special award in the Webshop of the Year competition. This recognised the store's overall presentation and its practical business functionality.

Summary

The Office Art & Design project shows that Shopify development is rarely just about building a new homepage. The theme, navigation, product data, pricing logic, variants and mobile usability all depend on each other. Good visuals become a useful business tool when the system behind them is consistent too.