I have a
sxa site with two different type of pages. Both pages have different layouts. I want to have different css and js folder for each page. Any way of achieving this in sxa
I have a
In your sitecore go to rendering -
/sitecore/layout/Renderings/Feature/Experience Accelerator/Generic Meta Rendering/HTMLSnippet
In this rendering look at Datasource Location, it should be like this -
query:$site/*[@@name='Settings']/*[@@templatename='HTML Snippet Folder']|query:$sharedSites/*[@@name='Settings']/*[@@templatename='HTML Snippet Folder']
That means under your
site/settings either you have a folder created by template or you can create an item using a template -
HTML Snippet Folder, inside this template, create Html Snippet items. In these snippets, you can write your own CSS/JS or you can give reference to any CSS/JS in HTML Snippet field.
Now create a partial page design under
site/presentation/partial designs and add
HTMLSnippet rendering as a presentation and give Datasource of Html Snippet you have created. Now add this partial design to your required page design.
You can do this by creating a
Page Design and choosing a different theme for that
Page Design, then you can select the new
Page Design for your page, or associate your page template with that new
- Create a new Theme for your CSS
- Add that theme to the Compatible Themes in your Site Settings
- Create a new
Page Design, set the theme to your new theme
- Associate your Page Template with your new
You can even use the original theme as the Base theme for your new theme to save restyling everything, and then just customize the new theme from there.