OPM Gear
Full-Service Apparel & Gear E-commerce Platform
Built with
Velo Code
A comprehensive custom apparel e-commerce platform built on Wix with advanced Velo code customization. Features dynamic product configuration, real-time pricing, multi-color ordering, and sophisticated cart management.
This project was a pivotal milestone in my development career. Working within Wix Velo's constraints forced me to think creatively and master JavaScript fundamentals at a deep level. Every feature had to be carefully architected within the platform's boundaries.
Skills Sharpened
This project built a strong foundation for custom coding
Platform Limitations
- •No advanced discount logic (tiered pricing, conditional discounts)
- •Cannot generate or download PDFs
- •No Excel/CSV export capabilities
- •Limited artwork generation tools
- •No access to canvas APIs for image manipulation
The Next Chapter
These limitations ultimately pushed me toward full-stack development with Next.js, where projects like Custom Cap BD and US Custom Caps could realize features that were just dreams in Wix Velo - PDF invoices, Excel exports, AI-powered artwork processing, and complex pricing algorithms.
The Velo 12
Core features powered by custom Velo code, each designed to extend Wix beyond its standard capabilities.
Dynamic Product Selector
Advanced cap configuration with real-time filtering
Interactive product configurator allowing customers to select visor shape (curved, flat, slight curved), closure type (snapback, velcro, fitted), crown profile, structure, and panel count. Products filter dynamically based on all selections.
Interactive Store Page
Product catalog with advanced filtering
Full-featured store page with category-based filtering, collection mapping, and product repeaters. Displays pricing tiers, discounts, and availability status in real-time.
Advanced Product Page
Comprehensive product customization interface
Full product page with image gallery, color selection, decoration options, accessories picker, and size/quantity management. All selections sync to session storage for cart persistence.
Live Logo Placement
Visual logo position preview system
Interactive logo decoration system with position selection (Front, Back, Left, Right), size options, and live preview. Supports multiple decoration types including embroidery, 3D puff, leather patch, and more.
Dynamic Pricing Calculator
Real-time cost calculation engine
Sophisticated pricing system calculating costs based on base product, decoration selections, accessories, quantities, and delivery type. Includes factory cost calculations and margin management.
Multi-Color Cart System
Advanced cart with color-based ordering
Unique cart system allowing multiple color selections per product, each with independent size quantities. Uses debounced updates to prevent race conditions and maintains state via session storage.
Color Selection System
Dynamic color swatch management
Color repeater fetching available colors from backend based on product styleId. Supports multi-selection with checkbox states, generates unique order numbers per color selection.
Wholesale Ordering
B2B bulk ordering capabilities
Dedicated wholesale page with bulk ordering features, volume pricing, and quote request functionality. Includes user authentication and member pricing tiers.
Quote Request System
Custom order lightbox forms
Lightbox-based quote request system capturing product selections, customization details, and customer information. Integrates with Wix Users for pre-filled email.
Backend API Layer
Velo .jsw server-side modules
Custom backend modules handling product queries, color image fetching, collection management, and order operations. Secure server-side execution with proper error handling.
Collection-Based Filtering
Dynamic product filtering by attributes
Products filtered by Wix Collections based on cap attributes. Collection map translates user selections to collection IDs for accurate product matching.
Cart Repeater Sync
Real-time cart state management
Advanced cart repeater with debounced updates, size quantity editors, and real-time total calculations. Handles complex state synchronization across color selections.
Powered by Velo
A comprehensive stack leveraging Wix's Velo platform for full-stack JavaScript development within the Wix ecosystem.
Platform
Frontend
Backend
Integration
Screenshots
Visual walkthrough of the key interfaces and features built with Velo code.
Dynamic Product Selector
Interactive cap configurator with visor, closure, profile, and panel options
Store Page
Product catalog with category filtering and collection-based organization
Product Page
Comprehensive product customization with color and decoration options
Logo Placement Preview
Visual logo position selection with live preview capability
Pricing Calculator
Dynamic pricing engine with multi-factor cost calculations
Under the Hood
A glimpse into the custom Velo code that powers the platform's advanced features.
// Update button states based on product availability
function updateButtonStates() {
Object.keys(groups).forEach(group => {
Object.keys(groups[group]).forEach(value => {
const buttonId = groups[group][value];
const button = $w(buttonId);
// Check if products exist for this selection
const hasProducts = allProducts.some(product =>
tempIds.every(cid => product.collections.includes(cid))
);
button.style.backgroundColor = hasProducts ? '#DFE42D' : '#F94515';
});
});
}Buttons change color based on product availability for each selection combination
Project Phases
From initial setup to full deployment, a look at the development journey.
Platform Setup & Learning
Wix site setup, Velo environment configuration, and learning the platform's capabilities and constraints
Landing Page & Product Selector
Dynamic product selector with real-time filtering, button state management, and product gallery
Product Page & Cart System
Advanced product page with decoration system, multi-color selection, and sophisticated cart management
Pricing & Refinement
Cost calculation engine, backend API development, and final optimizations
See Velo Code in Action
Experience the custom-built product configurator, dynamic pricing calculator, and multi-color ordering system on the live site.
