Shopware 6 SHOWROOM und ELLE Theme anpassen

Shopware 6 (German) Themes & Design
1

Hallo Community,

ich habe vor kurzem die schicken Themes SHOWROOM und ELLE von Shopware AG entdekt und ausprobiert.
Ich habe dann direkt probiert, diese mit einem Custom Theme Plugin anzupassen, allerdings funktioniert das nicht so ganz wie ich mir das vorgestellt hatte… das Ergebnis ist immer eine Mischung aus Default Theme und z.B. Showroom.
Ich denke ich habe da noch einen Fehler in der theme.json aber es wird in der Doku nicht erklärt (oder ihc habe es nicht gefunden), was ich in der Vererbungshierarchie alles anpassen/austauschen muss, um ein weiteres Theme zwischen default und Custom Plugin zu schieben.

Hier mal meine theme.json

{
  "name": "CustomShowroom",
  "author": "Shopware AG",
  "views": [
     "@Storefront",
     "@SwagShowRoomTheme",
     "@Plugins",
     "@CustomShowroom"
  ],
  "style": [
    "app/storefront/src/scss/overrides.scss",
    "@Storefront",
    "app/storefront/src/scss/base.scss"
  ],
  "script": [
    "@Storefront",
    "app/storefront/dist/storefront/js/custom-showroom.js"
  ],
  "asset": [
    "@Storefront",
    "app/storefront/src/assets"
  ]
}

Muss ich auch styles und scripts des Showroom Theme in diese Datei einbinden? Wenn ja wo finde ich diese?

2

Ich habe mich auch schon an Shopware gewandt, die wollen mir aber nicht weiter helfen, weil ich keinen „Diamond Wartungsvertrag“ habe…
:+1: Daumen hoch Shopware - so macht man das bei nem neuen Shopsystem mit unvollständiger Doku :frowning:

EDIT:
Ich hab noch ein bisschen gebastelt und ausprobiert und bin dank dieses Threads etwas weiter gekommen. Ich weiß nicht, ob das jetzt die finale Lösung ist oder ob das irgendwo Probleme geben wird.

SHOWROOM theme.json

{
    "name": "Showroom Theme",
    "author": "Shopware AG",
    "views": [
        "@Storefront",
        "@SwagPayPal",
        "@SwagCmsExtensions",
        "@SwagCustomizedProducts",
        "@Plugins",
        "@SwagShowRoomTheme"
    ],
    "previewMedia": "app/storefront/src/assets/images/showroomPreview.png",
    "style": [
        "app/storefront/src/scss/overrides.scss",
        "@Storefront",
        "app/storefront/src/scss/base.scss"
    ],
    "script": [
        "@Storefront",
        "app/storefront/dist/storefront/js/swag-show-room-theme.js"
    ],
    "asset": [
        "app/storefront/src/assets"
    ],
    "config": {
        "blocks": {
            "footer": {
                "label": {
                    "en-GB": "Footer",
                    "de-DE": "Footer"
                }
            }
        },
        "fields": {
            "sw-color-brand-primary": {
                "value": "#26262f"
            },
            "sw-color-brand-secondary": {
                "value": "#cab898"
            },
            "sw-border-color": {
                "value": "#e4e6ea"
            },
            "sw-background-color": {
                "value": "#ffffff"
            },
            "sw-color-success": {
                "value": "#4bc87b"
            },
            "sw-color-info": {
                "value": "#4babbc"
            },
            "sw-color-warning": {
                "value": "#ee994a"
            },
            "sw-color-danger": {
                "value": "#a1090b"
            },
            "sw-font-family-base": {
                "value": "'Work Sans', sans-serif"
            },
            "sw-text-color": {
                "value": "#141719"
            },
            "sw-font-family-headline": {
                "value": "'Work Sans', sans-serif"
            },
            "sw-headline-color": {
                "value": "#525a62"
            },
            "sw-color-price": {
                "value": "#141719"
            },
            "sw-color-buy-button": {
                "value": "#26262f"
            },
            "sw-color-buy-button-text": {
                "value": "#fdfdfd"
            },
            "sw-logo-desktop": {
                "type": "media",
                "value": "app/storefront/src/assets/logo/showroom-logo-desktop.svg"
            },
            "sw-logo-tablet": {
                "type": "media",
                "value": "app/storefront/src/assets/logo/showroom-logo-desktop.svg"
            },
            "sw-logo-mobile": {
                "type": "media",
                "value": "app/storefront/src/assets/logo/showroom-logo-mobile.svg"
            },
            "sw-footer-bg-color": {
                "label": {
                    "en-GB": "Background colour",
                    "de-DE": "Hintergrundfarbe"
                },
                "type": "color",
                "value": "#26262f",
                "editable": true,
                "block": "footer",
                "order": 100
            },
            "sw-footer-text-color": {
                "label": {
                    "en-GB": "Text colour",
                    "de-DE": "Textfarbe"
                },
                "type": "color",
                "value": "#fdfdfd",
                "editable": true,
                "block": "footer",
                "order": 200
            },
            "sw-footer-logo": {
                "label": {
                    "en-GB": "Footer logo",
                    "de-DE": "Footer Logo"
                },
                "type": "media",
                "value": "app/storefront/src/assets/logo/showroom-logo-footer-desktop.svg",
                "editable": true,
                "block": "media",
                "order": 300
            },
            "sw-footer-logo-mobile": {
                "label": {
                    "en-GB": "Footer mobile logo",
                    "de-DE": "Footer mobile Logo"
                },
                "type": "media",
                "value": "app/storefront/src/assets/logo/showroom-logo-footer-mobile.svg",
                "editable": true,
                "block": "media",
                "order": 400
            },
            "sw-account-login-background": {
                "label": {
                    "en-GB": "Background of account login",
                    "de-DE": "Hintergrund der Kontoanmeldung"
                },
                "type": "media",
                "value": "app/storefront/src/assets/images/dillon-mangum-9489sFfgk4c-unsplash.jpg",
                "editable": true,
                "block": "media",
                "order": 500
            },
            "sw-contact-form": {
                "label": {
                    "en-GB": "Contact form image",
                    "de-DE": "Kontaktformular Bild"
                },
                "type": "media",
                "value": "app/storefront/src/assets/images/contact-form.png",
                "editable": true,
                "block": "media"
            },
            "sw-newsletter-form": {
                "label": {
                    "en-GB": "Newsletter form image",
                    "de-DE": "Newsletter Formular Bild"
                },
                "type": "media",
                "value": "app/storefront/src/assets/images/newsletter-form.png",
                "editable": true,
                "block": "media"
            }
        }
    }
}

Custom Theme theme.json

{
  "name": "CustomShowroom",
  "author": "Shopware AG",
  "views": [
     "@Storefront",
     "@Plugins",
     "@SwagShowRoomTheme",
     "@CustomShowroom"
  ],
  "style": [
    "app/storefront/src/scss/overrides.scss",
    "@SwagShowRoomTheme",
    "app/storefront/src/scss/base.scss"
  ],
  "script": [
    "@SwagShowRoomTheme",
    "app/storefront/dist/storefront/js/custom-showroom.js"
  ],
  "asset": [
    "@SwagShowRoomTheme",
    "app/storefront/src/assets"
  ],
  "config": {
      "blocks": {
          "footer": {
              "label": {
                  "en-GB": "Footer",
                  "de-DE": "Footer"
              }
          }
      },
      "fields": {
          "sw-color-brand-primary": {
              "value": "#26262f"
          },
          "sw-color-brand-secondary": {
              "value": "#cab898"
          },
          "sw-border-color": {
              "value": "#e4e6ea"
          },
          "sw-background-color": {
              "value": "#ffffff"
          },
          "sw-color-success": {
              "value": "#4bc87b"
          },
          "sw-color-info": {
              "value": "#4babbc"
          },
          "sw-color-warning": {
              "value": "#ee994a"
          },
          "sw-color-danger": {
              "value": "#a1090b"
          },
          "sw-font-family-base": {
              "value": "'Work Sans', sans-serif"
          },
          "sw-text-color": {
              "value": "#141719"
          },
          "sw-font-family-headline": {
              "value": "'Work Sans', sans-serif"
          },
          "sw-headline-color": {
              "value": "#525a62"
          },
          "sw-color-price": {
              "value": "#141719"
          },
          "sw-color-buy-button": {
              "value": "#26262f"
          },
          "sw-color-buy-button-text": {
              "value": "#fdfdfd"
          },
          "sw-logo-desktop": {
              "type": "media",
              "value": "app/storefront/src/assets/logo/showroom-logo-desktop.svg"
          },
          "sw-logo-tablet": {
              "type": "media",
              "value": "app/storefront/src/assets/logo/showroom-logo-desktop.svg"
          },
          "sw-logo-mobile": {
              "type": "media",
              "value": "app/storefront/src/assets/logo/showroom-logo-mobile.svg"
          },
          "sw-footer-bg-color": {
              "label": {
                  "en-GB": "Background colour",
                  "de-DE": "Hintergrundfarbe"
              },
              "type": "color",
              "value": "#26262f",
              "editable": true,
              "block": "footer",
              "order": 100
          },
          "sw-footer-text-color": {
              "label": {
                  "en-GB": "Text colour",
                  "de-DE": "Textfarbe"
              },
              "type": "color",
              "value": "#fdfdfd",
              "editable": true,
              "block": "footer",
              "order": 200
          },
          "sw-footer-logo": {
              "label": {
                  "en-GB": "Footer logo",
                  "de-DE": "Footer Logo"
              },
              "type": "media",
              "value": "app/storefront/src/assets/logo/showroom-logo-footer-desktop.svg",
              "editable": true,
              "block": "media",
              "order": 300
          },
          "sw-footer-logo-mobile": {
              "label": {
                  "en-GB": "Footer mobile logo",
                  "de-DE": "Footer mobile Logo"
              },
              "type": "media",
              "value": "app/storefront/src/assets/logo/showroom-logo-footer-mobile.svg",
              "editable": true,
              "block": "media",
              "order": 400
          },
          "sw-account-login-background": {
              "label": {
                  "en-GB": "Background of account login",
                  "de-DE": "Hintergrund der Kontoanmeldung"
              },
              "type": "media",
              "value": "app/storefront/src/assets/images/dillon-mangum-9489sFfgk4c-unsplash.jpg",
              "editable": true,
              "block": "media",
              "order": 500
          },
          "sw-contact-form": {
              "label": {
                  "en-GB": "Contact form image",
                  "de-DE": "Kontaktformular Bild"
              },
              "type": "media",
              "value": "app/storefront/src/assets/images/contact-form.png",
              "editable": true,
              "block": "media"
          },
          "sw-newsletter-form": {
              "label": {
                  "en-GB": "Newsletter form image",
                  "de-DE": "Newsletter Formular Bild"
              },
              "type": "media",
              "value": "app/storefront/src/assets/images/newsletter-form.png",
              "editable": true,
              "block": "media"
          }
      }
  }
}

ich habe den Abschnitt „config“ aus der Showroom theme.json 1:1 in mein custom Theme kopiert und es scheint zu funktionieren.