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

Developer 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 project, you'll see the following directory structure:

📁 app/
├── 📁 code/
│   └── 📁 Satoshi/
│       └── ...                             # Overridden Magento modules
├── 📁 design/
│   └── 📁 frontend/
│       └── 📁 Satoshi/
│           ├── 📁 Hyva/
│           │   ├── ...                     # Overriden theme modules
│           │   └── 📁 web/
│           │       ├── ...                 # Static assets (fonts, images, etc)
│           │       └── 📁 satoshi/         # Main theme development files
└── ...

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.

Core components

Now that you understand Satoshi's directory structure, let's explore the core components and functionalities available for development: