Welcome to the Satoshi Theme documentation! Designed for modern, sleek, and intuitive online stores, Satoshi offers a seamless shopping experience and enjoyable development experience!

🚀 Quick-start Guide

Welcome to Satoshi! This guide will walk you through setup and help you get familiar with the project structure so you can start building quickly.

Prerequisites

Installation Guide

Directory structure

After cloning the Satoshi package, you'll see the following directory structure:

📁 src/
├── 📁 satoshi-theme/
│   ├── ...                            # Overriden theme modules
│   └── 📁 web/
│       ├── ...                        # Static assets (fonts, images, etc)
│       └── 📁 satoshi/                # Main theme development files
└── ...                                # Overridden Magento modules

Satoshi Theme Directory (web/satoshi)

This is where most of your development work occurs, organized as follows:

📁 satoshi/
├── 📁 src/                     # JavaScript/TypeScript source files
│   ├── 📁 data/                # Alpine.js data files
│   ├── 📁 plugins/             # Alpine.js plugins
│   ├── 📁 store/               # Alpine.js stores
│   ├── 📁 utils/               # Reusable utility functions
│   ├── 📄 app.ts               # Alpine.js entry point and definitions
│   └── 📄 global.d.ts          # TypeScript global declarations
├── 📁 theme/                   # Styling files
│   ├── 📁 components/          # SCSS style components
│   └── 📄 app.scss             # Main styling entry point with Tailwind imports
└── 📄 tailwind.config.js       # Tailwind CSS configuration

This architecture separates JavaScript logic (src directory) from styling (theme directory), creating a modular and maintainable codebase.