Merchant portal logo update

vikram.bishnoi

Hi Experts,

Can someone please guide how we can change the logo for merchant portal?

Also, we are using multistore setup where there are separate merchant portals for the stores. We want to have different logo for each merchant portal.

Thanks

Hidran Arias

As @James Hooper stated, you can follow that course to learn how to override twig template files from core modules.

On this page, https://docs.spryker.com/docs/scos/dev/front-end-development/202307.0/marketplace/extend-the-marketplace-frontend.html#overriding-twig-files

you can learn how to override core module files, for example, the ZedUi/Presentation/Layout/merchant-layout-main.twig and vendor/spryker/zed-ui/src/Spryker/Zed/ZedUi/Presentation/Components/styles.less

TL;DR
Create the same structure at project level (src/Pyz/ZedUi) and then you can customize the css in styles.less file and override spy-logo spy-logo--full class.

run npm run mp:build after modifying css and javascript stuff.

For dynamically changing the logo according to business logic, you could condition the
{% block logo %}
<web-spy-logo cloak logo></web-spy-logo>

{% endblock %}

block inside the merchant-layout-main.twig , at project level, according to the store being used

James Hooper

Hey @vikram.bishnoi ,

Thanks for the question.

I am not sure if you are aware, we have a course for front end development that may contain that piece of information, it guides you through themes and other front end elements of Spryker.

https://safari.spryker.com/learn/course/381/spryker-frontend-for-backend-developers

@Hidran Arias maybe you have more information here?

Hidran Arias

As @James Hooper stated, you can follow that course to learn how to override twig template files from core modules.

On this page, https://docs.spryker.com/docs/scos/dev/front-end-development/202307.0/marketplace/extend-the-marketplace-frontend.html#overriding-twig-files

you can learn how to override core module files, for example, the ZedUi/Presentation/Layout/merchant-layout-main.twig and vendor/spryker/zed-ui/src/Spryker/Zed/ZedUi/Presentation/Components/styles.less

TL;DR
Create the same structure at project level (src/Pyz/ZedUi) and then you can customize the css in styles.less file and override spy-logo spy-logo--full class.

run npm run mp:build after modifying css and javascript stuff.

For dynamically changing the logo according to business logic, you could condition the
{% block logo %}
<web-spy-logo cloak logo></web-spy-logo>

{% endblock %}

block inside the merchant-layout-main.twig , at project level, according to the store being used