How to change the backoffice logo?

shlok.sharma

Hello everyone, i am working on B2B demoshop and i want to change the backoffice login page logo and dashboard logo but i am unable to locate the file path!

amansilla

Hi @shlok.sharma ,

as far as I know, the default Spryker logo is stored as SVG via CSS, and it's defined in the file vendor/spryker/gui/assets/Zed/sass/_custom.scss using the CSS class zed-logo.

All you need is to just override the CSS file above with your logo.

Please let me know if this helps.

amansilla

Hi @shlok.sharma ,

as far as I know, the default Spryker logo is stored as SVG via CSS, and it's defined in the file vendor/spryker/gui/assets/Zed/sass/_custom.scss using the CSS class zed-logo.

All you need is to just override the CSS file above with your logo.

Please let me know if this helps.

James Hooper

Something else that may be of interest to you @shlok.sharma , we have a course in Safari, it does not exactly say how to change the logo like @amansilla has above, but it may be of interest if you are looking at changing the theme or template.

If you login to Safari and search "frontend" you will see a course Spryker Frontend for Backend Developers 🙌

shlok.sharma

Thanks @amansilla, it worked.

Hidran Arias

@shlok.sharma Could you please share your solution?
Here is mine, following the docs:
1) I created frontend/zed/build.js file

2) Copy the following code from the docs: https://docs.spryker.com/docs/scos/dev/front-end-development/202307.0/zed/overriding-webpack-js-scss-for-zed-on-project-level.html#webpack

const { mergeWithCustomize, customizeObject } = require('webpack-merge');

const oryxForZed = require('@spryker/oryx-for-zed');

const path = require('path');

const mergeWithStrategy = mergeWithCustomize({

customizeObject: customizeObject({

plugins: 'prepend'

})

});

const myCustomZedSettings = mergeWithStrategy(oryxForZed.settings, {

entry: {

dirs: [path.resolve('./src/Pyz/Zed/')] // Path for entry points on project level

}

});

oryxForZed.getConfiguration(myCustomZedSettings)

.then(configuration => oryxForZed.build(configuration, oryxForZed.copyAssets))

.catch(error => console.error('An error occurred while creating configuration', error));

3)  I modified the package.json to change zed build
 "zed":"node ./frontend/zed/build",

        "zed:watch":"node ./frontend/zed/build --dev",

        "zed:production":"node ./frontend/zed/build --prod"

4) I created the file Zed/Gui/assets/Zed/js/spryker-zed-gui-commons.entry.js , so as to override the core one and include my custom .scss file

5) I created the file Zed/Gui/assets/Zed/sass/_custom.scss with my custom css to override the .zed-logo class

6) I included the following code in Zed/Gui/assets/Zed/js/spryker-zed-gui-commons.entry.js

require('ZedGui');
require('../sass/_custom.scss')

ZedGui is an alias that points to ZedGui: ${settings.paths.guiFolder}/assets/Zed/js/modules/commons,

7) I ran docker/sdk console frontend:zed:build . The logo was changed with my CSS class

shlok.sharma

Hi @James Hooper, thankyou, i have enrolled in this course and started learning.

shlok.sharma

Hello @Hidran Arias , i actually changed the logo directly in the core file, at first i was trying to implement oryx for Zed but i was stuck at some point, but now as you have mentioned all the points i will try it again..

James Hooper

@shlok.sharma that is fantastic news! Happy Learning and feel free to reach out to us if we can be of any assistance during your learning journey.

Many Thanks

James