VANTA Developer Reference

VANTA v1.1.0 documentation

Home · Getting started · Commerce OS · Catalog · Integrations · Performance / SEO / Accessibility · Developer reference · Launch checklist · Troubleshooting · Buyer guide · Changelog · Support

VANTA Developer Reference

This reference is for developers, agencies and advanced merchants maintaining VANTA after handoff.

Architecture

VANTA is a Shopify Online Store 2.0 theme. Merchant-facing structure is composed from JSON templates, Liquid sections/snippets, theme settings and small progressive-enhancement JavaScript modules.

Primary files

  • layout/theme.liquid — global document shell, metadata, styles, routes and scripts.
  • assets/vanta.css — base design system and layout.
  • assets/atelier.css — premium editorial presentation layer.
  • assets/vanta-commerce-os.css — Commerce OS interface styles.
  • assets/vanta.js — core storefront interactions and cart/product behavior.
  • assets/atelier.js — premium dialogs, predictive search, quick view, wishlist and visual interactions.
  • assets/vanta-commerce-os.js — compare, filters, cart intelligence, fit, bundles and recently viewed.
  • snippets/product-card.liquid — reusable product card.
  • snippets/vanta-commerce-os.liquid — Commerce OS global UI/configuration.
  • sections/main-product-vanta.liquid — modular PDP.
  • sections/main-collection-vanta.liquid — collection grid and filters.
  • sections/main-search.liquid — search results and filters.
  • sections/main-cart-vanta.liquid — cart page.
  • sections/recommendations-vanta.liquid — Shopify Product Recommendations rendering.
  • sections/app-zone-vanta.liquid — generic app-block insertion point.

Theme settings

Global settings live in config/settings_schema.json and their current/preset values in config/settings_data.json. VANTA includes visual settings plus Commerce OS switches for compare, AJAX filters and complimentary-shipping target.

Product-page extension points

The main product and Featured Product sections expose Shopify @app blocks and Custom Liquid. Prefer these extension points over editing core section files.

JavaScript event strategy

Interactions use delegated events where possible so AJAX-replaced markup keeps working. Collection/search filtering replaces only the filter-page section and aborts stale requests. Cart operations use Shopify Ajax Cart endpoints.

Local browser storage

  • Wishlist: local device/browser storage.
  • Compare: local device/browser storage.
  • Recently viewed: local device/browser storage.

Do not market these as account-synchronized features without adding a backend service.

Product URLs and section rendering

Variant/option updates use Shopify-rendered section responses rather than rebuilding product pricing and availability entirely in client JavaScript. This keeps Shopify as the source of truth.

Preorder flag

VANTA recognizes the tag preorder and boolean metafield vanta.preorder. Theme behavior is presentation-only; inventory/payment rules remain external to the theme.

Fit Assistant

The assistant is intentionally rule-based. It uses a configured product option (default: Size) and does not perform body scanning or probabilistic sizing.

Bundle block

The block posts multiple variant IDs through Shopify Ajax Cart. Real bundle inventory decomposition and bundle-specific pricing require Shopify Bundles, Functions or another compatible backend.

Accessibility requirements when extending

  • Keep all interactive controls keyboard accessible.
  • Keep visible focus states.
  • Every form control needs a unique ID and matching label.
  • Every meaningful image needs appropriate alt text.
  • Honor prefers-reduced-motion.
  • Do not introduce color-only state communication.

Performance rules when extending

  • Do not add parser-blocking third-party JavaScript.
  • Use Shopify image filters and explicit sizes.
  • Do not lazy-load the actual LCP image.
  • Avoid nested product/variant loops in large catalog sections.
  • Prefer app blocks and deferred scripts over global snippets injected on every page.
  • Re-run Lighthouse after adding apps or custom tracking.

Safe update workflow

  1. Duplicate the current customized VANTA theme.
  2. Apply code updates to the duplicate.
  3. Reapply custom code in isolated commits/patches.
  4. Test home, collection, search, product, cart, gift card and contact templates.
  5. Verify app blocks.
  6. Publish only after QA.