336 lines
8.9 KiB
Markdown
336 lines
8.9 KiB
Markdown
# 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) |