Shopify variants linked to separate product pages · 2024
BAOBAB International
A custom-coded Shopify variant picker that links separate products together behind one colour swatch selector, built and tested across BAOBAB's Colombian and international storefronts.
Problem
BAOBAB sells the same products in several colors, but each color lived on a separate product page. Shopify's built-in variant picker can't link variants to separate products, so a shopper viewing one color had no way to reach the others — a dead end on every product. It also had to behave identically on two separate storefronts.
Solution
We custom-coded a Shopify variant picker that treats each color as its own product and links them behind a single colour swatch selector. Click a swatch and you land on that product's page, with the right image and price. It is hand-written Liquid and JavaScript rather than an app, so it fits BAOBAB's exact catalog setup and carries no monthly fee, and we built and tested it on both the Colombian and international stores. When a few product-upload errors came up along the way, we sorted them out the same day.
Result
Shoppers can move between colours in a single click on both storefronts, and the whole feature was delivered in about two weeks — shaped around how BAOBAB's catalog actually works rather than forced into an off-the-shelf variant app.
Built with
- Shopify
- Liquid
- Custom code
- CSS