Tutorials > Customize the Consumer Direct sample store
Tutorial: Adding style options
This tutorial shows you how to add a new style to a store based on a consumer direct sample store
Learning objectives
By default, the consumer direct sample store contains two styles, six colors, and four banners. During this tutorial, we will add a new style and make it available in the Change Style wizard in four of the six existing colors.
Time required
Expect this tutorial to take about two hours.
Audience
This tutorial is intended for WebSphere Commerce store developers.
Prerequisites
To complete this tutorial you should be familiar with the following terms and concepts:
- Style configuration
- Storefront customization
- WebSphere Commerce Flow infrastructure
- Publish a store archive
- Changing store style
Before beginning this tutorial, ensure that:
- You have successfully published the consumer direct sample store.
- You can access the Change Style wizard for the store.
Lessons in this tutorial
- Define a new style in the style configuration file
This section refers to defining a new style in the style configuration file.
- Create the style sheets
In this step of the tutorial, we will create a new Cascading Style Sheet (CSS) for each style-color combination defined in the previous step.
- Create new header, footer, and sidebar JSP pages
In this step of the tutorial, we will create a new header, footer, and sidebar JSP pages for the new style based on existing ones.
- Add style features to the feature repository
In this step of the tutorial, we will add the style features to the feature repository.
- Create preview images for the new style
In this final step of the tutorial, we will create the preview thumbnail images for selecting the new style and color combination in the Change Style wizard.