creating repo and populating readme
This commit is contained in:
commit
2ade5231f1
|
|
@ -0,0 +1,354 @@
|
|||
# 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 login
|
||||
```
|
||||
|
||||
### 5. Development with an existing theme
|
||||
|
||||
Since you're working with an existing theme pulled from Git, you don't need to run `shopify theme init`. Instead, proceed directly to linking your local theme to your development 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 based on your local files.
|
||||
|
||||
> Note: Only use `shopify theme init` if you're creating a brand new theme from scratch.
|
||||
|
||||
### 6. Link your local theme to your development 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.
|
||||
|
||||
### 7. 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)
|
||||
Loading…
Reference in New Issue