Repository navigation
Whats Included
Anthony Baggett edited this page Nov 21, 2025
·
1 revision
Complete reference of all sections, snippets, templates, and JavaScript components included in VAST.
-
header.liquid- Sticky header with navigation, cart, search, and mobile menu -
footer.liquid- Footer with links and copyright
-
main-index.liquid- Main homepage section -
hero.liquid- Hero section with full-width or split layouts, image positioning, heading, text, CTA buttons -
image-text.liquid- Image with text section, configurable image position (left/right), heading sizes, text alignment -
feature-grid.liquid- Feature grid with icons or images, customizable columns (2/3/4), heading and description per item -
multicolumn.liquid- Multi-column layout with blocks, heading, description, flexible text alignment -
rich-text.liquid- Rich text content section with heading size and text alignment controls -
newsletter.liquid- Newsletter signup form section with heading, description, alignment options -
divider.liquid- Visual divider section with style options (solid/dotted/dashed), color and thickness controls
-
main-product.liquid- Full product page with gallery, variants, pricing, and add-to-cart -
main-collection.liquid- Collection listing with pagination, Quick View support, product prefetching -
featured-collection.liquid- Featured collection showcase with customizable layout, Quick View support -
main-search.liquid- Search results grouped by type (products, articles, pages) -
product-recommendations.liquid- Shopify product recommendations with customizable count, columns, and heading -
recently-viewed-products.liquid- Recently viewed products tracking with localStorage, configurable display options
-
main-blog.liquid- Blog listing with grid layouts (2/3/4 columns, masonry), featured post highlighting, tag filtering -
main-article.liquid- Blog post display with featured image sizing, content width controls, social sharing, related articles -
featured-blog-posts.liquid- Featured blog posts showcase section
-
main-page.liquid- Generic page content -
main-page-contact.liquid- Contact form with validation and breadcrumbs -
main-list-collections.liquid- All collections listing
-
main-cart.liquid- Shopping cart with AJAX updates -
minicart.liquid- Slide-in mini cart with live updates
-
faq.liquid- Collapsible FAQ/accordion section -
modal.liquid- Reusable modal dialog with Alpine.js -
predictive-search-main.liquid- Search overlay -
predictive-search-results.liquid- Live search results
-
main-password.liquid- Password-protected store -
main-404.liquid- 404 error page
Complete SVG icon set including:
UI Icons:
- cart, search, user, close-x, hamburger, spinner, plus, minus, caret, chevron, error, bubble-bottom, trash
Social Icons:
- facebook, instagram, pinterest, snapchat, tiktok, tumblr, twitter, vimeo, youtube
-
alert.liquid- Alert/message component with 5 variants (success/warning/error/info/neutral), dismissible option, icon support -
badge.liquid- Badge component for status indicators, 3 sizes (small/default/large), 5 variants, pill shape option -
btn.liquid- Button component with 6 types (primary/branded/gradient/secondary/destructive/ghost), 3 sizes, full-width option -
form-input.liquid- Form input component supporting 8 input types (text/email/password/tel/number/url/date/textarea) with validation states
-
product-variant-picker.liquid- Smart variant selector with availability tracking -
product-variant-options.liquid- Radio buttons or dropdowns for variants -
product-grid-item.liquid- Product card for grids
-
blog-card.liquid- Blog article card component with featured style and customizable display options -
article-navigation.liquid- Previous/next article navigation with arrows -
article-social-share.liquid- Social sharing buttons (Twitter, Facebook, LinkedIn, Pinterest) -
article-related.liquid- Related articles section with source options (same-tags/same-blog/same-author) -
article-comments.liquid- Article comments display and submission form with pagination
-
header-menu.liquid- Desktop navigation -
mobile-menu.liquid- Mobile menu drawer -
collections-list.liquid- Collection navigation -
pagination-navigation.liquid- Pagination controls -
breadcrumbs.liquid- SEO-optimized breadcrumb navigation with structured data (schema.org/BreadcrumbList)
-
hero.liquid- Hero section content renderer -
divider.liquid- Divider section content renderer -
column-wrapper.liquid- Column layout wrapper utility
-
head-meta.liquid- SEO meta tags, Open Graph, Twitter Cards -
head-css.liquid- Critical CSS and x-cloak styling -
head-scripts.liquid- Inline scripts and design mode detection -
liquid-ajax-cart.liquid- Cart initialization -
font-face.liquid- Font face definitions -
promo-bar.liquid- Promotional banner with scroll-collapse (rendered in header)
-
index.json- Homepage -
product.json- Product detail page -
collection.json- Collection listing -
search.json- Search results -
cart.json- Shopping cart -
blog.json/article.json- Blog pages -
page.json/page.contact.json- Content pages -
list-collections.json- All collections -
404.json/password.json- Utility pages
-
customers/account.liquid- Account dashboard -
customers/login.liquid/register.liquid- Authentication -
customers/addresses.liquid- Address management -
customers/order.liquid- Order history -
customers/activate_account.liquid/reset_password.liquid- Account recovery
-
gift_card.liquid- Gift card display
VAST uses a single-entrypoint architecture with auto-registered components for optimal developer experience and maintainability.
Components are extracted to separate JavaScript files organized by feature area:
src/js/alpine/components/product/ - Product page components
-
productGallery- Variant-aware product image gallery with thumbnail navigation -
priceComponent- Dynamic pricing with flash animation on variant change -
productForm- Add to cart with quantity management and validation -
lightboxZoom- Full-screen image zoom functionality
src/js/alpine/components/collection/ - Collection and search page components
-
collectionSort- Collection sorting controls -
collectionFilters- Advanced filtering interface -
quickViewModal- Quick view modal with product details
src/js/alpine/components/blog/ - Blog page components
-
blogListing- Blog post listing and pagination
src/js/alpine/components/shared/ - Shared components used across multiple page types
-
modal- Reusable dialog management with click-outside-to-close -
variantPicker- Intelligent variant selection with availability tracking -
productRecommendations- Product recommendation display -
recentlyViewedSection- Recently viewed products tracking
All components are automatically registered at startup via src/js/alpine/index.js using Vite's glob imports. Components initialize only when their x-data directive is found in the DOM, providing efficient lazy initialization.
Pass configuration to components via data attributes in Liquid templates:
<div x-data="productGallery"
data-images='{{ product.images | json }}'
data-gallery-layout="{{ section.settings.gallery_layout }}">
<!-- Component markup -->
</div>Global stores provide cross-component state management:
src/js/alpine/stores/
-
global- Mobile menu, minicart, predictive search, promo bar, scroll state, cart data -
recentlyViewed- Recently viewed products tracking with localStorage persistence -
debug- Accessibility debugging utilities for development
src/js/helpers.js
-
emitEvent()- Custom event dispatcher -
fetchHTML()- Async HTML fetching -
throttle()/debounce()- Performance utilities -
truncateLongTitle()- String manipulation - Body class and random number helpers
-
PredictiveSearch- Custom element for live search (inpublic/predictive-search.js)
-
variant:change- Product variant selection -
liquid-ajax-cart:*- Cart operation events -
show-modal/close-modal- Modal controls
-
src/css/base.css- Base element styles -
src/css/components.css- Reusable component classes (.btn,.input-select,.pill-button) -
src/css/utilities.css- Custom utility classes -
src/css/global.css- Non-tree-shaken global styles
-
@alpinejs/collapse- Smooth collapse/expand animations (used in FAQ, promo bar) -
@alpinejs/focus- Focus management for modals and dialogs -
@alpinejs/morph- DOM morphing for dynamic content updates
Configurable via Shopify theme customizer (config/settings_schema.json):
- Logo image upload - Custom logo for header
- Promo bar - Toggle, content, scroll behavior
- Predictive search - Enable/disable search-as-you-type
- Modal configuration - Default title and description
Individual sections have additional settings for:
- Collection selection - Choose which collections to display
- Color schemes - Customize colors per section
- Layout options - Grid columns, image positions, text alignment
- Content blocks - FAQ items, collapsible rows, feature items
- Features Reference - Detailed documentation for all theme features
- Architecture - Understand the project structure and conventions
- Development Guide - Learn about development workflow and tools