# Leaders - Shopify Theme

## Overview

Leaders is a custom Shopify theme built with [Flowbite Pro](https://flowbite.com/pro/), a premium UI component library built on top of Tailwind CSS. Developed by [Chykalophia](https://chykalophia.com), this theme follows Shopify's theme development best practices and leverages modern web development tools for an optimal workflow.

### Key Features

- **ADA/WCAG Compliant**: Built with accessibility in mind, ensuring WCAG compliance
- **Flowbite Pro Integration**: Leverages premium UI components for a polished look and feel
- **Modern Development Workflow**: Uses Tailwind CSS, Webpack, and other modern tools
- **Fully Customizable**: Extensive theme settings and customization options
- **Responsive Design**: Optimized for all device sizes

## Table of Contents

- [Project Structure](#project-structure)
- [Prerequisites](#prerequisites)
- [Getting Started](#getting-started)
- [Development Workflow](#development-workflow)
- [Theme Architecture](#theme-architecture)
- [Customization](#customization)
- [Deployment](#deployment)
- [Troubleshooting](#troubleshooting)
- [Resources](#resources)
- [License](#license)
- [Contact](#contact)

## Project Structure

```
theme/
├── assets/                 # Compiled and static assets
│   ├── theme.css           # Compiled CSS
│   ├── theme.js            # Compiled JavaScript
│   └── ...                 # Other assets (images, fonts, etc.)
├── config/                 # Theme settings
│   ├── settings_data.json  # Theme settings data
│   └── settings_schema.json # Theme settings schema
├── layout/                 # Theme layouts
│   ├── theme.liquid        # Main theme layout
│   └── ...                 # Other layouts
├── locales/                # Translation files
│   ├── en.default.json     # Default English translations
│   └── ...                 # Other language translations
├── sections/               # Theme sections
│   ├── header.liquid       # Header section
│   ├── footer.liquid       # Footer section
│   └── ...                 # Other sections
├── snippets/               # Reusable liquid snippets
│   └── ...                 # Various snippets
├── templates/              # Theme templates
│   ├── index.liquid        # Homepage template
│   ├── product.liquid      # Product template
│   └── ...                 # Other templates
├── src/                    # Source files for development
│   ├── css/                # CSS/SCSS source files
│   ├── js/                 # JavaScript source files
│   └── ...                 # Other source files
├── .shopifyignore          # Files to ignore when uploading to Shopify
├── package.json            # Node.js dependencies and scripts
├── tailwind.config.js      # Tailwind CSS configuration
├── postcss.config.js       # PostCSS configuration
└── webpack.config.js       # Webpack configuration
```

## Prerequisites

Before you begin, ensure you have the following installed:

- [Node.js](https://nodejs.org/) (v16 or later)
- [npm](https://www.npmjs.com/) (v7 or later) or [Yarn](https://yarnpkg.com/) (v1.22 or later)
- [Shopify CLI](https://shopify.dev/themes/tools/cli) (v2 or later)
- [Git](https://git-scm.com/) (v2 or later)
- A Shopify Partner account and development store

## Getting Started

### 1. Clone the repository

```bash
git clone [repository-url]
cd leaders-shopify-theme
```

### 2. Install dependencies

```bash
npm install
```

or if you're using Yarn:

```bash
yarn install
```

### 3. Set up your Shopify development store

If you haven't already, create a development store in your [Shopify Partner Dashboard](https://partners.shopify.com/).

### 4. Connect to your Shopify store

```bash
shopify theme dev --store=your-store.myshopify.com
```

This command will start a local development server and create a temporary theme in your development store.

### 5. Pushing your theme to the store

You can push your theme to your Shopify store in either a published or unpublished state:

#### Push as unpublished (development/staging)

To push your theme to the store without publishing it (keeping it as a draft):

```bash
shopify theme push --unpublished
```

This allows you to review the theme in the Shopify admin before making it live.

#### Push as published (production)

To push and immediately publish your theme as the live theme:

```bash
shopify theme push --live
```

This will replace the current live theme with your local theme.

#### Push to a specific theme

If you want to update an existing theme by ID:

```bash
shopify theme push --theme=123456789
```

You can find the theme ID in the Shopify admin under "Online Store" > "Themes" > "..." menu > "Edit code".

> Note: Always back up your live theme before publishing a new one by exporting it from the Shopify admin.

## Development Workflow

### Local Development

Start the local development server:

```bash
npm run dev
```

This will:
1. Compile your assets (CSS, JavaScript)
2. Start the Shopify CLI development server
3. Watch for changes and automatically reload the browser

### Building for Production

To build the theme for production:

```bash
npm run build
```

This will compile and optimize all assets for production deployment.

### Linting and Formatting

Run linting:

```bash
npm run lint
```

Format code:

```bash
npm run format
```

## Theme Architecture

### Liquid Templates

This theme follows Shopify's Liquid templating system. Key concepts:

- **Layouts**: Define the overall structure of your pages
- **Templates**: Define the structure for specific page types
- **Sections**: Reusable, customizable components that can be added to templates
- **Snippets**: Reusable pieces of code that can be included in other Liquid files

### CSS Architecture

This theme uses Tailwind CSS with Flowbite Pro components:

- Tailwind CSS is configured in `tailwind.config.js`
- Custom styles are in the `src/css` directory
- Flowbite Pro components are integrated and customized as needed

### JavaScript Architecture

- Modern ES6+ JavaScript
- Modular approach with separate files for different functionalities
- Webpack for bundling

### Accessibility

The Leaders theme is built with accessibility as a priority:

- Follows WCAG 2.1 AA standards
- Includes proper ARIA attributes
- Ensures keyboard navigation support
- Maintains sufficient color contrast ratios
- Provides text alternatives for non-text content

## Customization

### Theme Settings

Theme settings are defined in `config/settings_schema.json` and can be modified through the Shopify Theme Editor.

### Tailwind Configuration

Customize Tailwind CSS in `tailwind.config.js`:

```javascript
module.exports = {
  content: [
    './layout/**/*.liquid',
    './templates/**/*.liquid',
    './sections/**/*.liquid',
    './snippets/**/*.liquid',
    './src/**/*.js',
    './node_modules/flowbite/**/*.js'
  ],
  theme: {
    extend: {
      // Custom theme extensions
    },
  },
  plugins: [
    require('flowbite/plugin')
  ],
}
```

### Flowbite Pro Components

Flowbite Pro components can be customized and extended as needed. Refer to the [Flowbite Pro documentation](https://flowbite.com/pro/docs/getting-started/introduction/) for details.

## Deployment

### Publishing to Your Store

To publish your theme to your Shopify store:

```bash
shopify theme push
```

### Creating a Theme Package

To create a .zip file for manual upload:

```bash
shopify theme package
```

### Version Control

Always commit your changes to version control:

```bash
git add .
git commit -m "Description of changes"
git push
```

## Troubleshooting

### Common Issues

#### Shopify CLI Connection Issues

If you're having trouble connecting to your Shopify store:

```bash
shopify logout
shopify login
```

#### Asset Compilation Issues

If assets aren't compiling correctly:

1. Check for errors in the console
2. Verify that all dependencies are installed
3. Clear the cache and rebuild:

```bash
npm run clean
npm run build
```

#### Theme Preview Issues

If the theme preview isn't updating:

1. Hard refresh your browser (Ctrl+Shift+R or Cmd+Shift+R)
2. Check if the Shopify CLI is running correctly
3. Restart the development server

## Resources

- [Shopify Theme Development Documentation](https://shopify.dev/themes)
- [Liquid Documentation](https://shopify.dev/api/liquid)
- [Shopify CLI Documentation](https://shopify.dev/themes/tools/cli)
- [Flowbite Pro Documentation](https://flowbite.com/pro/docs/getting-started/introduction/)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [WCAG Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/)

## License

Copyright © 2025 Chykalophia. All rights reserved.

## Contact

For questions or support regarding this theme, please contact:

**Peter Krzyzek**  
Chykalophia  
[https://chykalophia.com](https://chykalophia.com)