# hyva-themes/magento2-default-theme architecture

> Architecture diagram of the GitHub repository hyva-themes/magento2-default-theme, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/hyva-themes/magento2-default-theme
- Repository: https://github.com/hyva-themes/magento2-default-theme

## Overview

Hyvä Default Theme is a Magento 2 storefront theme: it supplies page layouts, PHTML views, styling/assets, and browser-side behavior rather than implementing a standalone commerce backend. The primary shopper journey spans catalog discovery, product configuration, cart and checkout, with account and content features alongside it. The tree documents broad Magento feature coverage; sampled sources establish the standalone JavaScript behaviors, while most template-to-layout wiring is not sampled, so those links are intentionally not asserted.

Main entry points: [`Magento_Catalog/templates/product/view`](https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Catalog/templates/product/view) (Product detail), [`Magento_PageBuilder/web/js/jarallax.js`](https://github.com/hyva-themes/magento2-default-theme/blob/main/Magento_PageBuilder/web/js/jarallax.js) (Page Builder effects), [`Magento_Catalog/templates`](https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Catalog/templates) (Catalog browsing), [`Magento_Cms/templates`](https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Cms/templates) (CMS and widgets)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront presentation"]
  node_theme["Theme registration<br/>[registration.php]"]
  node_chrome["Shared theme UI"]
  node_hyva_ui["Hyvä UI elements"]
  node_cms["CMS and widgets"]
end

subgraph group_commerce["Commerce journeys"]
  node_catalog["Catalog browsing"]
  node_search["Search and filters"]
  node_product["Product detail"]
  node_product_types["Product type options<br/>[configurable.phtml]"]
  node_bundles["Bundle products"]
  node_cart["Cart"]
  node_checkout["Checkout"]
end

subgraph group_engagement["Customer engagement"]
  node_wishlist["Wishlist"]
  node_compare["Product comparison"]
  node_reviews["Product reviews"]
  node_customer["Customer account"]
  node_analytics["Analytics tags"]
end

subgraph group_browser["Browser capabilities"]
  node_pagebuilder["Page Builder effects<br/>[jarallax.js]"]
  node_video["Background video<br/>[jarallax-video.js]"]
  node_slider["Carousel behavior<br/>[glider.js]"]
  node_password["Password strength<br/>[zxcvbn.js]"]
end

node_shopper(("Shopper"))
node_magento["Magento platform"]
node_external_video["Video providers"]

node_magento -->|"registers theme"| node_theme
node_shopper -.->|"browses"| node_catalog
node_shopper -.->|"searches"| node_search
node_shopper -.->|"views product"| node_product
node_shopper -.->|"manages cart"| node_cart
node_shopper -.->|"checks out"| node_checkout
node_catalog -.->|"opens detail"| node_product
node_search -.->|"filters listings"| node_catalog
node_product -.->|"renders options"| node_product_types
node_product -.->|"renders bundles"| node_bundles
node_product -.->|"adds item"| node_cart
node_shopper -.->|"saves items"| node_wishlist
node_shopper -.->|"compares items"| node_compare
node_product -.->|"shows reviews"| node_reviews
node_shopper -.->|"manages account"| node_customer
node_chrome -.->|"uses elements"| node_hyva_ui
node_pagebuilder -->|"extends parallax"| node_video
node_pagebuilder -.->|"loads provider video"| node_external_video
node_cms -.->|"hosts effects"| node_pagebuilder
node_cms -.->|"hosts carousel"| node_slider
node_customer -.->|"checks password"| node_password
node_analytics -.->|"emits tracking"| node_magento

click node_theme "https://github.com/hyva-themes/magento2-default-theme/blob/main/registration.php"
click node_chrome "https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Theme/templates"
click node_hyva_ui "https://github.com/hyva-themes/magento2-default-theme/tree/main/Hyva_Theme/templates"
click node_catalog "https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Catalog/templates"
click node_search "https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_CatalogSearch/templates"
click node_product "https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Catalog/templates/product/view"
click node_product_types "https://github.com/hyva-themes/magento2-default-theme/blob/main/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml"
click node_bundles "https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Bundle/templates"
click node_wishlist "https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Wishlist/templates"
click node_compare "https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Catalog/templates/product/compare"
click node_reviews "https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Review/templates"
click node_cart "https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Checkout/templates"
click node_checkout "https://github.com/hyva-themes/magento2-default-theme/blob/main/Magento_Checkout/layout/checkout_index_index.xml"
click node_customer "https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Customer/templates"
click node_cms "https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Cms/templates"
click node_pagebuilder "https://github.com/hyva-themes/magento2-default-theme/blob/main/Magento_PageBuilder/web/js/jarallax.js"
click node_video "https://github.com/hyva-themes/magento2-default-theme/blob/main/Magento_PageBuilder/web/js/jarallax-video.js"
click node_slider "https://github.com/hyva-themes/magento2-default-theme/blob/main/Magento_PageBuilder/web/js/glider.js"
click node_password "https://github.com/hyva-themes/magento2-default-theme/blob/main/web/js/zxcvbn.js"
click node_analytics "https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_GoogleTagManager/templates"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_theme,node_chrome,node_hyva_ui,node_cms toneBlue
class node_catalog,node_search,node_product,node_product_types,node_bundles,node_cart,node_checkout toneAmber
class node_wishlist,node_compare,node_reviews,node_customer,node_analytics toneMint
class node_pagebuilder,node_video,node_slider,node_password toneRose
class node_shopper,node_magento,node_external_video toneIndigo
```

## Components

### Storefront presentation

- [Theme registration](https://github.com/hyva-themes/magento2-default-theme/blob/main/registration.php): `registration.php`
- [Shared theme UI](https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Theme/templates): `Magento_Theme/templates`
- [Hyvä UI elements](https://github.com/hyva-themes/magento2-default-theme/tree/main/Hyva_Theme/templates): `Hyva_Theme/templates`
- [CMS and widgets](https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Cms/templates): `Magento_Cms/templates`

### Commerce journeys

- [Catalog browsing](https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Catalog/templates): `Magento_Catalog/templates`
- [Search and filters](https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_CatalogSearch/templates): `Magento_CatalogSearch/templates`
- [Product detail](https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Catalog/templates/product/view): `Magento_Catalog/templates/product/view`
- [Product type options](https://github.com/hyva-themes/magento2-default-theme/blob/main/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml): `Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml`
- [Bundle products](https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Bundle/templates): `Magento_Bundle/templates`
- [Cart](https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Checkout/templates): `Magento_Checkout/templates`
- [Checkout](https://github.com/hyva-themes/magento2-default-theme/blob/main/Magento_Checkout/layout/checkout_index_index.xml): `Magento_Checkout/layout/checkout_index_index.xml`

### Customer engagement

- [Wishlist](https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Wishlist/templates): `Magento_Wishlist/templates`
- [Product comparison](https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Catalog/templates/product/compare): `Magento_Catalog/templates/product/compare`
- [Product reviews](https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Review/templates): `Magento_Review/templates`
- [Customer account](https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_Customer/templates): `Magento_Customer/templates`
- [Analytics tags](https://github.com/hyva-themes/magento2-default-theme/tree/main/Magento_GoogleTagManager/templates): `Magento_GoogleTagManager/templates`

### Browser capabilities

- [Page Builder effects](https://github.com/hyva-themes/magento2-default-theme/blob/main/Magento_PageBuilder/web/js/jarallax.js): `Magento_PageBuilder/web/js/jarallax.js`
- [Background video](https://github.com/hyva-themes/magento2-default-theme/blob/main/Magento_PageBuilder/web/js/jarallax-video.js): `Magento_PageBuilder/web/js/jarallax-video.js`
- [Carousel behavior](https://github.com/hyva-themes/magento2-default-theme/blob/main/Magento_PageBuilder/web/js/glider.js): `Magento_PageBuilder/web/js/glider.js`
- [Password strength](https://github.com/hyva-themes/magento2-default-theme/blob/main/web/js/zxcvbn.js): `web/js/zxcvbn.js`

### Other components

- **Shopper**
- **Magento platform**
- **Video providers**

## Connections

- Magento platform → Theme registration: registers theme (evidence: `registration.php`)
- Shopper → Catalog browsing: browses
- Shopper → Search and filters: searches
- Shopper → Product detail: views product
- Shopper → Cart: manages cart
- Shopper → Checkout: checks out
- Catalog browsing → Product detail: opens detail
- Search and filters → Catalog browsing: filters listings
- Product detail → Product type options: renders options
- Product detail → Bundle products: renders bundles
- Product detail → Cart: adds item
- Shopper → Wishlist: saves items
- Shopper → Product comparison: compares items
- Product detail → Product reviews: shows reviews
- Shopper → Customer account: manages account
- Shared theme UI → Hyvä UI elements: uses elements
- Page Builder effects → Background video: extends parallax (evidence: `Magento_PageBuilder/web/js/jarallax-video.js`)
- Page Builder effects → Video providers: loads provider video
- CMS and widgets → Page Builder effects: hosts effects
- CMS and widgets → Carousel behavior: hosts carousel
- Customer account → Password strength: checks password
- Analytics tags → Magento platform: emits tracking