Multi-site custom theme on SAP Commerce cloud 2211 - spartacus 6.3

[azunino]

Hello

on SAP commerce cloud 2211 (with spartacus 6.3) I have configured two different site (WCMS-website)

each site has its own dedicated custom theme.

ex:

site1 -> theme1

site2-> theme2

how can i create 2 different custom scss themes on spartacus?

how cat i assign spartacus custom scss theme1 to site1 and spartacus scss theme2 to site2?
I need to load custom scss theme1 when user login to site1 and custom scss theme2 when user login to site2

thanks Angelo

[gaurav11]

Hello Angelo

You can follow the instructions below.

1. Separate SCSS files (theme1.scss and theme2.scss) for each theme should be created and placed in the styles folder.

2. Specify the customThemePath to point to the matching SCSS file in the environment.site1.ts and environment.site2.ts files for each site.

3.Set up Webpack to create separate CSS files from these SCSS files.

4. Using the ThemeService, use the site configuration in your main component (AppComponent) to dynamically load the right theme.

When users log in, the appropriate personalised SCSS theme will be loaded for each site.

Thanks,

[former_member1271047]

Hi Angelo,

You can create two separate custom SCSS files for site1 and site2. Import these files into the styles.scss.

To assign the Spartacus custom SCSS theme1 to site1 and the Spartacus SCSS theme2 to site2, you can choose the preferred theme for each respective site in the back office under the 'Website' section.

[azunino]

Thank you Sahithi

SCSS custom file for site1 must have the same NAME as theme for site in the back office under the 'Website' section?

ex:

if into back office 'Website' section :

- for site1 I've set theme1

- for site2 I've set theme2

i need create on spartacus theme1.scss and theme2.scss files ? and add these 2 file into styles.scss?

thanks Angelo

[former_member1271047]

Yes Angelo, You need to create theme1.scss and theme2.scss files in spartacus and these 2 file into styles.scss and must have same name as theme for site in the back office.