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
-
Register a new color in HCL Commerce so that it becomes available in your storefront:
-
Update the color options for the starter store by doing the following:
- In the Enterprise Explorer view, navigate to LOBTools > WebContent > WEB-INF > src >
xml > commerce > store > propertiesViews > storedir
- Open StoreFlexFlowPropertiesView.xml for editing.
- 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">
- 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>
- Save your changes and close the file.
-
Copy the new color background image to the starter store style directory:
- In the Enterprise Explorer view, navigate to LOBTools > WebContent > images > stores
> storedir > style > colors
- Navigate to the temporary location where your new color image is stored and copy
style\color1_3.png to the directory.
-
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:
- In the Enterprise Explorer view, navigate to Stores > WebContent >
storedir > css.
- Right-click common1_1.css and click Copy.
- Right-click css and click Paste.
- Rename the copy common1_3.css.
-
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:
- In the Enterprise Explorer view, expand Stores > WebContent >
storedir > images > colors.
- Right-click color1 and click Copy.
- Right-click colors and click Paste.
- Rename the copy color3.
-
Change the color of the storefront page by modifying the color attributes in a CSS file:
-
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.
-
In the Enterprise Explorer view, navigate to Stores > WebContent >
storedir > css.
- Open the common1_3.css file. Find the sections that you would like to
modify and replace the values with new values.
- Save your changes to the file.
- 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.
- In the Enterprise Explorer view, expand Stores > WebContent >
storedir > images > colors > color3.
- Navigate to the temporary location where your background image files are stored. Copy all the
files into the color3 folder.
- 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.
- Save your changes and close the file.
-
Register a new style in HCL Commerce so that it becomes available in your
storefront:
-
In the Enterprise Explorer view, navigate to LOBTools > WebContent > WEB-INF > src >
xml > commerce > store > propertiesViews > storedir
- Open StoreFlexFlowPropertiesView.xml for editing to add the new style and
color options.
- Locate the StylePanelOptions
object:
<MultiValueSelector name="StylePanelOptions" promptText="${FlexFlow_{storeID}.Styles.style.radio.label}" useRadioButtons="true">
- 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>
- Locate the PropertyPane
object:
<PropertyPane definitionName="cmc/store/Styles_{storeID}">
<dependency localName="FlexFlow_10101" moduleName="cmc/store/FlexFlow_{storeID}"/>
<PropertyGroup collapsable="false" name="group">
- 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>
- Save your changes and close the file.
-
In the explorer view, navigate to LOBTools > WebContent > images > stores >
storedir > style > styles.
-
Navigate to the temporary location where your style2.png image is stored
and copy it to this directory.
-
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:
- In the Enterprise Explorer view, navigate to .
- Right-click common1_1.css and click Copy.
- Paste this file three times into the same CSS directory and rename the files
common2_1.css, common2_2.css, and
common2_3.css.
-
Copy the style1 directory to style 2.
- In the Enterprise Explorer view, navigate to Stores > WebContent >
storedir > include > styles > style1.
- Right-click style1 and click Copy.
- Right-click styles and click Paste.
- Rename the copy style2.
-
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.
- In the Enterprise Explorer view, navigate to Stores > WebContent >
storedir > Snippets > Catalog > CategoryDisplay.
- Right-click CachedTopCategoriesDisplay.jsp and click
Copy.
- Navigate to Stores > WebContent > storedir > include > styles.
- Paste the file into both style1 and
style2.
-
Edit the TopCategoriesDisplay.jsp file.
- In the Enterprise Explorer view, navigate to Stores > WebContent >
storedir > ShoppingArea > CatalogSection >
CategorySubsection.
- Open the TopCategoriesDisplay.jsp file in a text editor.
- Locate the following line:
<c:import url="${jspStoreDir}Snippets/Catalog/CategoryDisplay/CachedTopCategoriesDisplay.jsp">
- Replace it with the following
line:
<c:import url="${jspStoreDir}${StyleDir}CachedTopCategoriesDisplay.jsp">
- Save your changes and close the file.
-
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:
-
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.
-
In the Enterprise Explorer view, expand Stores > WebContent >
storedir > css.
- 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.
- 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.
- Save your changes and close the files.
-
Change the font size of the storefront page by modifying the font-size attribute in the CSS
file:
-
In the Enterprise Explorer view, navigate to Stores > WebContent >
storedir > css.
-
Open the common2_1.css, common2_2.css, and
common2_3.css files.
-
Find a, fieldset and perform the following changes:
- In each file, locate font-size in the class definition.
- Replace the value 10 with the value 12.
-
Save your changes and close the files.
-
Test your customizations in the store preview in Management Center.