8.9 KiB

Raw Permalink Blame History

Leaders - Shopify Theme

Overview

Leaders is a custom Shopify theme built with Flowbite Pro, a premium UI component library built on top of Tailwind CSS. Developed by Chykalophia, 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

Project Structure
Prerequisites
Getting Started
Development Workflow
Theme Architecture
Customization
Deployment
Troubleshooting
Resources
License
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 (v16 or later)
npm (v7 or later) or Yarn (v1.22 or later)
Shopify CLI (v2 or later)
Git (v2 or later)
A Shopify Partner account and development store

Getting Started

1. Clone the repository

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

2. Install dependencies

npm install

or if you're using Yarn:

yarn install

3. Set up your Shopify development store

If you haven't already, create a development store in your Shopify Partner Dashboard.

4. Connect to your Shopify store

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):

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:

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:

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:

npm run dev

This will:

Compile your assets (CSS, JavaScript)
Start the Shopify CLI development server
Watch for changes and automatically reload the browser

Building for Production

To build the theme for production:

npm run build

This will compile and optimize all assets for production deployment.

Linting and Formatting

Run linting:

npm run lint

Format code:

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:

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 for details.

Deployment

Publishing to Your Store

To publish your theme to your Shopify store:

shopify theme push

Creating a Theme Package

To create a .zip file for manual upload:

shopify theme package

Version Control

Always commit your changes to version control:

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:

shopify logout
shopify login

Asset Compilation Issues

If assets aren't compiling correctly:

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

npm run clean
npm run build

Theme Preview Issues

If the theme preview isn't updating:

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

Resources

License

Contact

For questions or support regarding this theme, please contact:

Peter Krzyzek
Chykalophia
https://chykalophia.com

8.9 KiB Raw Permalink Blame History