How can I use css on catalog item

[JuliaWeis98]

Hi guys,

I would like to ask, if it is possible to customize the "Create Incident" Page? (With customize I mean, that I can customize this page or the widget "SC Catalog Item" on this page with css)

My goal is, when I open create incident, that only for this specific catalog item a customized and nice designed page appears.

I know, that catalog items normally using the "sc_cat_item" page. So do I have to clone this "sc_cat_item" page? 

But the the next question would be, how can configure ServiceNow that when a user clicks Create Incident, it always opens my cloned version of the incident creation page?

Thank you 🙂

[Anupam1]

Hi @JuliaWeis98 ,

Yes, you can customize the “Create Incident” page for a specific catalog item by cloning the sc_cat_item page and configuring routing logic to load your custom version.

Step-by-Step: Customizing the “Create Incident” Page

1. Clone the sc_cat_item Page

• Go to Service Portal > Pages.
• Search for sc_cat_item and clone it (e.g., name it sc_cat_item_incident).
• This gives you a separate page to customize without affecting other catalog items.

1. Customize the Page or Widget

• On your cloned page, you can:
• Replace or modify the SC Catalog Item widget (widget-sc-cat-item-v2) with a custom version.
• Apply CSS styling directly in the widget or via the page theme.
• Add conditional logic or intermediate widgets to load different layouts based on catalog item ID ServiceNow ServiceNow.

1. Create a Custom Widget (Optional but Powerful)

• If you want dynamic behavior (e.g., show different layouts based on catalog item), create an intermediate widget that checks the catalog item and loads the appropriate widget ServiceNow.
• Use AngularJS ng-if or ng-switch to control rendering.

1. Redirect Specific Catalog Item to Your Custom Page

To ensure that only the “Create Incident” item opens your custom page:

• Go to Service Catalog > Catalog Definitions > Maintain Items.
• Open the Create Incident catalog item.
• Scroll to the Portal Settings section.
• Set the Page field to your cloned page (sc_cat_item_incident).

This overrides the default sc_cat_item page for this item only.

Best Practices

• Avoid modifying the original sc_cat_item page directly—cloning ensures upgrade safety.
• Use CSS classes scoped to your widget/page to avoid affecting other portal elements.
• Consider using User Criteria if you want to show different designs based on user roles or groups ServiceNow.

Some Useful links:-

1. SC Catalog Item widget

2. Custom catalog item widget in portal without modif... - ServiceNow Community

If my response helped please mark it correct and close the thread so that it benefits future readers.

Thanks,

Anupam.

[RaghavSh]

I would not recommend doing this but can provide a possible solution.

To apply css you will have to check that it is create incident  record producer, I believe you cannot check that in css so you will have to create a new widget and place it on cloned "esc_sc_cat_item" page. (as this page is used for /esc, for /sp it is sc_cai_item page is used.)

In the custom widget you created(client script) you can check $sp_getParameter('sys_id')=='sys_id of incident record producer'  and apply the css accordingly so that it does not affect other items.

I hope it will provide you a path but again not recommended.

Please mark the answer correct/helpful accordingly.

[Ankur Bawiskar]

@JuliaWeis98 

you will have to clone the OOTB widget which renders that item.

Then within that widget code check which catalog item is getting rendered by checking the sysId in URL

This will ensure the CSS/color applies only to this catalog item

But I won't recommend this approach as this will be a technical debt

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏