ShopM2M
- Client
- M2M Menswear
- Role
- Lead Designer / Developer
- Platform
- Shopify
- Year
- 2024
(Overview)
A Shopify store for M2M Menswear, bringing a large catalogue of designer menswear into a cleaner, easier online shopping experience.
M2M Menswear is a family-run shop in Southport that has been selling menswear for over 60 years. The current owners took it on in 2016, and this is its online shop.
The stock is mostly designer labels: Boss, Paul & Shark, Barbour, Gant, Paul Smith and around twenty more. So the label comes first. Brands comes before Clothing in the menu, has its own row on the homepage and sits above the product name on every card.
The shop is open seven days a week, and the site leans on that: free collection in Southport is one of the three promises under the hero.
- UI design
- Shopify theme build
- Collection templates
- Performance tuning
(The build)
With a lot of brands, categories and seasonal stock, navigation and product discovery had to do most of the heavy lifting. I designed and built flexible Shopify collection and product templates, with a strong mobile experience and a structure that can handle the catalogue as it changes.
It's a custom theme, not one from the theme store. The designers row, category tiles and product lists are sections shared between the homepage, brand pages and product pages, and the team can add, move or drop them in the theme editor.
Nearly every product comes in colour and size, and menswear sizing is not one system. On a single brand page the size filter runs from S to XXXL, through collar sizes 14.5 to 20, to trouser waists in short, regular and long legs.
Designers in one line
Discover Our Designers is one row of outlined brand names that scrolls sideways over a thin custom scrollbar. Ten labels take one line, not a wall of logos, and the same row closes each brand page, so the way out of one brand is into the next.
Tiles that step forward
Category tiles are 5:4 photos under a 40% dark wash, so white type reads on any shot. On hover the photo settles back as the text comes forward. On smaller screens the grid becomes a slider, not a long stack.
Brand pages start in stock
Each brand page opens with the label's own story, plus the current offer where there is one, and the products start filtered to what's in stock. Filters cover price, size, colour, category and brand, and Load More keeps you on one page.
Colour, then size
On the product page colour and size are two rows of buttons, not one long dropdown. Sizes that aren't available in the chosen colour stay on screen, greyed out, rather than disappearing.
Built for the next sale
Sales and seasons come round quickly, so each hero slide takes its own phone image: 21:9 on a desktop, a tall 4:6 crop on a phone. That way a campaign doesn't turn up on a phone as a squashed banner.
The announcement bar rotates the current offers, and cards show the was price and a percentage off. That matters here: in September 2026, about three quarters of the catalogue was marked down.
(By the numbers)
- 1422
Products online, September 2026
- 16.5k
Colour and size variants
- 61
Collections
- 41
Countries it ships to
A cleaner Shopify experience built around discovery, helping customers navigate a large designer menswear catalogue without the store ever feeling overwhelming.