---
title: App Development | Shopware Community Hub
description: >-
This section provides a practical guide to developing custom Shopware apps,
including setup, configuration, and implementation of app features with a…
canonical_url: 'https://hub.shopware.com/learn/unit/app-development'
---
# App Development
- Understand the process of **installing and managing** Shopware apps.
- Learn how to extend Shopware functionality through custom app development.
- Gain **practical experience** in creating and implementing app-based customizations.
# App Development
## Creating a Custom App
This tutorial is on creating a custom app in Shopware to enhance your storefront. Today, we’ll guide you step-by-step through the entire process—from setting up an app to customizing its functionality. In this example, we’ll demonstrate how to **customize button styles on product display boxes** using an app extension. Let’s dive in!
### Exploring Documentation
First, refer to the documentation to understand how to create an app.
- Navigate to [Guides > Extensions > Apps](https://developer.shopware.com/docs/guides/plugins/apps/app-base-guide.html).
- Open the app-based guide to find details about the app file structure. This structure is where your custom app will reside. At the core of every app is the **manifest file** that defines your app. Without it, Shopware won’t recognize your app.
### Before Creating the App
Before you create your first app, make sure your Shopware environment is already set up and working correctly.
This video assumes that the installation steps from the previous learning units are complete and that your local Shopware project is running successfully.
At minimum, verify the following:
- Shopware is installed and running locally
- Your database connection works
- `bin/console` can be executed in your current environment
- The PHP environment that runs `bin/console` provides the required extensions such as `mbstring`, `intl`, and `xml`
If your Shopware setup connects directly to MySQL/MariaDB from that PHP environment, database support (for example `pdo_mysql`) must also be available there.
You can verify the loaded extensions with:
```bash
php -m | grep mbstring
php -m | grep intl
php -m | grep xml
php -m | grep pdo_mysql
```
Important: The relevant PHP is not always your host system PHP. In Docker-, devenv-, or Nix-shell-based setups, the important part is the PHP environment in which you actually run `bin/console`.
If you use WSL with Docker, devenv, or a Nix shell, make sure you run `bin/console` in the same environment/container that has access to your Shopware project and database.
### Setting Up a New App
Now, let’s create a new app using the Shopware CLI.
1. **Open the terminal**: Navigate to your working project directory. In this case, it’s called **Shopware**.
2. **Run the command**:
```bash
bin/console app:create
```
3. Shopware will prompt you to provide app details:
- App name: `Button Color Change`
- Label, description, author, copyright, version, icon path, and license information.
Once the details are entered, Shopware generates a folder structure for your app with a basic manifest file.
Don’t install the app yet since no functionality has been added. Choose "no" when prompted.
### Viewing the Created App
After creating the app:
- Refresh your admin panel. The new app, **Button Color Change**, is listed under **My Extensions**.
- In your project editor, navigate to:
`Custom > Apps > Button Color Change > Manifest File`. This is the foundation of your app’s structure.
### Adding Custom Styling
Next, let’s customize the button styling.
1. Refer to the [plugin styling guide](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/styling/add-custom-styling.html#add-custom-styling) to understand the general `base.scss` idea.
Styling works in a similar way for apps. The important difference is the file path. You will see the app-specific path in the next step.
2. **Folder Structure**:
Custom styling files for a regular app can be placed in the following directory: `[app_root]/Resources/app/storefront/src/scss`.
Shopware Apps use a different folder structure than Plugins.
- Apps: `[app_root]/Resources/app/storefront/src/scss`
- Plugins: `[plugin_root]/src/Resources/app/storefront/src/scss`
Make sure you use the **App path** shown above.
3. In the `scss` folder, create the `base.scss` file to define the button styles. Add CSS to style the button with a blue background, white text, and a matching blue border.
Shopware apps can add storefront styling in two different ways:
- **Regular app**: The app does not contain a `theme.json` file. As long as the app is active, Shopware can include the app's storefront files.
- **App as a theme**: The app contains a `Resources/theme.json` file. Shopware treats the app as a theme, and the styling only becomes visible when that theme is assigned to a sales channel.
For a small styling change, the regular app approach is usually simpler. Use the theme approach when the app should provide a selectable theme or control storefront template and style loading through `theme.json`.
### Option A: Use the App as a Regular App
For this example, you can keep the app as a regular app. Do not create a `theme.json` file.
When the app is active, Shopware can include `Resources/app/storefront/src/scss/base.scss` during the storefront theme compilation. This means the app can add the button styling without becoming a separate theme.
### Option B: Use the App as a Theme
If you want the app to behave like a selectable theme, create a `theme.json` file in the app's `Resources` folder (`[app_root]/Resources/theme.json`).
Use this approach only when you want to assign the app theme to a sales channel. In a theme app, Shopware reads the storefront loading order from `theme.json`. The `views` section defines which template namespaces are available and in which order they are loaded. The `style` section defines which SCSS entry points are compiled for the theme and in which order they are compiled.
Once the app contains a `theme.json` file, the `style` section controls which SCSS entry points are compiled for the theme. Therefore, add your `base.scss` file to this section explicitly. Otherwise, your theme can be recognized by Shopware, but your custom styling might not be loaded by that theme.
A minimal configuration can look like this:
```json
{
"name": "ButtonColorChange",
"author": "Your Name",
"views": [
"@Storefront",
"@Plugins",
"@ButtonColorChange"
],
"style": [
"@Storefront",
"app/storefront/src/scss/base.scss"
]
}
```
The `@Storefront` entry is important. It keeps the normal Storefront styles in the style chain. The `app/storefront/src/scss/base.scss` entry loads your app theme's custom styling. Without `@Storefront`, your app theme can replace the base Storefront styling instead of extending it. Without your `base.scss` entry, your custom button styling will not be part of this theme.
### Installing and Activating the App
Once your files are set up, install and activate the app.
1. Open the terminal and run:
```bash
bin/console app:install ButtonColorChange
bin/console app:activate ButtonColorChange
```
2. Confirm the installation: Check under **My Extensions** in the admin panel. You should see the app listed and activated.
### Compiling and Applying the Storefront Changes
If you used **Option A** and kept the app as a regular app, compile the storefront theme and clear the cache:
```bash
bin/console theme:compile
bin/console cache:clear
```
You do not need to run `theme:change` for the regular app approach because the app is not a theme.
If you used **Option B** and created a `theme.json` file, refresh the theme list and assign the app theme to your sales channel:
```bash
bin/console theme:refresh
bin/console theme:change
```
Select the app's theme and the sales channel where you want to apply it. After the commands finish, refresh the storefront in your browser. The button style in your storefront should now reflect the changes.
If your changes are still not visible, make sure the app is active and run the commands again:
```bash
bin/console theme:compile
bin/console cache:clear
```
You’ve successfully created and implemented a custom app in Shopware.
For more related information, refer to our upcoming course on [Shopware Frontend Development Essentials](https://hub.shopware.com/learn/path/shopware-frontend-development-essentials).