Skip to main content

Baits Retail Site

The Baits.com e-commerce retail site built on BigCommerce Stencil platform with the Roots Theme.

Site Information​

  • URL: https://www.baits.com
  • Platform: BigCommerce Stencil
  • Theme: Roots Theme v1.7.14 by Weizen Young
  • Theme Base: Cornerstone v6.1.1
  • Repository: Z:\Repos\baits

Key Features​

E-Commerce Features​

  • Fully Responsive design for mobile, tablet, and desktop
  • Mega Navigation with multi-column dropdowns
  • Multi-Tiered Sidebar Menu for category browsing
  • Quick Add to Cart functionality
  • Advanced Quick View product modal
  • Product Comparison Table
  • Complex Search Filtering with faceted navigation
  • Customizable Product Selector with custom options
  • Cart Suggested Products for cross-selling
  • Persistent Cart functionality
  • One Page Checkout
  • Product Videos support
  • High-Res Product Images with zoom
  • Enhanced E-commerce tracking
  • CSRF Protection

Custom Features​

  • Slideout Variant Selector - React-based modal for color/pattern selection
  • Custom Swatches with image patterns and intelligent sorting
  • Swiper Carousels for featured products, related products, and brand promotions
  • BazaarVoice Reviews integration with shadow DOM styling
  • Sezzle Payment integration for buy-now-pay-later
  • Custom Product Templates for Baits-specific layouts
  • Responsive Product Grids with adaptive layouts
  • Lazy Loading images for performance optimization

Payment & Checkout​

  • Major credit cards (Visa, Mastercard, American Express, Discover)
  • PayPal
  • Sezzle (buy-now-pay-later)
  • Account payment methods v2

Technical Stack​

Core Technologies​

  • BigCommerce Stencil CLI: v8.10.4
  • Template Engine: Handlebars v4
  • JavaScript: ES6+ with Babel transpilation
  • CSS Preprocessor: SCSS/Sass
  • Module Bundler: Webpack 5
  • Task Runner: Grunt
  • Node.js: v20 (specified in .nvmrc)

Key Dependencies​

  • jQuery: v3.6.1
  • Foundation Sites: v5.5.3
  • Stencil Utils: v6.15.1
  • Swiper: v11.1.15
  • Lodash: v4.17.21
  • SweetAlert2: v9.17.2
  • Slick Carousel: v1.8.1
  • Lazysizes: v5.2.2

Theme Customization​

The Roots theme includes extensive customization options through the BigCommerce control panel:

  • Colors: Header, navigation, body, footer, text colors
  • Typography: Font families, sizes, weights
  • Layout: Grid settings, sidebar configurations
  • Navigation: Mega menu settings, link alignment
  • Product Display: Image sizes, grid layouts, badge styles
  • Homepage: Carousel settings, featured sections
  • Footer: Newsletter, social links, payment icons

Repository Structure​

Z:\Repos\baits\
├── assets/
│   ├── dist/               # Compiled JavaScript bundles
│   ├── icons/              # SVG icon assets
│   ├── img/                # Image assets
│   ├── js/                 # JavaScript source files
│   │   ├── theme/
│   │   │   ├── baits/      # Custom Baits-specific modules
│   │   │   ├── cart/
│   │   │   ├── common/
│   │   │   ├── global/
│   │   │   ├── product/
│   │   │   └── roots/
│   │   ├── app.js          # Main entry point
│   │   └── polyfills.js
│   ├── lib/                # Third-party libraries
│   ├── scss/               # Sass stylesheets
│   │   ├── baits/          # Custom Baits styles
│   │   ├── common/
│   │   ├── components/
│   │   ├── layouts/
│   │   ├── roots/
│   │   ├── settings/
│   │   ├── tools/
│   │   └── theme.scss
│   └── slideout-variant-selector/  # React variant selector module
├── config/                 # Grunt task configurations
├── lang/                   # Language translation files
├── meta/                   # Theme metadata
├── templates/              # Handlebars templates
│   ├── components/
│   │   ├── account/
│   │   ├── cart/
│   │   ├── common/
│   │   ├── faceted-search/
│   │   ├── products/
│   │   │   └── baits/      # Custom product templates
│   │   └── search/
│   ├── layout/
│   └── pages/
├── config.json             # Theme configuration
├── Gruntfile.js           # Grunt task runner
├── package.json
├── schema.json            # Theme settings schema
├── webpack.common.js      # Webpack base config
├── webpack.dev.js         # Development build config
└── webpack.prod.js        # Production build config

Support Resources​