Criquet Shirts
Product page and collection rebuild — A/B tested · 2025
A rebuilt product page and collection grid for Criquet Shirts: colour swatches across a catalogue where every colour is its own product, quick add inside recommendations, and promo tiles the team places themselves. The new product page won its A/B test against the old one.
The problem
Criquet sells every shirt colour as its own product, not as a variant — so Shopify's built-in swatches couldn't show "this shirt in other colours", and shoppers had to go hunting. The Rebuy recommendation cards had no colour or size choice, and every editorial tile in a collection grid needed a developer to add it.
What I built
I grouped colours by product type, so every product of the same type shows up as a colour of the same style, with only in-stock colours shown. I then rebuilt the product page and replaced the stock Rebuy widgets with a custom template for "Pairs Well With" and "Recommended Products": each card gets the same colour swatches, swaps colour in place, and has its own size picker that adds straight to the Smart Cart. On collection pages, I built promo tiles the marketing team controls from collection metafields — up to five per collection, each with its own position, images, copy and layout.
How it feels to shop
Shoppers see every colour of a shirt right on the product page and can switch between them like variants. Recommendations work like mini product pages: pick a colour, pick a size, add to cart — sold-out sizes are greyed out and the buttons line up across the row. The add-to-cart bar follows you down the page and prompts you to choose a size first.
Result
The new product page beat the old one in a head-to-head A/B test, and the marketing team now places promo tiles in any collection without touching code.
Stack: Shopify, Liquid, JavaScript, Rebuy, Vue (Rebuy templates), Metafields, AJAX Cart API