Add assets to a Theme

Installation Extensions API Reference Feedback 📣

Search…

Overview
Your theme can include custom assets like images. This short guide will show you where to store your custom assets and how you can link them in Twig and SCSS.
Prerequisites
This guide is built upon the guide on creating a first theme:
Create a first theme
Using custom assets
There are basically two ways of adding custom assets to your theme. The first one is using the theme.json to define the path to your custom assets, the second being the default way of using custom assets in plugins. We'll take a closer look at them in the following sections.
Adding assets in theme.json file
While working with your own theme, you might have already come across the theme configuration. In there, you have the possibility to configure your paths to your custom assets like images, fonts, etc. This way, please configure your asset path accordingly.
<plugin root>/src/Resources/theme.json
1
# src/Resources/theme.json
2
{
3
  ...
4
  "asset": [
5
     "app/storefront/src/assets"
6
   ]
7
  ...
8
}
Copied!
Next, please run the bin/console assets:install command. This will copy your plugin assets over to the public/bundles folder:
<shopware root>/public/bundles
1
# 
2
.
3
├── administration
4
├── framework
5
├── storefront
6
└── <your-theme-name> <-- e.g. swagbasicexampletheme
7
    └── your-image.png <-- Your asset is copied here
Copied!
Adding assets the plugin way
This way of adding custom assets refers to the default way of dealing with assets. For more details, please check out the article that specifically addresses this topic:
Add custom assets
Linking to assets
You can link to the asset with the twig asset function:
1
<img src="{{ asset('bundles/swagbasicexampletheme/your-image.png', 'asset') }}">
Copied!
In SCSS you can link to the asset like the following:
1
body {
2
    background-image: url("/bundles/swagbasicexampletheme/your-image.png");
3
}
Copied!
Next steps
Now that you know how to use your assets in a theme, here is a list of other related topics where assets can be used.
​Customize templates​

Override Bootstrap variables in a Theme

Add custom icons

Last modified 2mo ago

Copy link

Contents

Overview

Prerequisites

Using custom assets

Adding assets in theme.json file

Adding assets the plugin way

Linking to assets

Next steps