Responses by Rally.

Background: Boundary Supply specializes in durable, sustainably-created packs and apparel. The site is the primary destination for exploring and purchasing its line of products.

This redesign was timed around the launch of a new product via Kickstarter. While the primary driver was the redesign and new functionality on the site, a secondary benefit was the ability to fulfill Kickstarter rewards through a secondary site running the same codebase.

Design core: The site is designed around large, impactful features with Swiss-style typography. A minimal, monochromatic color scheme was chosen to emphasize photography. A modular approach was taken with the design, creating different content modules that could be used in different contexts or included/excluded as needed across the site.

In addition to the core e-commerce functionality of the site, the top priority was building a bundle configurator, enabling customers to bundle compatible products for discounts.

Favorite details: We’re proud of the distinctive visual style that we brought to the site and how successful the modular design system is. We’re also proud of the subtle animation and motion touches that we were able to execute.

Challenges: Building such a highly custom site on Shopify was challenging at times, as we sometimes had to work around the system in order to achieve the results that we wanted. For instance, Shopify has a 100-variant limit on products on their platform, which can be too restrictive for pants—all combinations of waist, length, fit and color can easily number more than 100. We created a system for tying together multiple separate products on the back end so that we could present a pair of pants on a single product detail page.

Navigation structure: We wanted to maintain a simple navigation structure, ensuring that users can quickly get to individual product detail pages. All navigation menus are administered via Shopify’s CMS so that they can grow and change over time as the company’s needs change.

Special features: We designed and built multiple ways of featuring individual products or content on either the home page or product listing page, ensuring that Boundary Supply could easily promote particular products or new pages as needed.

Technology: The site is running on Shopify, and uses Shopify’s Liquid template language, as well as CSS and vanilla JavaScript. The modular design system we employed relies on the “metafields” feature of Shopify’s platform, designating specific Liquid snippets, JavaScript and CSS for each module. We also created a Shopify app to help manage all the custom features of the site, from custom content to pack bundles.

Alternative approach: Some aspects of the site design may have been simpler to execute as a React-based site that interacted with Shopify via APIs, so that might have been an interesting approach to explore further. However, we were able to remain on Shopify’s hosting with our current solution.