SoftSlate Commerce
Home » Documentation » HTML Documentation

Customizing the Core Layout Files

Customizing a particular screen to add your own HTML, text, or graphics is one thing. But to implement a complete design, you will no doubt need to customize the core layout files that control the layout of each of the various screens in SoftSlate Commerce. These files provide the overall structure of each of the screen, while the other files in the application fill in the "guts" of the screens' content.

To customize one of the core layout files, use the same method as customizing any other JSP template: copy the default template from the default directory to the custom directory, and then make whatever changes you need to.


You may find your design calls for using the Left Layout on all of the screens that by default use the store's Basic (full-screen) Layout, or vice-versa. A simple technique for making this happen is to copy both layout.jsp and leftLayout.jsp into the custom directory. Then, if you want to use the Left Layout in place of the Basic Layout, you can simply replace the contents of layout.jsp with the following:

<jsp:include page="leftLayout.jsp"/>

There are three layouts employed by the application: Center Layout, Left Layout (default-xhtml layout only), and Basic Layout. These layouts are produced by core/centerLayout.jsp, core/leftLayout.jsp, and core/layout.jsp respectively. Use the following table to find out which layout file corresponds to which screens.


The Center Layout is not applicable to the legacy "default-xhtml" set of templates. To implement a right-hand column for the "default-xhtml" layout, see this forum topic:

Table 12.1. SoftSlate Commerce's Core Layouts and Their Screens

Center Layout core/centerLayout.jsp Features a column on the right-hand side of the screen. The right-hand column displays the store's Built-In Categories. Welcome Screen
About Screen
Contact Screen
Search Screen
Left Layout (default-xhtml layout only) core/leftLayout.jsp Features a column on the left-hand of the screen. By default the left-hand side displays the store's category tree, a search box, and the user's cart. Category Screen
Product Screen    
Product List Screen    
Search Results Screen    
Cart Screen    
Login Screen    
Register Screen    
Lost Password Screen    
Checkout Invite Login Screen    
Checkout Force Login Screen    
Checkout Invite Register Screen    
Basic Layout core/layout.jsp Simply displays the screen's content in the middle of the page, between the header and footer. Used in the deafult-html5 templates for all screens other than those listed under Center Layout. Error Screen    
Order Form Screen    
Account Addresses Screen    
Account Password Screen    
Account History Screen    
Account History Details Screen    
Checkout Addresses Screen    
Checkout Payment Screen    
Checkout Combo Screen    
Checkout ConfirmScreen    
Checkout Thank You Screen    

Example 12.2. Customizing the Layout of the Checkout Screens

  1. If you need to change the layout of the all screens in the checkout process, refer to the above table. As you can see the layout to customize is the Basic Layout, which is controlled by the layout.jsp file.
  2. Make a copy of the layout.jsp file that appears in the /WEB-INF/layouts/default-html5/core directory and place it in the /WEB-INF/layouts/custom/core directory. (As with the other JSP templates, you should place copies in the custom directory because the files in the default directory may be overwritten with a future upgrade.)
  3. Now, feel free to make whatever changes you need to to the copied file. Upload the file into the SoftSlate Commerce application, and you're changes should take effect immediately, on all the screens that correspond to the layout file.

Copyright © 2009-2017 SoftSlate, LLC. All Rights Reserved.

Powered by SoftSlate Commerce

Foraker Design