# Neues (eigenes) Theme erstellen und hochladen - wie?

**URL:** <https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190>\
**Category:** Themes & Design\
**Created:** [7. Oktober 2019 um 12:56 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190 "2019-10-07T12:56:23Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [7. Oktober 2019 um 12:56 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/1 "2019-10-07T12:56:23Z")

</div>

Hallo,

wie genau kann ich in SW6 denn ein eigenes Theme mit eigener Konfiguration erstellen, hochladen (welche Ordnerstruktur?) und installieren? Leider gibts dazu ja noch wenig Doku.

---

<div class="post-metadata">

**Author:** ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)\
**Post date:** [7. Oktober 2019 um 18:25 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/2 "2019-10-07T18:25:41Z")

</div>

Du musst ein Plugin erstellen ([https://docs.shopware.com/en/shopware-platform-dev-en/internals/plugins/plugin-quick-start](https://docs.shopware.com/en/shopware-platform-dev-en/internals/plugins/plugin-quick-start)) und dort den Inhalt vom Ur-Theme reinschieben (/vendor/shopware/storefront/Resources/views)

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [8. Oktober 2019 um 06:58 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/3 "2019-10-08T06:58:35Z")

</div>

Hallo @brettvormkopp‍,&nbsp;

ich muss also das komplette Theme erstmal kopieren und dann abändern? Geht das nicht mehr so wie bei SW5, dass man nur die benötigten Blöcke im eigenen Theme hat?

Was, wenn das Ur-Theme von Shopware ein Update bekommt? Das müsste ich ja dann Stück für Stück in meins kopieren …?

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [8. Oktober 2019 um 07:02 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/4 "2019-10-08T07:02:05Z")

</div>

Du packst nicht den gesamten Inhalt in dein Plugin, sondern extendes die views ganz normal. Hast du dir hier die Doku schon angesehen?

[https://docs.shopware.com/en/shopware-platform-dev-en/internals/plugins/plugin-themes?category=shopware-platform-dev-en/internals/plugins](https://docs.shopware.com/en/shopware-platform-dev-en/internals/plugins/plugin-themes?category=shopware-platform-dev-en/internals/plugins)

Und wie man die views extended =\>&nbsp;[https://docs.shopware.com/en/shopware-platform-dev-en/how-to/extending-storefront-block?category=shopware-platform-dev-en/how-to](https://docs.shopware.com/en/shopware-platform-dev-en/how-to/extending-storefront-block?category=shopware-platform-dev-en/how-to)

Wie man die styles sauber extended frage ich mich allerdings immer noch. Aktuell sieht meine main.scss so aus, ob das richtig ist - Keine Ahung. Gibt dazu leider keine Doku.

**meinplugin/src/Resources/storefront/style/base.scss**

```
@import "./../../../../../../../platform/src/Storefront/Resources/src/style/variables";
@import 'skin/meintheme/abstract/variables';

@import './../../../../../../../platform/src/Storefront/Resources/src/style/vendor/bootstrap';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/base/base';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/base/reboot';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/base/ie11-fixes';

/*
 * Skins
 * ---------- */
//@import './../../../../../../../platform/src/Storefront/Resources/src/style/skin/shopware/base';

@import "skin/meintheme/page/home"; // mein skin usw.
.....

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![Jens\_K](https://avatars.discourse-cdn.com/v4/letter/j/c67d28/32.png) [@Jens\_K](https://forum.shopware.com/u/Jens_K)\
**Post date:** [8. Oktober 2019 um 07:02 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/5 "2019-10-08T07:02:20Z")

</div>

Moin! Du musst nur die Sachen mit reinnehmen, die du auch wirklich geändert hast. Das Plugin kannst du mit bin/console theme:create erstellen. Dokumentation dazu findest du hier:&nbsp;[https://docs.shopware.com/en/shopware-platform-dev-en/internals/plugins/plugin-themes?category=shopware-platform-dev-en/internals/plugins](https://docs.shopware.com/en/shopware-platform-dev-en/internals/plugins/plugin-themes?category=shopware-platform-dev-en/internals/plugins)

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [8. Oktober 2019 um 07:09 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/6 "2019-10-08T07:09:55Z")

</div>

Dankte euch! Die Doku hatte ich ehrlich gesagt durchsucht aber nichts zu Themes gefunden…&nbsp; ![Foot-in-Mouth](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/1X/bedbc37f276faa6d086ddea9cd70cb0550bbd56e.png "Foot-in-Mouth")

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [8. Oktober 2019 um 07:13 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/7 "2019-10-08T07:13:27Z")

</div>

> [@Jens\_K schrieb:](https://forum.shopware.com/profile/25958/Jens_K "Jens\_K")
> 
> Moin! Du musst nur die Sachen mit reinnehmen, die du auch wirklich geändert hast. Das Plugin kannst du mit bin/console theme:create erstellen. Dokumentation dazu findest du hier:&nbsp;[https://docs.shopware.com/en/shopware-platform-dev-en/internals/plugins/plugin-themes?category=shopware-platform-dev-en/internals/plugins](https://docs.shopware.com/en/shopware-platform-dev-en/internals/plugins/plugin-themes?category=shopware-platform-dev-en/internals/plugins)

Wie sieht das allerdings mit den styles aus? Siehe meinen Beitrag. Machen wir das falsch? Ohne den Import der core Dateien fehlen die ganzen mixins, core variablen usw.&nbsp;&nbsp;

---

<div class="post-metadata">

**Author:** ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)\
**Post date:** [8. Oktober 2019 um 07:50 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/8 "2019-10-08T07:50:32Z")

</div>

Ich würde den kompletten Inhalt reinnehmen gerade weil man dan komplett unabhängig ist vom Ur-Theme. Wenn du allerdings nur eine handvoll Dateien extenden willst, dann macht der komplette Klon kein Sinn.

---

<div class="post-metadata">

**Author:** ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)\
**Post date:** [8. Oktober 2019 um 07:55 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/9 "2019-10-08T07:55:05Z")

</div>

@Shopwareianer‍ reicht es nicht nur den Hauptpfad einmal zu nehmen. Irgendwo hab ich gelesen dass er von allein die css Dateien aufgabelt und rendert. Aber darauf will ich keine Garantie geben.

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [8. Oktober 2019 um 07:58 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/10 "2019-10-08T07:58:30Z")

</div>

@brettvormkopp‍ wenn ich das komplette Theme dupliziere, was mach ich dann, wenn im Ur-Theme ein Update passiert? Das bekomm ich ja nicht mit. Und selbst wenn, dann müsste ich Datei für Datei prüfen und die entsprechenden Blöcke rüberkopieren, was dann u. U. wieder nicht mit meinen Änderungen zusammenpasst. Updatesicher ist anders. Besonders wenn man mehr als einen Shop betreut…

---

<div class="post-metadata">

**Author:** ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)\
**Post date:** [8. Oktober 2019 um 08:29 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/11 "2019-10-08T08:29:20Z")

</div>

Die Frage bei Themes&nbsp;ist ja: Brauchst du immer zeitnah ein Update aus dem Ur-Theme? Ich habe beispielweise ein unabhängiges&nbsp;SW5 &nbsp;Theme. Es gab einmal Updates wo etwas weggenommen/hinzugefügt wurde. Durch die Unabhängigkeit blieb bei mir alles wie vorher. Das wird erst dann zu einem Problem wenn ein Controller wegfällt.&nbsp;

Ob die Dateien sich verändert haben kannst du überprüfen indem du da Theme hash-st oder es gibt ja auch genügend Tools womit man Versionen vergleichen kann.

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [8. Oktober 2019 um 08:35 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/12 "2019-10-08T08:35:55Z")

</div>

@brettvormkopp‍ ich will aber nicht bei jedem Update 10 oder mehr Shops auf Unterschiede beim Update vergleichen. Noch dazu Shops die ggf. auf unterschiedlichen Versionen laufen aber mit einem ähnlichen/selben Theme. Das ist nicht praktikabel und so sollten automatische Updates nicht sein. Wenn Shopware irgendwo einen neuen Button, neues Feld, neuen Link oder anderes Feature im Theme integriert dann will ich das auch direkt haben.&nbsp;

Bestes Beispiel ist das aktuelle Problem mit Cookie-Banner vs. Cookie-Consent Formular im Banner. Wenn Shopware das einbaut, dann will ich das auch instant imit dem Update in jedem Shop haben und nicht erst wer-weiß-wie-viele Dateien vergleichen und händisch in mein Theme “updaten”.

was @Shopwareianer‍ da erwähnt, interessiert mich aber auch. Doku gibts ja keine

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [8. Oktober 2019 um 09:52 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/13 "2019-10-08T09:52:57Z")

</div>

> [@brettvormkopp schrieb:](https://forum.shopware.com/profile/6611/brettvormkopp "brettvormkopp")
> 
> @Shopwareianer‍ reicht es nicht nur den Hauptpfad einmal zu nehmen. Irgendwo hab ich gelesen dass er von allein die css Dateien aufgabelt und rendert. Aber darauf will ich keine Garantie geben.

Wenn du nur die main.scss importierst, funzt es auch nicht. Ich muss meinen Beitrag berichtigen, hatte mein git Repo nicht geupdatet.

Sowie ich es aktuell habe - Ich habe mir den vendor Ordner in mein Theme kopiert für die core bootstrap und tiny slider Dateien.

```
@import 'skin/meintheme/abstract/variables'; // variablen anpassungen

/*
 * Vendors
 * ------- */
@import 'vendor/bootstrap';
@import 'vendor/tiny-slider';

// meine skin dateien
@import "skin/meintheme/page/product-detail/product-detail";

```

&nbsp;Ob das so richtig ist, weiß ich allerdings immer noch nicht. Aber zumindest importiere ich mir so keine dutzenden Dateien.

In meiner theme.json

```
    "style": [
        "@Storefront",
        "Resources/storefront/style/base.scss"
    ],

```

Die core .twig Datein kopierst du dir nicht - Die extendest du nur. Ganz normal wie bei Shopware 5. Sowie hier beschrieben =\>&nbsp;[https://docs.shopware.com/en/shopware-platform-dev-en/how-to/extending-storefront-block?category=shopware-platform-dev-en/how-to&\_ga=2.33974505.93462419.1570343136-1142481706.1567356213](https://docs.shopware.com/en/shopware-platform-dev-en/how-to/extending-storefront-block?category=shopware-platform-dev-en/how-to&%5C_ga=2.33974505.93462419.1570343136-1142481706.1567356213)

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [8. Oktober 2019 um 10:03 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/14 "2019-10-08T10:03:00Z")

</div>

ich versuche gerade eine SASS-Variable aus dem Core zu überschreiben

```
 $border-radius: 3px;

```

habe die selbe Variable in meiner eigenen SCSS-Datei überschrieben

```
 $border-radius: 0px;

```

aber es ändert sich nichts… auch nicht mit !important&nbsp;(andere Änderungen mit direkten CSS-Selektoren greifen)

wie mach ich das korrekt?

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [8. Oktober 2019 um 11:31 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/15 "2019-10-08T11:31:03Z")

</div>

Wie sieht denn deine base.scss aus?

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [8. Oktober 2019 um 11:40 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/16 "2019-10-08T11:40:01Z")

</div>

@Shopwareianer‍

ich hab nur testweise was ausprobiert und includiere deshalb in der base.scss zwei Dateien

```
@import "variables/general";
@import "modules/navigation";

```

in der **modules/navigation.scss** hab ich einfach mal testweise das versucht

```
.nav-main {
  background: red;
}

```

–\> klappt

in der **variables/general.scss** steht nur das

```
$border-radius: 0px!important;
$border-radius-lg: $border-radius!important;
$border-radius-sm: $border-radius!important;

```

–\> klappt nicht, es bleiben trotzdem 3px wie im original Theme

In SW5 mit LESS konnte man Variablen an jeder Stelle im eigenen Theme einfach überschreiben…

ich würd das Setting für Border-Radius auch gern in die Theme-Config packen, aber leider gibt es dort nur die Feldtypen color, media und fontFamily …

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [8. Oktober 2019 um 13:40 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/17 "2019-10-08T13:40:18Z")

</div>

Ja das ist das Problem - Weil die core Dateien nicht importiert sind und er daher die Variablen gar nicht kennt.

Daher wie ich oben geschrieben hatte:

```
@import 'skin/meintheme/abstract/variables'; // variablen anpassungen

/*
 * Vendors
 * ------- */
@import 'vendor/bootstrap';
@import 'vendor/tiny-slider';

....

```

So funktioniert es zumindest, ob es richtig ist - Kein Ahnung. Da gibts keine Docs zu und auch irgendwie kein Infos von Shopware.

Wenn du jetzt in deine navigation.less die&nbsp;$border-radius Var verwendest, wirst vermutlich einen Fehler bekommen - Da er eben die core variablen gar nicht drin hat.

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [8. Oktober 2019 um 14:31 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/18 "2019-10-08T14:31:24Z")

</div>

@Shopwareianer‍ leider weiß ich nicht, wie ich deinen Kommentar mit dem Code interpretieren soll… ist das der Inhalt deiner base.scss?

```
@import 'vendor/bootstrap';
@import 'vendor/tiny-slider';

$border-radius: 0px;
$border-radius-lg: $border-radius;
$border-radius-sm: $border-radius;

```

–\> wenn ich das in meine base.scss übernehme&nbsp;funktioniert das mit dem Radius&nbsp;trotzdem nicht.

ich hab auch das in der JSON

```
"style": [
    "@Storefront",
    "Resources/storefront/style/base.scss"
  ],

```

ps: wenn ich die Definition der Variable&nbsp; **$border-radius** und die Includes&nbsp;weglasse und **$border-radius** einfach verwendet, bekomme ich keinen Compilerfehler. Es funktioniert aber halt auch nicht.

‍[@Moritz Naczenski]([http://forum.shopware.com/profile/14574/Moritz](http://forum.shopware.com/profile/14574/Moritz) Naczenski “Moritz Naczenski”)‍ ‍ weißt du zum Thema der Variablen etwas? Wie kann man die im eigenen Theme überschreiben?

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [8. Oktober 2019 um 15:36 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/19 "2019-10-08T15:36:23Z")

</div>

Hast du denn die beiden Dateien aus dem Vendor Ordner vom original Theme in deins kopiert? =\>&nbsp;[https://github.com/shopware/platform/tree/master/src/Storefront/Resources/src/style/vendor](https://github.com/shopware/platform/tree/master/src/Storefront/Resources/src/style/vendor)

Und deine Variablen kommen dann über die importieren Vendor Files. So habe ich s zumindest.

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [9. Oktober 2019 um 06:37 UTC](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190/20 "2019-10-09T06:37:18Z")

</div>

achso… ich muss also doch wieder Daten aus dem original Theme kopieren… das ist das was du oben meintest…

[@Moritz Naczenski]([http://forum.shopware.com/profile/14574/Moritz](http://forum.shopware.com/profile/14574/Moritz) Naczenski “Moritz Naczenski”)‍ eine Äußerung von Shopware wäre cool… muss man das wirklich so machen?

[Nächste Seite](https://forum.shopware.com/t/neues-eigenes-theme-erstellen-und-hochladen-wie/62190.md?page=2)
