BallinKit Docs
Back to Site

Ballinkit Pro Theme — Comprehensive Guide

Ballinkit Pro is an enterprise-grade, high-performance athletic & apparel WooCommerce WordPress theme powered by Tailwind CSS v4 and Elementor. It ships with 14+ custom Elementor widgets, 24 pre-built page template variants, dynamic color theme systems, customer address management, and a 1-click full demo content seeder.

Free Download: Ballinkit Pro is available for direct download in the Customer Downloads Portal without requiring a commercial license key.

Core Features & Architecture

  • Tailwind CSS v4 Engine: Built on the modern CSS-first Tailwind v4 architecture (located at assets/css/main.css) for blazing-fast page load times and zero runtime CSS bloat.
  • Elementor Ready: 14+ custom native Elementor widgets tailored specifically for sports apparel, team gear, product showcases, and interactive hero banners.
  • 24 Pre-built Page Templates: Multiple variants for Home, Shop, Single Products, Cart, Checkout, Collections, Contact, and Thank You pages.
  • 1-Click Demo Content Seeder: Complete programmatic page and layout generator (class-page-seeder.php) that builds fully editable Elementor pages with one click.
  • Dynamic Color Theming: Customizer palette management supporting dynamic primary, secondary, and accent color swatches with instant dark mode support.
  • Customer Address Book: Integrated modern customer address management system for seamless repeat sports kit and team orders.

Theme Installation & Setup

Step 1: Download Theme Package

Download ballinkit-pro.zip directly from the Customer Downloads section.

Step 2: Install via WordPress Admin

  1. Log in to your WordPress Dashboard as an Administrator.
  2. Navigate to Appearance > Themes > Add New > Upload Theme.
  3. Choose ballinkit-pro.zip from your computer and click Install Now.
  4. Once installed, click Activate.

Step 3: Install Required & Recommended Plugins

Ensure the following plugins are installed and activated for full theme functionality and layout building:

  • Elementor: (v3.0+) Required — Visual page builder for editing templates and theme widgets.
  • WooCommerce: (v6.0+) Required — Core eCommerce, product catalog, cart, and checkout engine.
  • Ultimate Addons / Elementor Header & Footer Builder (UAE / HFE): Required — For designing, editing, and managing custom dynamic header and footer layouts.
  • Ballin Simple Plugin: (Optional) For player name & jersey number customization with dynamic add-on pricing.
  • BallinKit Customizer: (Optional) For the full interactive 3D jersey and apparel customizer studio.

1-Click Demo Content & Page Seeder

Ballinkit Pro includes an intelligent automated page generator (inc/class-page-seeder.php). It seeds all essential pages as native, editable Elementor templates:

Running the Seeder

  1. Go to Appearance > Ballinkit Setup (or Theme Options > Demo Setup).
  2. Click Seed Demo Pages & Templates.
  3. The system creates:
    • Homepage variants (Home v1 Sports Grid, Home v2 Hero Video, Home v3 Minimalist)
    • Shop Catalog variants (Shop v1 Modern Sidebar, Shop v2 Full-Width Filter)
    • Product Page templates (Product v1-v4)
    • Checkout and Cart optimized flows (Cart v1/v2, Checkout v1/v2)
    • Collections, About Us, and Contact Us pages

Custom Elementor Widgets (14 Widgets)

Ballinkit Pro registers dedicated widgets inside the Elementor editor under the "Ballinkit Widgets" category:

Hero & Banners

  • Ballinkit Hero: Fullscreen hero with CTA & badge
  • Ballinkit Hero Split: Dual-column media + promo showcase
  • Ballinkit Hero Video: Ambient background video header

Commerce & Products

  • Ballinkit Products: Dynamic query product grid
  • Ballinkit Featured: Promoted product highlight banner
  • Ballinkit Collections: Lookbook & seasonal apparel card grid
  • Ballinkit Categories: Visual category cards with badge

Social Proof & Content

  • Ballinkit Blog Grid: Editorial athletic articles
  • Ballinkit Testimonials: Athlete & customer reviews carousel
  • Ballinkit Stats: Performance counters & trust numbers
  • Ballinkit About / Contact: Interactive contact & bio blocks

Navigation & Layout

  • Ballinkit Header: Custom sticky navigation with cart trigger
  • Ballinkit Footer: Multi-tier footer with newsletter integration

Theme Options & Customizer Controls

Customize global theme branding under Appearance > Customize > Ballinkit Theme Options:

  • Brand Colors: Set Primary Accent, Hover State, Dark Mode Backgrounds, and Text Highlights.
  • Header Layout: Toggle Announcement Bar, Sticky Navigation, Search Modal, and Quick Cart preview.
  • Typography: Configure heading fonts, body text weights, and Google Font pairs.
  • Social Channels: Connect Instagram, YouTube, TikTok, Facebook, and Discord links.

Tailwind CSS v4 Customization & Building

If you wish to modify the raw CSS utilities or build custom styles:

# Navigate to the theme directory
cd wp-content/themes/ballinkit-pro

# Install dependencies
npm install

# Compile Tailwind CSS v4 in watch mode
npm run dev

# Build minified production stylesheet
npm run build
Previous KIT_API Next Ballinkit Simple Theme