Buffy – Product Page Redesign

A complete, conversion-focused redesign of Buffy’s Shopify product page, a pixel-perfect build from a Figma design, extended across the site theme, with custom animated sections, redesigned tabs and swatches, and a sticky add-to-cart tuned for both desktop and mobile.

Buffy set out to redesign their product page with one clear goal: give shoppers a better experience and convert more of them. The new direction came from a Figma design, and my job was to bring it to life faithfully, a pixel-perfect implementation of the product page and the surrounding theme, built to feel just as polished on a phone as on a desktop.

The Goal

The product page is where the buying decision happens, so the redesign had to do more than look good, it had to guide shoppers toward adding to cart. That meant a cleaner, more engaging layout, clearer product options, and a purchase path that stayed within reach as customers scrolled, all while matching the Figma design exactly across every screen size.

The Solution

I rebuilt the product page and updated the site’s header and footer to match the new design pixel for pixel. Beyond static layout, I built custom Shopify sections with dynamic movement, redesigned the product tabs and variant swatches to feel more tactile and intuitive, and added a sticky add-to-cart so the purchase action is always one tap away. Every piece was carefully tuned for both desktop and mobile.

What I Built

• Pixel-perfect product page. Rebuilt the product page to match the Figma design exactly, on both desktop and mobile.
• Theme updates. Redesigned the site’s header and footer to align with the new look across the storefront.
• Custom sections with dynamic movement. Built bespoke Shopify sections with custom animation and motion to make the page feel alive and engaging.
• Redesigned tabs and swatches. Reworked the product information tabs and variant swatches into a cleaner, more intuitive interface.
• Sticky add-to-cart. Added a persistent add-to-cart section that keeps the purchase action in reach as shoppers scroll.
• Responsive across devices. Made sure the entire experience held up and felt polished on both desktop and mobile.

Tools & Tech

• Platform. Shopify, with custom theme sections built in Liquid.
• Front end. HTML, CSS, and JavaScript, with custom motion and interaction.
• Design. Figma, as the source for the pixel-perfect build.

My Role

I handled the front-end implementation end to end, translating the Figma design into a pixel-perfect product page and theme, building the custom animated sections, tabs, swatches, and sticky add-to-cart, and making sure the whole experience was smooth and consistent across desktop and mobile.