Manage different css folder for one sxa site

Question

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

Answer 1

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.

Answer 2

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 Page Design:

Steps:

• 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 Page Design

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.