Tutorials > Customize the Consumer Direct sample store > Add style options
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.
To create the preview images:
- Use copies of existing thumbnail images as placeholders:
- Navigate to the following directory:
- WC_eardi../images/locale/screensnap/Stores.war/tools/stores/ConsumerDirect/style/styles
workspace_dir\Stores\Web Content\tools\stores\ConsumerDirect\style\styles
- WC_eardi../images/locale/screensnap/Stores.war/tools/stores/ConsumerDirect/style/styles
- List the contents of the directory and observe that a thumbnail image GIF file exists for each style originally defined in the style configuration file.
- Make a copy of the style1.gif file in the same directory and name it style3.gif.
- Navigate to the following directory:
- WC_eardi../images/locale/screensnap/Stores.war/tools/stores/ConsumerDirect/style/colors
workspace_dir\Stores\Web Content\tools\stores\ConsumerDirect\style\colors
- WC_eardi../images/locale/screensnap/Stores.war/tools/stores/ConsumerDirect/style/colors
- List the contents of the directory and observe that a thumbnail image GIF file exists for each style-color combination originally defined in the style configuration file.
- Make copies of the color1_1.gif, color1_2.gif, color1_3.gif, and color1_4.gif files in the same directory and name them color3_1.gif, color3_2.gif, color3_3.gif, and color3_4.gif, respectively.
- Navigate to the following directory:
- Follow the instructions for changing store style to select the new style and the first style-color combination.
- Replace the placeholder style3.gif and color3_1.gif files created in step 1 with a thumbnail version of a screen capture of the store's home page that is displayed.
- Follow the instructions for changing store style to select the second style-color combination for the new style.
- Replace the placeholder color3_2.gif file created in step 1 with a thumbnail version of a screen capture of the store's home page that is displayed.
- Repeat steps 4 and 5 for the two remaining style-color combinations for the new style.