> ## Documentation Index
> Fetch the complete documentation index at: https://varaahi.vritservicespro.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Code reference
> The complete file map, the CSS token system, the JavaScript architecture and the icon font — for when you need to go beyond the editor.
# Code reference
Everything you need to extend VARAHI without breaking it.
The theme's file tree in the Shopify code editor
***
## File map
```text theme={"system"}
varahi-theme/
`-- assets/
|-- app.js Store + cart API, scroll reveal, header + drawer (~21 KB)
|-- motion.js GSAP + ScrollTrigger + VARAHI choreography (~134 KB, desktop only)
|-- theme-motion.js VARAHI's choreography (source; concatenated into motion.js)
|-- gsap.min.js Vendor: GSAP core
|-- ScrollTrigger.min.js Vendor: GSAP ScrollTrigger
|-- cart-api.js Cart operations
|-- store-api.js Storefront product data
|-- facets.js Filter drawer
|-- pickup-availability.js Store pickup
|-- scroll-reveal.js IntersectionObserver fallback
|-- main.js Header, drawer, cart, anchors
|-- base.css Base styles (source of truth)
|-- favicon.svg
|-- font-*.woff2 Self-hosted subsets
`-- arch-seq-*.jpg Architecture sequence frames
|
`-- config/
|-- settings_schema.json Theme-wide settings
`-- settings_data.json Current values
|
`-- layout/
`-- theme.liquid The one required file
|
`-- locales/
`-- en.default.json All translatable strings
|
`-- sections/ 30 sections
|
`-- snippets/
|-- css-variables.liquid The design system
|-- product-card.liquid The product card
|-- cart-item.liquid The cart line item
|-- facets.liquid Filter controls
|-- customer-form.liquid Customer forms
`-- gift-card-recipient-form.liquid
|
`-- templates/ 12 JSON templates
```
***
## The CSS token system
Every visual decision resolves to a custom property in
`snippets/css-variables.liquid`. This is the file to edit when you want to add your
own tokens or override a fixed one.
```css theme={"system"}
:root {
/* Merchant-overridable — these read from theme settings */
--color-primary-container: {{ settings.color_primary_container | default: "#00f0ff" }};
/* Fixed surface ramp */
--color-surface-container-high: #101824;
/* Type */
--font-display: "Inter", system-ui, sans-serif;
--text-display-lg: 72px;
/* Space, radius, motion, depth */
--space-section-padding: 96px;
--radius-lg: 1rem;
--transition-base: .3s ease;
--z-drawer: 80;
}
```
> [!WARNING]
>
> **Do not hard-code colours in a new section.** Use `var(--color-…)`. A hard-coded `#00f0ff` will not follow your brand when the merchant changes the primary colour.
### Adding your own token
```css theme={"system"}
:root {
--brand-rust: #b4552d;
--brand-rust-soft: rgba(180, 85, 45, .12);
}
```
Then use it: `background: var(--brand-rust-soft);`
***
## The JavaScript architecture
Three bundles, each with a clear job.
| File | Loaded | Job |
| - | - | - |
| `app.js` | Every page | Store API, cart API, scroll reveal, header, drawer, cart |
| `motion.js` | Desktop only, on idle | GSAP, ScrollTrigger, VARAHI choreography |
### Rebuilding the bundle
If you edit a source file, rebuild `motion.js`. The shipped bundle is the unminified concatenation.
```bash theme={"system"}
# Concatenate
cat assets/gsap.min.js assets/ScrollTrigger.min.js assets/theme-motion.js > assets/motion.js
```
> [!WARNING]
>
> The theme loads `motion.js` directly. Edit `theme-motion.js` (and the vendor files only when upgrading GSAP), then rebuild `motion.js`. Never edit a vendor file in place.
### The theme-motion modules
`assets/theme-motion.js` is organised as individually try/caught modules, so one
failure never hides the rest of the page.
| Module | Scope |
| - | - |
| 1 | Global scroll reveals |
| 2 | Hero entrance — story — showcase — buy box |
| 3 | Hero ambient — rotating ring, parallax |
| 4 | PDP entrance (viewport-gated) |
| 5 | Acoustic architecture (viewport-gated) |
| 6 | Companion app (viewport-gated) |
| 7 | ScrollTrigger refresh after fonts settle |
| 8 | Cart drawer checkout pulse |
> [!NOTE]
>
> Every module that touches a specific section is wrapped in a `try`/`catch` whose
> `catch` calls `rescue(...)` — which un-hides anything that was hidden. If GSAP
> throws, the content is still visible. The theme fails open, never closed.
***
## The icon font
VARAHI self-hosts a **5 KB** subset of Material Symbols Outlined, containing exactly
the 44 glyphs the theme uses.
### Supported icon names
```text theme={"system"}
add_circle architecture arrow_back arrow_forward
bolt call check_circle chevron_left
chevron_right close cloud_download collections
delete equalizer expand_more favorite
graphic_eq image language local_offer
local_shipping location_on lock mail
menu open_in_new phone_android phone_iphone
play_circle power replay schedule
search send share shop
shopping_bag shopping_cart smartphone star
star_half tune verified_user zoom_in
```
### Using an icon
```liquid theme={"system"}
bolt
```
> [!WARNING]
>
> If a name is not in the list above, it renders as the **raw word**, not a glyph.
> This is the single most common VARAHI support question. To add a glyph, add it to
> the font subset and rebuild `font-24.woff2`.
### Adding a custom icon
**1. Get the glyph**
From Google Fonts' Material Symbols, or any Material Symbols set.
**2. Add the name to the subset**
Rebuild `font-24.woff2` including the new ligature name.
**3. Use it**
`your_name`
***
## Adding a custom stylesheet
The safe pattern, so an update does not wipe your work.
**1. Create the file**
`assets/custom.css`
**2. Link it**
In `layout/theme.liquid`, next to the other styles:
```liquid theme={"system"}
```
**3. Keep it small**
A separate file is one extra request. If your CSS is under about 5 KB, inline it
into the `