From Shopping 5.0, interface has had a radical overhaul but like earlier versions many customizations can be set in the
custom.css style sheet. You can add customizations to this file and override the default Shopping styles.
This enables you to retain customizations following upgrades by making a copy of the
custom.css file before upgrade and replacing after upgrade(this should be done along with other files like the resx files, mail templates, etc.).
The following headings describe how you can change various aspects of the Shopping Web portal.
Prior to customizing the Shopping Web portal you should make a backup of any files you are going to change. This typically would include the
custom.css (changes to these are described below).
Some main images used in the Shopping Web portal can be customized by replacing the files in the following directory:
For example to change the company logo displayed at the top of the interface you would replace
logo.png in that directory with your own.
If you want to change other graphic elements of the interface you would make changes to the files in the following directory:
Shopping Banner Guidelines
The following guidelines apply to the images used for the Shopping banner:
- Maximum height for the banner images: 66px (More than this height causes misalignment of the Shopping pages)
- Supports only background image with the Logo – No background color recommended.
- Resolution - for image quality we recommend a high resolution image is used
- Type of Image – any type of web-supported bitmap/raster image is supported for the banner (jpg, png etc)
- Images should be checked for rendering across all Shopping supported browsers
- Logo.png – the default file name is set in
_Layoutbase.cshtmlwith a default maximum size of 248 x 66 pixels
- Background color can be set via CSS.
Customizing headers and footers
You can modify the items contained in headers and footers in the Shopping Web portal by making changes to
_LayoutBase.cshtml in the following directory:
To modify the contents of the header, change the contents of the
To modify the contents of the footer, change the contents of the
Any text customization
The starting point for finding out if text can be customized is to search for the text in the
ShoppingWebStrings.resx in the following folder:
Here you can change the values for particular named data. For example, to change the text used for the
AdminHeading property, edit the
Value contained in the
data tag where the name is
After making a change to the
ShoppingWebStrings.resx file, you must perform an IIS reset before the changes can be seen in the Shopping Web portal.
How to use the custom.css file
custom.css file, is where any user modifications to styles are made. It is found in:
Modifying an element in the Shopping Web portal
To modify an element in the Shopping Web portal, add an entry for the style. For example, to change the colors of the tabs, in
Changing the background colour of the administration menu
To change the background color of the administration menu, modify:
Customizing the footer
To customize the appearance of the footer, modify:
Changing button properties
To change the button properties, modify:
Hiding ratings and reviews
To hide ratings and reviews, modify:
However, if price is required while ratings and reviews are not, break out the individual elements from:
as this is all inclusive of price,
Hiding application costs
You can hide the cost of the application by editing two CSS files:
default.css, modify line 1458 by changing the display attribute to none:
More details on modifying the Shopping Web Portal styles can be found in this example custom.css file. This contains a number of custom styles with comments that describe which parts of the interface they affect.
Working out which style to edit
You can inspect the elements of the Shopping Web Portal using a suitable browser, most browsers have tools for inspecting the styles used for web pages.
The general procedure is to:
- Open the Shopping Web portal in a suitable browser.
- Open the browser's inspect element tool (press F12 in IE and Chrome).
- Point to the element to be customized.
- Examine the style properties and look for the aspect of the style you want to change. For example, if you wanted to change the background color for the Admin menu, you would select the Admin menu and then look for 'background-color' in the style inspector.
- Once you have tracked down the style that governs the property you want to change, you then find that style in the
custom.cssfile and set the required property. If the style is not yet in the
custom.cssfile you need to add it.
Default View Mode
Applications appear in the portal as either a grid or list. You can set the default view mode in the Web Application settings in the Shopping Admin Console.
Shopping Application Name
The Shopping Application name appears in the Portal header next to the logo It also appears in the title bar of the browser, The name can be changed in the Web Application settings in the Shopping Admin Console, and can be blank.
Shopping Web Welcome screen
Also known as the User Splash Message. The Shopping Web Welcome screen page describes how to enable or disable the splash message and edit the text.
Savings so Far
Savings so far page describes how to enable or disable this feature.
Modifying Shopping help describes the default help files and how you can edit and add your own.