Hannes Rœther

Hannes Roether’s headquarters is a converted distillery where the old and the new intertwine. The previous online store did not live up to the brand’s standards and character. Moving Primates rebuilt it using a headless architecture, with collection pages that can be customized rather than all looking the same.

A brand that combines retro and modern styles

Hannes Roether’s headquarters are located in Pliening, in a former schnapps distillery. Rather than being demolished, the building was renovated, leaving the existing structure visible and blending it with contemporary elements. This is most evident in the facade, where three old steel tanks hang like canopies over the windows against the black wood. The renovation by Bogevisch's Office received an honorable mention in the BDA’s “Über Oberbayern 2024” architecture award.

This principle isn’t just architecture—it’s the brand. Hannes Roether has been designing men’s clothing since 2004, and Nicky Wendt has been expanding the women’s line since 2007; both work with the same passion. Chunky knits, cashmere, and German leather in winter; fine knits, cotton-silk blends, and cool linen in summer. Traditional, high-quality materials, timeless silhouettes, and surprising details. Old and new, retro and modern—not juxtaposed, but intertwined.

A store for this brand has to do the same thing. It has to display merchandise on a screen where you can't touch anything, and it can't look like every other fashion store.

The store and the brand were separate

The old store was hosted on its own subdomain, separate from the brand website. The catalog was flat; every category was listed at the same level under `/collections/`—some simply under a number like `/collections/251`—and there was no nesting by women’s, tops, or blouses. Above all, however, every collection page looked exactly like every other one. Three columns, each tile the same size, one product next to the next, row after row all the way to the bottom of the page.

That's true for fast fashion. For a brand whose entire focus is on materials and composition, it's the opposite of what it does in the store. Not everything is displayed side by side in the same size.

It all started in the back

The relaunch isn't the start of our partnership—it's the second phase. Since 2024, our middleware, Hydropop, has been running in the background at hannes roether, integrated with the merchandise management system ProMode, from which it supplies the sales channels with products, variants, and master data. Customers didn't see any of this, and that was exactly the point. A design that lives up to its promise.

The old shop ran on Debut, a free standard theme from Shopify that had been customized for hannes roether. The brand’s typography was already in place there, set in Serif Gothic, a typeface that Herb Lubalin and Tony DiSpigna designed in 1972, drawing inspiration from Lubalin’s Avant Garde. However, the overall framework remained that of a standard theme, and it offered no solution to the question of how to display cashmere on a screen.

The relaunch therefore began with workshops that resulted in a design for desktop and mobile that takes the brand’s visual language seriously rather than forcing it into a grid. The typography takes a step back to its roots. The new shop is set in ITC Avant Garde Gothic, the geometric typeface that Lubalin and Tom Carnase developed in 1970 from his title lettering for the magazine Avant Garde. The typeface evokes the 1970s, yet remains contemporary in its layout and composition—the same principle as at the headquarters. And the name reappears in the shop with the ligature in Rœther, as on the previous brand page, whereas the old shop had left it out.

Along with the design came rules that no one has questioned since: product images in a 4:6 aspect ratio, cutouts on a specified background color with a 17 percent margin around the subject, and source material with approximately 20 megapixels. Twenty megapixels sounds excessive for a website. But it isn’t when someone needs to zoom in on a product page far enough to see the stitch pattern of a knitted item.

By the time the relaunch took place in 2025, the data layer was already in place. The design didn’t have to wait for an interface, and the new front end could be built from day one using real product data instead of placeholders. What would normally take up the first half of the project was already complete here.

The ERP Connection

ProMode is the leading master data system used by hannes roether. This is where items, variants, colors, and sizes are created. Hydropop imports this catalog into Shopify and creates products and variants, complete with their options, metafields, and sales channels. Sanity receives one master data document per product. When a new product is added, a command in Sanity creates the product page, retrieves the name, generates the URL, links the page to the master data record, and publishes it—either individually or for all new products at once.

The catalog includes the additional data that the store needs for its functions. One example is the color filter. ProMode provides three pieces of information for each color: the hex value, the retail name, and the color group. In practice, the retail name is tornado/tornado, whereas the color group, on the other hand, dark blue. The product name isn't ideal for a filter because hardly anyone searches for "Tornado." Hydropop processes both and provides the color groups that make up the filter, while the color dot displays the exact hex value from the ERP rather than an approximation generated in the front end.

Day-to-day operations also depend on this connection. Hydropop handles orders, fulfillment, inventory, refunds, and invoices, ensuring that the online store and the inventory management system are in sync—not just when it comes to the product catalog.

A store that is part of the brand

The design was implemented as a standalone front end in Next.js and runs on Vercel. Shopify runs in the background for the shopping cart, checkout, and orders; the entire user interface comes from our own front-end build.

For the brand, this means, first and foremost, that the online store is once again part of the main domain. When customers click on a product, they are no longer redirected to a third-party subdomain. And the structure finally aligns with the navigation. Blouses can be found under /women/tops/blouses, a shirt underneath /men/tops/shirts/vi29site-3072. What the customer sees in the menu is also displayed in the address bar.

No More Monotonous Layouts

This is the heart of the project. For most online stores, a collection page is simply a list of items. Products appear in the order specified by the system, with each tile the same size and each image cropped identically. Anyone who wants to change this needs a developer.

On hannes roether’s site, the collection page is a design area in Sanity, underpinned by a fixed grid system. On desktop, it has four columns; on smartphones, two. A tile occupies one column, two columns and two rows, or—on the desktop—the full width, and in each of these sizes, the image maintains a 4:6 aspect ratio. The editorial team decides which image appears where and in what size; the system maintains the aspect ratio.

A model shot can be displayed large and then sets the tone for the page, while a cropped image next to it remains small. Products are displayed in the order they were uploaded, and if an image is missing, it is uploaded right there on the spot. This creates a page that resembles a display more than a list—most clearly on the home page for women. It’s exactly the difference the brand makes in-store but hasn’t been able to make online until now.

Take pictures once instead of over and over again

Design flexibility creates a related problem. Once an image appears sometimes large, sometimes small, sometimes landscape, and sometimes portrait, not every photo fits everywhere anymore. Until now, this meant the brand had to take new photos for every new format.

That is why the images themselves contain information about their possible uses. When an image is uploaded, details are recorded about which formats and uses it is suitable for, and the image pipeline then automatically processes it and scales it to the appropriate image format. Each image is uploaded only once, in full resolution.

Three roles are permanently assigned. One is for the shopping cart, checkout, and order emails, where a different design is used than on the product page. A model shot for display in the grid. And a separate gallery for the product page, which may vary by variant. Where nothing is specified, the default assignment applies, ensuring that no space is left empty.

This makes the existing content reusable rather than one-time use. A new campaign page doesn't require new production; instead, it uses a different selection from what's already available.

Control between ERP and the screen

For this to work, inventory management and the image layer must be clearly separated yet still connected. The images run over the same connection as the catalog but do not belong to the ERP. They are stored in Hydropop, where they are uploaded in batches or directly to the product, assigned alt text and roles, and scaled by the image pipeline for every resolution and zoom level. A change in the inventory management system does not overwrite any image assignments, and anyone who replaces an image does not modify any master data.

The import from ProMode initially creates an image structure that makes sense for inventory management but not for an online store. In Hydropop’s Asset Configurator, this structure is replaced once with a dimension that derives its values from the ERP’s product data—in the case of hannes roether, this is the color. The image slots are thus determined by the variants provided by ProMode, rather than being created manually. Where a single variant is to differ, it is assigned separately, and the system indicates that it differs from its group.

For a new collection, this means that no one has to upload and enter images one by one anymore. Using the Asset Importer, the editorial team uploads an entire folder to Hydropop, and Hydropop adds the images itself.

Editorial Team Without Developers

Everything that happens around the products is handled by Sanity. For Hannes Roether, we built thirteen custom modules, including a banner grid for campaign landing pages, a collection teaser, a split layout with a floating column, a content grid, a store locator with a map, an FAQ with jump links, and a Klaviyo form. Reusable blocks are stored centrally, so that any change takes effect wherever the block is embedded.

Editing is done via visual editing directly in the preview. Clicking on an element in the store opens the corresponding form; changes appear immediately in the draft and remain visible internally until publication. This also works on the live site itself: anyone logged into Sanity can see the editable elements there and jump to the corresponding editor with a single click. Even those unfamiliar with content models can still see what they’re doing, and a version history tracks who changed which field and when. Speaking of history—Sanity also looks to the future with content releases, so employees don’t have to publish content on holidays or weekends. The latest highlight of our Sanity setup: server-side A/B testing, including analytics data.

Relocation Without Interrupting Operations

The store moved from the subdomain to the main domain, and in the process, every single URL changed; for example, categories went from /collections/blusen according to /women/tops/blouses. We've set up a complete redirect mapping for the existing site and stored it in the CMS, where the editorial team can maintain it themselves, while the old subdomain in Shopify remains the primary domain for checkout. The sitemap and robots.txt are also generated from the CMS, and content marked as "noindex" is automatically excluded.

What the Store Can Do Today

Create a collection page that doesn't look like a list. Display one model shot in a large format and the cropped version next to it in a smaller size. Use an existing image in a different size and with a different crop without having to take new photos. Upload the images for a new collection as a folder. Today, the editorial team does all of this themselves.

And when you're shopping, you can filter by color and size, zoom in on the fabric, add items to your wish list, and find the nearest store on the map.

Old building, new use. The same rules now apply to the shop as to the distillery, and since August 10, 2026, it has been operating under www.hannesroether.de.