Logo image change

Hello,

i am trying to change the logo-image in my theme. For that , I change the value of the „sw-logo-desktop“ in theme.json of my theme:

"config" : {

**"fields"** : { **"sw-color-brand-primary"** : { **"value"** : **"#ffffff"** }, **"sw-logo-desktop"** : { **"value"** : **"Resources/storefront/asset/logo/pastlogo.png"** } } }

The logo path: Mytheme/scr/Resources/storefront/asset/logo/pastlogo.png

The theme was recompiled via  bin/console theme:compile.

Is this a correct way to do? Unfortunately, it does not work and I can not see any logo.

Thank you for your help.

1 Like

I would like to know the same, I ended up referring to /bundles/ where the files are copied too but that doesn’t seem like the right solution

look into vendor/shopware/platform/src/Storefront/Resources/theme.json for up-to-date syntax:

"sw-logo-desktop": {
        "label": {
          "en-GB": "Desktop",
          "de-DE": "Desktop"
        },
        "helpText": {
          "en-GB": "Displayed for viewports of above 991px",
          "de-DE": "Wird über einem Viewport von 991px angezeigt"
        },
        "type": "media",
        "value": "app/storefront/dist/assets/logo/demostore-logo.png",
        "editable": true,
        "block": "media",
        "order": 100
      },
      "sw-logo-tablet": {
        "label": {
          "en-GB": "Tablet",
          "de-DE": "Tablet"
        },
        "helpText": {
          "en-GB": "Displayed between a viewport of 767px to 991px",
          "de-DE": "Wird zwischen einem viewport von 767px bis 991px angezeigt"
        },
        "type": "media",
        "value": "app/storefront/dist/assets/logo/demostore-logo.png",
        "editable": true,
        "block": "media",
        "order": 200
      },
      "sw-logo-mobile": {
        "label": {
          "en-GB": "Mobile",
          "de-DE": "Mobil"
        },
        "helpText": {
          "en-GB": "Displayed up to a viewport of 767px",
          "de-DE": "Wird bis zu einem Viewport von 767px angezeigt"
        },
        "type": "media",
        "value": "app/storefront/dist/assets/logo/demostore-logo.png",
        "editable": true,
        "block": "media",
        "order": 300
      },

 

Then, when you make changes in this theme.json config, it will only notice changes (as far as I noticed) when you deaktivate the theme plugin and acivate it then again.

Eh, yes also, when you generate a theme plugin with bin/console theme:generate default for asset in config is the „src“ folder not dist… so in my theme.json its the same as obove but /src/ insted of /dist/ in all places… and the actual files are also in /src/assets

"asset": [
        "app/storefront/src/assets"
    ],

...

"sw-logo-desktop": {
                "label": {
                    "en-GB": "Desktop",
                    "de-DE": "Desktop"
                },
                "helpText": {
                    "en-GB": "Displayed for viewports of above 991px",
                    "de-DE": "Wird über einem Viewport von 991px angezeigt"
                },
                "type": "media",
                "value": "app/storefront/src/assets/logo/myprojectname-logo.png",
                "editable": true,
                "block": "media",
                "order": 100
            }

 

@gotu‍ did that actually work for you?

The path values given in the theme.json seem to always be taken litterally, so only pointing to the bundles folder actually works as @maurits‍ mentioned above, however it seems odd to have to write the theme name in the path.

I couldn’t load any logo image on the theme.json. Apparently it has somethign to do with “bundles” like they say here. Did you try to install your assets as well?

bin/console asset:install

So what I did was just to change it on the “header.html.twig”. This is how the block looks like.

{% block layout_header_logo %}
     
{% endblock %}

Which is the same as " /bundles/TestTheme2/img/logo_x.png " and I saved it on:

custom/plugins/TestTheme2/src/Resources/public/img/logo_x.png

I hope it helps ya. I would love to know how to make it work throu the “theme.json”!

for me the “header.html.twig” worked :slight_smile: