🏗️Sections Architecture

The Theme has three types of sections, each outlined below based on their functionality.

Global Sections

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

Click below for a more in-depth breakdown of global sections.

🌎pageGlobal Sections

Dynamic Sections

These are sections that either provide a personalized experience or are linked into Global state for the Shopping Cart or Upsell components. These sections generally have a server side rendered .liquid file which handles the SEO & preloading part, as well as a ./asssets/ .tsx part that renders Preact based components on hydration. Examples are the product or scrollable-images based on recently viewed products. Dynamic sections are also used for any section where nothing needs to be rendered as the page loads initially. Which generally includes smaller snippets for Popup modals that wouldn’t run without JS in any case.

Click below for a more in-depth breakdown of dynamic sections.

🏃‍♂️pageDynamic Sections

Static Sections

These section contain content that is not deeply integrated into user interactivity and not based on dynamic content with a personalized experience.

These sections are always based on a .liquid template with possible snippets that render blocks.

Basic interactivity is done via Vanilla JS, like the slideshow or tabs sections. The Vanilla JS is setup to only manipulate existing HTML elements, and never renders entire components on the client side only.

Click below for a more in-depth breakdown of static sections.

🐢pageStatic Sections