How to change the backoffice logo?

shlok.sharma
shlok.sharma IT Analyst Spryker Solution Partner Posts: 22 πŸ§‘πŸ»β€πŸš€ - Cadet
edited October 2023 in Spryker Development

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!

Best Answer

  • amansilla
    amansilla Senior Technical Solution Engineer Sprykee Posts: 20 πŸͺ - Explorer
    Answer βœ“

    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.

Answers

  • amansilla
    amansilla Senior Technical Solution Engineer Sprykee Posts: 20 πŸͺ - Explorer
    Answer βœ“

    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
    James Hooper Senior Technical Trainer Sprykee Posts: 67 βš–οΈ - Guardians (admin)

    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
    shlok.sharma IT Analyst Spryker Solution Partner Posts: 22 πŸ§‘πŸ»β€πŸš€ - Cadet

    Thanks @amansilla, it worked.

  • Hidran Arias
    Hidran Arias Senior Technical Trainer Sprykee Posts: 83 πŸ› - Council (mod)

    @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
    shlok.sharma IT Analyst Spryker Solution Partner Posts: 22 πŸ§‘πŸ»β€πŸš€ - Cadet

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

  • shlok.sharma
    shlok.sharma IT Analyst Spryker Solution Partner Posts: 22 πŸ§‘πŸ»β€πŸš€ - Cadet

    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
    James Hooper Senior Technical Trainer Sprykee Posts: 67 βš–οΈ - Guardians (admin)

    @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