Skip to content

Features Reference

Jump to bottom
Anthony Baggett edited this page Nov 21, 2025 · 1 revision

Features Reference

Complete documentation for all features included in VAST.

AJAX Cart

The theme uses Liquid AJAX Cart v2 for cart functionality.

Features

  • AJAX add-to-cart - Add products without page refreshes
  • Slide-in minicart - Live updates with smooth animations
  • Automatic synchronization - Cart state synced across all UI components
  • Event-driven updates - All cart UI responds to cart changes automatically
  • Quantity adjustments - Modify quantities from both cart page and minicart
  • Processing states - Visual feedback during cart operations (loading spinners, disabled states)

Implementation Details

  • Cart state initialized via liquid-ajax-cart.liquid snippet
  • Minicart section (sections/minicart.liquid) shows/hides automatically on cart changes
  • Product form component listens to liquid-ajax-cart:request-start/end events for loading states
  • Global store synchronizes cart data across components

Migration Note

v2 has API differences from v1. If you're familiar with Liquid AJAX Cart v1, see the migration guide.

Predictive Search

Shopify's predictive search is included with a custom web component implementation.

Features

  • Live search-as-you-type - Results appear instantly with 300ms debouncing
  • Custom web component - PredictiveSearch element (public/predictive-search.js)
  • Grouped results - Results organized by product type
  • Keyboard navigation - Arrow keys to navigate, Enter to select, Escape to close
  • ARIA-compliant - Full accessibility support with proper roles and labels
  • Overlay display - Opens in full-screen overlay with escape-to-close

Configuration

Enable/disable: Via theme customizer settings (Settings → Search)

Customize text: Section settings allow customizing prompt text

Remove entirely: Delete the reference in layout/theme.liquid and remove the predictive-search section

Technical Details

  • Shopify API: Uses Shopify's native /search/suggest API endpoint
  • Web Component: Implements HTMLElement custom element for encapsulation
  • Results rendering: Results render in predictive-search-results.liquid section
  • State management: Alpine store controls overlay visibility

Quick View Modal

View product details without leaving collection pages.

Features

  • Instant loading - Products prefetched on hover for zero-delay opening
  • Full product details - Gallery, variants, price, description, add-to-cart
  • Variant selection - Full variant picker with availability logic
  • Image gallery - Thumbnail navigation and zoom support
  • AJAX add-to-cart - Add to cart directly from modal without closing
  • Keyboard accessible - Full keyboard navigation and escape-to-close

How It Works

  1. Prefetching: When hovering over a product card, the theme fetches product HTML in the background
  2. Caching: Fetched product data is cached to prevent duplicate requests
  3. Instant display: When clicking "Quick View", content loads instantly from cache
  4. Modal component: Uses the shared modal.liquid component with Alpine.js state management

Implementation

Sections using Quick View:

  • main-collection.liquid - Collection listing page
  • featured-collection.liquid - Featured collection sections

Related files:

  • snippets/product-card.liquid - Product card with Quick View button
  • Alpine component: src/js/alpine/components/collection/quickViewModal.js

Recently Viewed Products

Automatic product tracking with localStorage persistence.

Features

  • Automatic tracking - Products automatically saved when viewed
  • Persistent storage - Uses localStorage to persist across sessions and page loads
  • Configurable limit - Control how many products to track (default: 10)
  • Duplicate prevention - Same product won't appear multiple times
  • Current product exclusion - The current product doesn't appear in its own "Recently Viewed" section

How It Works

  1. Track on view: When a user visits a product page, the product handle is saved to localStorage
  2. Fetch details: The section fetches full product details using Shopify's product recommendations API
  3. Display section: Products display in a carousel or grid layout

Setup

Add to product template:

  1. In Shopify Admin, go to Online Store → Themes → Customize
  2. Navigate to a product page
  3. Click Add section → Select Recently Viewed Products
  4. Configure settings (heading, products to show, layout)
  5. Save

Files:

  • Section: sections/recently-viewed-section.liquid
  • Alpine component: src/js/alpine/components/shared/recentlyViewedSection.js
  • Alpine store: src/js/alpine/stores/recentlyViewed.js

Product Recommendations

Shopify's native recommendation engine with customizable display.

Features

  • Native Shopify API - Uses Shopify's built-in recommendation algorithm
  • Related products - Shows products related to current product
  • Complementary products - Suggests items frequently bought together
  • Configurable display - Control number of products, layout, and heading
  • Carousel support - Optional carousel layout for many recommendations

How It Works

Shopify's recommendation API analyzes:

  • Product tags and collections
  • Purchase history patterns
  • Product relationships
  • Customer browsing behavior

The API returns personalized product recommendations automatically.

Setup

Add to product template:

  1. In Shopify Admin, go to Online Store → Themes → Customize
  2. Navigate to a product page
  3. Click Add section → Select Product Recommendations
  4. Configure settings (heading, products to show, algorithm)
  5. Save

Files:

  • Section: sections/product-recommendations.liquid
  • Alpine component: src/js/alpine/components/shared/productRecommendations.js

Breadcrumb Navigation

SEO-optimized breadcrumb navigation with structured data.

Features

  • Automatic generation - Breadcrumbs generated based on current page context
  • Structured data - Includes schema.org/BreadcrumbList for SEO
  • Homepage link - Always includes link back to homepage
  • Collection context - Shows collection → product hierarchy when available
  • Dynamic styling - Fully customizable with Tailwind classes

SEO Benefits

Breadcrumbs help search engines understand your site structure and can appear in search results as "breadcrumb rich snippets", improving click-through rates.

Implementation

Add to templates:

The breadcrumbs.liquid snippet can be included in any template:

{% render 'breadcrumbs' %}

Recommended templates:

  • Product pages (templates/product.liquid)
  • Collection pages (templates/collection.liquid)
  • Article pages (templates/article.liquid)
  • Static pages (templates/page.liquid)

Files:

  • Snippet: snippets/breadcrumbs.liquid

Enhanced Blog System

Complete blog system with modern features.

Features

  • Featured posts - Highlight important articles with featured flag
  • Grid layouts - Multiple layout options (list, grid, masonry)
  • Social sharing - Built-in share buttons for social networks
  • Related articles - Show related content based on tags
  • Comment system - Shopify native comment integration
  • Reading time - Estimated reading time display
  • Author information - Display author name and avatar
  • Tag filtering - Filter articles by tags
  • Search - Built-in blog search functionality

Blog Sections

main-blog.liquid - Blog listing page with:

  • Grid/list layout toggle
  • Pagination
  • Featured article spotlight
  • Tag filter sidebar

main-article.liquid - Individual article page with:

  • Full article content with Tailwind Typography (.prose styling)
  • Author information
  • Social sharing buttons
  • Related articles
  • Comment section
  • Previous/next navigation

Setup

Blog features are configured in the theme customizer:

  1. Online Store → Themes → Customize
  2. Navigate to Blog pages or Article pages
  3. Configure section settings (layout, featured posts, related articles, etc.)

Modal System

Reusable modal component for dialogs and overlays.

Features

  • Alpine.js powered - Reactive state management
  • Keyboard accessible - Full keyboard support with escape-to-close
  • Focus trapping - Focus locked inside modal while open (via @alpinejs/focus)
  • Backdrop dismiss - Click outside modal to close
  • Smooth animations - Enter/leave transitions
  • Flexible content - Supports any content (forms, product details, images)

Usage

The modal component is shared across multiple features:

  • Quick View product modal
  • Newsletter signup
  • Age verification
  • Custom dialogs

Files:

  • Snippet: snippets/modal.liquid
  • Alpine component: src/js/alpine/components/shared/modal.js

Form Components

Reusable form elements with consistent styling.

Available Components

Button (snippets/btn.liquid):

  • Multiple styles: primary, secondary, branded, outline
  • Loading states
  • Icon support
  • Full accessibility

Input (snippets/form-input.liquid):

  • Text inputs, email, password, number
  • Label and placeholder support
  • Error state styling
  • Required field indicators

Newsletter (snippets/newsletter.liquid):

  • Email capture form
  • Shopify marketing integration
  • Success/error messages
  • Configurable styling

Usage in Liquid

{% render 'btn',
  text: 'Add to Cart',
  style: 'branded',
  type: 'submit'
%}

{% render 'form-input',
  type: 'email',
  name: 'email',
  label: 'Email Address',
  required: true
%}

Next Steps

← Back to Home

Clone this wiki locally