# How to add a theme preview?

**URL:** <https://forum.shopware.com/t/how-to-add-a-theme-preview/96924>\
**Category:** General Questions (EN)\
**Created:** [2. November 2022 um 11:48 UTC](https://forum.shopware.com/t/how-to-add-a-theme-preview/96924 "2022-11-02T11:48:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![magnus](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/magnus/32/13222_2.png) [@magnus](https://forum.shopware.com/u/magnus)\
**Post date:** [2. November 2022 um 11:48 UTC](https://forum.shopware.com/t/how-to-add-a-theme-preview/96924/1 "2022-11-02T11:48:03Z")

</div>

I have created a custom theme. And I want a preview of the theme to be displayed automatically when it have been installed (just like the default Shopware theme).

Created a image with the same size as the one for the default theme. Also, added it to:  
myThemePlugin \> src \> Resources \>app \> storfront \> src \> assets  
The name is „aliceThemePreview.jpg“

Zipped the custom theme „myThemePlugin“ folder and installed on another Shopware store (locally). But no theme preview… 🙄

How is this done?

I also followed the manual on how to Add custom assets, but that did not seems to work either. 🤔

/ Magnus

---

<div class="post-metadata">

**Author:** ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)\
**Post date:** [3. November 2022 um 12:24 UTC](https://forum.shopware.com/t/how-to-add-a-theme-preview/96924/2 "2022-11-03T12:24:43Z")

</div>

Lowercase: your-theme-name-preview.jpg/png in the config folder.

---

<div class="post-metadata">

**Author:** ![magnus](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/magnus/32/13222_2.png) [@magnus](https://forum.shopware.com/u/magnus)\
**Post date:** [3. November 2022 um 14:34 UTC](https://forum.shopware.com/t/how-to-add-a-theme-preview/96924/3 "2022-11-03T14:34:23Z")

</div>

Thanks @Max_Shop  
But I don’t get it how this will work. Do you mean this config folder (see image). But when I zip my plugin, it will not contain the preview file. 🤔

I have the development version of Shopware installed, and trying to „reverse engineer“ how Shopware have done it…

The name of the theme is „AliceRed22“

 ![Screenshot 2022-11-03 at 15.17.10](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/9/e/9e65e2a33b94e03bfe740442a46ac7a208f5c029.png)

---

<div class="post-metadata">

**Author:** ![magnus](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/magnus/32/13222_2.png) [@magnus](https://forum.shopware.com/u/magnus)\
**Post date:** [3. November 2022 um 14:47 UTC](https://forum.shopware.com/t/how-to-add-a-theme-preview/96924/4 "2022-11-03T14:47:33Z")

</div>

@Max_Shop I have solved it! 😀  
And, if anyone else wonder how to do it:

1. Add your theme preview file in the folder „YourPlugInFolder \> src \> Resources \> app \> storefront \> src \> assets“

2. Add this line to your theme.json file:  
„previewMedia“: „app/storefront/src/assets/alicered22-preview.jpg“,  
after the description block. Change the file name to your file.

/ Magnus