Changing the appearance of a 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 a starter store. The new style is selected in the Change Style wizard in HCL Commerce Accelerator or in the Management Center Store Management tool.

About this task

When customizing a store, you can either keep the default style and color or replace it with the customized assets. 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 in the Management Center Store Management tool.

Note: The steps in this tutorial are specific to the Aurora Starter store and may need to be modified for your storefront.
After you complete this tutorial, you will be able to:
  • Change the color design of your storefront.
  • Add a style to your storefront.
  • Change the design layout and font size of your page.

Procedure

  1. Register a new color in HCL Commerce so that it becomes available in your storefront:
    1. Update the color options for the starter store by doing the following:
      1. In the Enterprise Explorer view, navigate to LOBTools > WebContent > WEB-INF > src > xml > commerce > store > propertiesViews > storedir
      2. Open StoreFlexFlowPropertiesView.xml for editing.
      3. Locate the following code snippet and replace the store ID with your storefront's:
        <MultiValueSelector name="ColorPanelOptions" promptText="${FlexFlow_{storeID}.Styles.color.radio.label}" useRadioButtons="true">
      4. Add the following child MultiValueSelection object:
        <MultiValueSelection imageSrc="/lobtools/images/stores/{StoreDir}/style/colors/color1_3.png" name="color3">
        <Xml name="values">
        <url objectPath="StoreFileRef[name=vfile.color]">images/colors/color3/</url>
        <url objectPath="StoreFileRef[name=vfile.stylesheet]">css/common1_3$locale$.css</url>
        <url objectPath="StoreFileRef[name=vfile.stylesheetie]">css/commonie1_1$locale$.css</url>
         </Xml>
        </MultiValueSelection>
      5. Save your changes and close the file.
    2. Copy the new color background image to the starter store style directory:
      1. In the Enterprise Explorer view, navigate to LOBTools > WebContent > images > stores > storedir > style > colors
      2. Navigate to the temporary location where your new color image is stored and copy style\color1_3.png to the directory.
    3. The Aurora starter store supports the style1, color1 combination by default, where the CSS file name is common1_1.css. To support the style1, color3 combination, create a CSS file called common1_3.css, based on the default CSS file:
      1. In the Enterprise Explorer view, navigate to Stores > WebContent > storedir > css.
      2. Right-click common1_1.css and click Copy.
      3. Right-click css and click Paste.
      4. Rename the copy common1_3.css.
    4. The Aurora starter store contains the color1 directory by default for its background images. To support the new background images, create a directory called color3, based on the default directory:
      1. In the Enterprise Explorer view, expand Stores > WebContent > storedir > images > colors.
      2. Right-click color1 and click Copy.
      3. Right-click colors and click Paste.
      4. Rename the copy color3.
  2. Change the color of the storefront page by modifying the color attributes in a CSS file:
    1. Mark out the items you want to change in the page, and then find the attribute definitions in the CSS file. Use the debugging tool to determine the div definition of the page. A recommended debugging tool is Mozilla Firefox with the Firebug add-on.
    2. In the Enterprise Explorer view, navigate to Stores > WebContent > storedir > css.
      1. Open the common1_3.css file. Find the sections that you would like to modify and replace the values with new values.
      2. Save your changes to the file.
      3. In some areas, the color is defined by background images in the CSS file. To find the background images, use Firebug to see the div definitions, and find the background attribute in the CSS file.
      4. In the Enterprise Explorer view, expand Stores > WebContent > storedir > images > colors > color3.
      5. Navigate to the temporary location where your background image files are stored. Copy all the files into the color3 folder.
      6. In the common1_3.css file, change all background image files to point to the color3 folder by replacing all occurrences of colors/color1 with colors/color3.
      7. Save your changes and close the file.
  3. Register a new style in HCL Commerce so that it becomes available in your storefront:
    1. In the Enterprise Explorer view, navigate to LOBTools > WebContent > WEB-INF > src > xml > commerce > store > propertiesViews > storedir
      1. Open StoreFlexFlowPropertiesView.xml for editing to add the new style and color options.
      2. Locate the StylePanelOptions object:
        <MultiValueSelector name="StylePanelOptions" promptText="${FlexFlow_{storeID}.Styles.style.radio.label}" useRadioButtons="true">
      3. Add the new MultiValueSelection element to the end of the StylePanelOptions object::
        <MultiValueSelection imageSrc="/lobtools/images/stores/{StoreDir}/style/styles/style2.png">
        	<Xml name="values">
         		<url objectPath="StoreFileRef[name=StyleDir]">include/styles/style2/</url>
        		<url significant="false" objectPath="StoreFileRef[name=vfile.color]">images/colors/color1/</url>
        		<url significant="false" objectPath="StoreFileRef[name=vfile.stylesheet]">css/common2_1$locale$.css</url>
        		<url significant="false" objectPath="StoreFileRef[name=vfile.stylesheetie]">css/commonie1_1$locale$.css</url>
        	</Xml>
        </MultiValueSelection>
      4. Locate the PropertyPane object:
        <PropertyPane definitionName="cmc/store/Styles_{storeID}">
        		<dependency localName="FlexFlow_10101" moduleName="cmc/store/FlexFlow_{storeID}"/>
        		<PropertyGroup collapsable="false" name="group">
      5. Add the following MultiValueSelector element to the end of the PropertyGroup element:
        <MultiValueSelector name="ColorPanelOptions2" promptText="${stoFlexFlow_{storeID}.Styles.color.radio.label}" useRadioButtons="true">
        	<EnablementCondition objectPath="StoreFileRef[name=StyleDir]" propertyName="url" enablementValue="include/styles/style2/" />
        	<MultiValueSelection imageSrc="/lobtools/images/stores/{StoreDir}/style/colors/color1_1.png" name="color1">
        		<Xml name="values">
        			<url objectPath="StoreFileRef[name=vfile.color]">images/colors/color1/</url>
        			<url objectPath="StoreFileRef[name=vfile.stylesheet]">css/common2_1$locale$.css</url>
        			<url objectPath="StoreFileRef[name=vfile.stylesheetie]">css/commonie1_1$locale$.css</url>
        		</Xml>
        	</MultiValueSelection>
         <MultiValueSelection imageSrc="/lobtools/images/stores/{StoreDir}/style/colors/color1_2.png" name="color2">
        	 <Xml name="values">
        		<url objectPath="StoreFileRef[name=vfile.color]">images/colors/color2/</url>
        		<url objectPath="StoreFileRef[name=vfile.stylesheet]">css/common2_2$locale$.css</url>
        		<url objectPath="StoreFileRef[name=vfile.stylesheetie]">css/commonie1_2$locale$.css</url>
        	 </Xml>
         </MultiValueSelection>
         <MultiValueSelection imageSrc="/lobtools/images/stores/{StoreDir}/style/colors/color1_3.png" name="color3">
          <Xml name="values">
          	<url objectPath="StoreFileRef[name=vfile.color]">images/colors/color3/</url>
        		<url objectPath="StoreFileRef[name=vfile.stylesheet]">css/common2_3$locale$.css</url>
        		<url objectPath="StoreFileRef[name=vfile.stylesheetie]">css/commonie1_1$locale$.css</url>
        	 </Xml>
         </MultiValueSelection>
        </MultiValueSelector>
      6. Save your changes and close the file.
    2. In the explorer view, navigate to LOBTools > WebContent > images > stores > storedir > style > styles.
    3. Navigate to the temporary location where your style2.png image is stored and copy it to this directory.
    4. The Aurora starter store supports the style1, color1 combination by default, where the CSS file name is common1_1.css. To support the style2, color1, style2, color2, and style2, color3 combinations, create three new CSS files called common2_1.css, common2_2.css, and common2_3.css based on the default CSS file:
      1. In the Enterprise Explorer view, navigate to Stores > WebContent > storedir > css.
      2. Right-click common1_1.css and click Copy.
      3. Paste this file three times into the same CSS directory and rename the files common2_1.css, common2_2.css, and common2_3.css.
    5. Copy the style1 directory to style 2.
      1. In the Enterprise Explorer view, navigate to Stores > WebContent > storedir > include > styles > style1.
      2. Right-click style1 and click Copy.
      3. Right-click styles and click Paste.
      4. Rename the copy style2.
    6. Style-related files are stored in the Stores\WebContent\storedir\include\styles directory by default. Support multiple styles, by copying CachedTopCategoriesDisplay.jsp into the directory.
      1. In the Enterprise Explorer view, navigate to Stores > WebContent > storedir > Snippets > Catalog > CategoryDisplay.
      2. Right-click CachedTopCategoriesDisplay.jsp and click Copy.
      3. Navigate to Stores > WebContent > storedir > include > styles.
      4. Paste the file into both style1 and style2.
    7. Edit the TopCategoriesDisplay.jsp file.
      1. In the Enterprise Explorer view, navigate to Stores > WebContent > storedir > ShoppingArea > CatalogSection > CategorySubsection.
      2. Open the TopCategoriesDisplay.jsp file in a text editor.
      3. Locate the following line:
        <c:import url="${jspStoreDir}Snippets/Catalog/CategoryDisplay/CachedTopCategoriesDisplay.jsp">
      4. Replace it with the following line:
        <c:import url="${jspStoreDir}${StyleDir}CachedTopCategoriesDisplay.jsp">
      5. Save your changes and close the file.
  4. Modify the storefront page layout by creating a CSS file based on the current one to support the new layout design. Then, modify the position-related attributes of the items you would like to move:
    1. Mark the items that you want to change on the storefront. Use a debugging tool such as Mozilla Firefox with the Firebug add-on to determine the div definition of each item on the page.
    2. In the Enterprise Explorer view, expand Stores > WebContent > storedir > css.
      1. Open the common2_1.css, common2_2.css, and common2_3.css files and find the div definitions that you marked in the previous step.
      2. Replace the attributes of each div you want to change in all the CSS files. For example, locate #header-search and replace right in the class definition with a value of left.
      3. Save your changes and close the files.
  5. Change the font size of the storefront page by modifying the font-size attribute in the CSS file:
    1. In the Enterprise Explorer view, navigate to Stores > WebContent > storedir > css.
    2. Open the common2_1.css, common2_2.css, and common2_3.css files.
    3. Find a, fieldset and perform the following changes:
      1. In each file, locate font-size in the class definition.
      2. Replace the value 10 with the value 12.
    4. Save your changes and close the files.
  6. Test your customizations in the store preview in Management Center.