Case Study: Creating a Modern Website for a Canadian Hair and Skin Care Brand

AG Care is a Canadian leader in professional hair and skincare, offering vegan and cruelty-free products designed for all hair and skin types. As a Shopify Plus merchant, AG Care needed a site that could support both its elevated brand identity and its growth across Canada. To better serve its local customers, AG Care partnered with our team to develop a refreshed Canadian Shopify Plus storefront. The goal was to translate their creative team’s detailed mockups into a mobile-optimized, high-performing website that reflected their values and vision.

Background & Challenge

While AG Care provided complete desktop and mobile mockups, translating these into a Shopify Plus environment required thoughtful execution. The brand had specific expectations around layout behavior, variant handling, metafield usage, and accessibility. Decisions around functionality such as sticky add-to-cart buttons, video support in product image carousels, variant display logic, and embedded reviews needed to be scoped, validated, and implemented in a way that respected both the mockups and Shopify limitations. Collaboration across teams was essential to solve edge cases such as upsell logic, collection filtering, and responsive adjustments for every section.

What They Wanted — and How We Got Them There

  • Their Goal

    The objective was to deliver a brand-aligned Shopify Plus storefront that honored AG Care’s visual identity and elevated the user experience. Key priorities included a mobile-first layout, flexible product page structure, upsell support through metafields, and clean navigation that would scale with the business. The site also needed to integrate with AG Care's existing apps and support dynamic content modules for education, sustainability, and product discovery.

  • Our Solution

    We built the site using a custom Shopify theme based on the Pipeline framework and leveraged Shopify Plus flexibility to accommodate design and app integrations. Brand guidelines were implemented across typography, color, and layout to ensure consistency. The homepage, navigation, and product pages were developed directly from the design files, with special care to ensure scrollable best sellers, continuous ticker tape messaging, and responsive promotional blocks. The PDP featured a sticky add-to-cart on mobile, embedded video support, flexible layout for key product benefits, and expandable tabs for ingredients, FAQs, and product details. Collection pages were enhanced to support variant-level add-to-cart using a radio button selection model. Custom behaviors were implemented for the cart drawer, search drawer, and footer links. We also optimized image size recommendations for future product photoshoots and removed placeholder content throughout.

Results That Moved the Needle

AG Care's Canadian Shopify Plus site now reflects the premium quality of its products and the integrity of its brand. The site is fully responsive, fast, and easy to maintain. Customers enjoy an improved shopping experience with cleaner navigation, quicker access to product education, and more flexible browsing on mobile. The design system is future-ready, allowing AG Care to continue expanding its digital presence while staying consistent with its creative direction and performance goals.

Reach Your Goals & Reclaim Your Time

Let us help you scale while freeing up your time.

Book a Discovery Call