commit 2ade5231f1122fa7b947fc8ba75efbe5ca996c1b Author: Peter Krzyzek Date: Sat Mar 1 20:31:53 2025 -0600 creating repo and populating readme diff --git a/README.md b/README.md new file mode 100644 index 0000000..98423fc --- /dev/null +++ b/README.md @@ -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) \ No newline at end of file