🌎Global Sections

Global sections are loaded via ./layout/theme.liquid. These sections are responsible for complex interactivity and load in Global State management, and handle efficient, deeply nested data loading for products.

Global Sections List

• product-quick-view

• search

• cart-drawer

• gift-with-purchase

• header

• footer

• product-data

• product-recommendations

• predictive-search

Global State

All implemented via Zustand with Immer and loaded via the ./assets/global-stores.tsx.

All Products Data

Warning: We do not recommend that you edit this state. If you do, test thoroughly before deploying.

This state is the most complex of any state within the codebase.

The product-data section pre-loads product data based on an intersection observer and caches products with its nested state (including metafield data and selling plan data) for 15 minutes using the concept of stale while revalidating.

This approach ensures that data loads instantaneously without any loading screens.

All sections that have interactivity with a product, such as variant selector changes, the upsell product algorithm, or cart drawer upsell items, make use of this Global State.

Theme Settings

Theme settings are globally available within all JavaScript via the globalSettings Zustand store.

Any settings set in the Theme Editor are available for Preact and Vanilla JS to access. Examples of these settings are typography, color groups, product card settings.

Cart Drawer

The Cart drawer handles the current state of the slide-out cart, and manages product availability based on what is already added to the Cart.

The Cart Drawer state is also used for Gift with Purchase interactivity, Route Protection products, Pre-order limits, and anything else that needs to know what is currently in the Cart.

There are several apps that need to know the Cart state, or if there was an update to the cart. For that reason, Custom Events are triggered if the cart is changed. In other words, cart events are setup for easy integration.

For easy reference, review ./assets/cart.tsx. This file also includes functions to CRUD manipulate the cart items.

Advanced Localized State

Sections and components that use advanced localized state are:

1. Product Details

2. Product Quick View

3. Featured Product.

These three Sections are all based on the same data model and share the same Preact components to render the Product Details section.

The sections are a mix of static ./snippets/product.{block}.liquid based content and highly dynamic blocks that are rendered via Preact form ./assets/product.{block}.tsx.

For any intention to change product blocks, it is recommended to review the ./assets/product.tsx (or ./assets/product-quick-view.tsx) to see which of the blocks is product dynamic, and which one is static.

Due to the interactive nature, the product gallery block is only rendered on the client to increase the best possible performance scores.

Each Product Details, Quick View, or Featured Product section makes use of local useProduct state management that gets its dynamic data on load from the global useGlobalProducts store.