Feature Pack 8: The Madisons store is deprecated. Most features demonstrated in the Madisons store are available in the Aurora store.

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.

The Madisons starter store provides one style and two colors by default. The assets related to the storefront style are in the following locations:
  • 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

After completing this tutorial, you will be able to perform the following tasks:
  • Change the appearance of the Madisons starter store.
  • WebSphere Commerce Version 7.0.0.0Feature Pack 1 Add a new store style to WebSphere Commerce Accelerator.
  • Feature Pack 2Feature Pack 3 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

Advanced

Audience

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
  • Feature Pack 2Feature Pack 3 Management Center framework