Tutorial: Changing the appearance of the Madisons starter store
The storefront appearance is an important factor in improving customer experience. In this tutorial, the cascading style sheets (CSS) are modified to change the color and layout of the storefront. The new style is then made available as a display option for the Madisons starter store. The new style is selected in the Change Style wizard in WebSphere Commerce Accelerator, or in the Management Center Store Management tool if Feature Pack 2 or later is enabled.
- Stores\WebContent\Madisonss\css\common1_1.css
- Stores\WebContent\Madisonss\include\styles\style1
When customizing the store, you can either keep the default style and color or replace it with the customized assets. In this tutorial, both the default and customized style and color assets are kept by creating a set of CSS files and a style folder, rather than modifying the original files. The style configuration file is modified so the customized storefront style can be selected with WebSphere Commerce Accelerator, or the Management Center Store Management tool if Feature Pack 2 is enabled. See Style configuration in WebSphere Commerce for more information.
Learning objectives
- Change the appearance of the Madisons starter store.
- Add a new store style to WebSphere Commerce Accelerator.
- Add a new store style to WebSphere Commerce Management Center.
Time required
Expect this tutorial to take about 2 hours to complete.It can take longer to complete if you explore other concepts related to this tutorial.
Skill level
AdvancedAudience
This tutorial is intended for store developers customizing the appearance of the Madisons starter store.System requirements
Before beginning this tutorial, ensure that you have fulfilled the following prerequisites:- Installed WebSphere Commerce Developer
- Installed WebSphere Commerce Version 7
- Published the Madisons starter store
- Downloaded and extracted the images.zip file to a temporary location.
Prerequisites
Before starting this tutorial, you should have a basic understanding of:- CSS
- XML
- JSP files
- JSTL
- Management Center framework