Baggu

A Shopify Multi-Site flowing into a single Sanity instance and back out into 2 unique frontend experiences.

Project Shots

Collections have a Style view which allows you to shop product styles quickly at a glance as opposed to a traditional grid view

Switch from Style to All however opens up the ability to see all products in a collection, it also allows you to enable various filtering that's powered at the theme level

A product landing is actually just a color'd product view, the data like `Standard Baggu` is actually a parent association, images are coming from Shopify but also saved into Sanity for reference, color/print pickers are set up in a Colorway content type

Additional data like details, sustainability, and shipping as well as global upsell types* are set at the Standard Baggu parent level, however ever product inside of Standard Baggu will use this same information, unless explicitly overrode at the product map level.

Cat experience, everything is powered by a cart content type assigned to the current theme, so language, upsells, messaging, shipping thresholds

The wholesale experience has a totally unique experience, while using the same codebase and Sanity dataset, it fetches unique pages/products/theme data

Editing environment

The master theme utility, allows the client to customize various aspects of the default viewing experience, homepage, header, footer, cart and even the global filtering

Product Maps - House the products from both Retail and Wholesale experiences and stitch them together, product maps have many levels of additional data for desc, collabo, collection association, also we track emails for customer applying to be on the waitlist directly in Sanity + Klaviyo.

The Product Landing is the parent association of the many nested products under the same product umbrella, this is where global data is set for products ranging from 10-80 nested products

The product associations are automatically powered by the product sync, these associations are the product maps, so this array handles both retail and wholesale product merchandising

Collections can be merchandised by product landing (faster) or by product map (slightly slower), to ease the pain of adding items one at a time I build a custom search query lookup, it allows you to easily add all items that match a title pattern

Glimpse at the modular components that make up the theme engine, everything under the sun is in the CMS~

About the project

The Baggu team has a rather unique challenge with how products are sync'd & merchandised across multiple Shopify instances. In order to enhance the disjointed experience we opted to stitch data together in a single location, enter Sanity.

Products are sync'd from a wholesale and retail storefront into a single Sanity instance. From there the client has the ability to merchandise many versions of products possible in both experiences. In the sync, we create a master product that allows for unique products to appear as nested variants under a larger category type (example Standard Bag has around ~80 products living inside the Standard Baggu experience). There is a lot of sales channel, merchandising logic happening in GROQ that ensure products are always correctly rendered between the Wholesale and Retail deployments of the experience.

The other large technical solve was for a Theme like experience. Something that I've rarely seen crafted inside of Sanity. The challenge was to build things like: headers, footers, carts, and theme* content types that could easily be enabled/disabled/swapped and even pushed to staging environments. This means the client can build entirely different deployments of the wholesale and retail versions of the website with relatively similar data. I wrote an article about the pattern which you can read here.

Bonus Points

Data syncs into a single function that splits up products into the correct places inside of Sanity, creating products, product maps, product landings, colorways and colorway family associations
Data is removed/sync'd to Algolia and Sanity depending on Sales Channel availability
Modular page builder for pages/collections/products
Navigate between products effortlessly without realizing you're changing product landings when `color picking`
Custom search querying inside of the Sanity studio to give the client the tools they need to merchandise
Custom Filter building at a global level that reduces in complexity as you navigate further into nested collection experiences.
All Product Images + Video is actually served from Shopify as to reduce load on the Sanity experience and leverage some of the Shopify bill. This is handled in a 2 way sync where products are uploaded to both Shopify instances and then saved back

Contributor

Kevin Green

Technical Consultant and Internet Craftsman

Project Shots

Editing environment

Related contributions