Code reference

Everything you need to extend VARAHI without breaking it.

Theme file tree — The theme's file tree in the Shopify code editor

File map

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.

: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;
}

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

: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.

# Concatenate
cat assets/gsap.min.js assets/ScrollTrigger.min.js assets/theme-motion.js > assets/motion.js

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

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

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

<span class="material-symbols-outlined" aria-hidden="true">bolt</span>

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

Get the glyph

From Google Fonts’ Material Symbols, or any Material Symbols set.

Add the name to the subset

Rebuild font-24.woff2 including the new ligature name.

Use it

<span class="material-symbols-outlined" aria-hidden="true">your_name</span>

Adding a custom stylesheet

The safe pattern, so an update does not wipe your work.

Create the file

assets/custom.css

Link it

In layout/theme.liquid, next to the other styles:

<link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">

Keep it small

A separate file is one extra request. If your CSS is under about 5 KB, inline it into the <style> block instead.

Snippets you will use

Snippet	Renders
`product-card.liquid`	A product card for grids
`cart-item.liquid`	A cart line item
`facets.liquid`	Filter controls
`css-variables.liquid`	The design tokens
`customer-form.liquid`	Login, register and address forms
`gift-card-recipient-form.liquid`	Gift card recipient fields

Custom sections

Build your own section from scratch.

Performance

The budgets your custom code has to respect.

Getting Started

Theme Configuration

Sections & Blocks

Features

Going Further

Resources

Code reference

Code reference

File map

The CSS token system

Adding your own token

The JavaScript architecture

Rebuilding the bundle

The theme-motion modules

The icon font

Supported icon names

Using an icon

Adding a custom icon

Adding a custom stylesheet

Snippets you will use

Custom sections

Performance

​Code reference

​File map

​The CSS token system

​Adding your own token

​The JavaScript architecture

​Rebuilding the bundle

​The theme-motion modules

​The icon font

​Supported icon names

​Using an icon

​Adding a custom icon

​Adding a custom stylesheet

​Snippets you will use

Custom sections

Performance

Code reference

File map

The CSS token system

Adding your own token

The JavaScript architecture

Rebuilding the bundle

The theme-motion modules

The icon font

Supported icon names

Using an icon

Adding a custom icon

Adding a custom stylesheet

Snippets you will use