Announcement: You can find the guides for Commerce 7.5 and later on the new Elastic Path Documentation site. The Developer Center continues to support Commerce 6.13.0 through 7.4.1.Visit new site

Themes

Themes

Themes are used to define the look and feel of stores in Elastic Path Commerce. You can create multiple themes and have different themes for different stores. You can also customize theme elements for individual stores without affecting other stores that use the same theme.

Theme structure

Themes are stored in a subdirectory of your deployment's assets directory. Your assets directory is specified in the COMMERCE/SYSTEM/ASSETS/assetLocation setting.

Note:

You can customize the name of the themes directory by changing the COMMERCE/SYSTEM/ASSETS/themesSubfolder setting.

A theme consists of a set of Velocity templates and resources required to display a storefront (stylesheets, images, properties files, etc.). Each theme is stored in its own directory under the assets/themes directory:

assets
+-themes
  +-electronics
  +-mytheme1
  +-mytheme2
  +-...

Each theme must contain a default directory. This directory contains the templates directory and the template-resources directory. templates contains the Velocity templates. template-resources contains the stylesheets, Javascript files, and images referred to by the templates.

assets
+-themes
  +-electronics
    +-default
      +-template-resources
        +-images
        +-js
        +-stylesheet
      +-templates
        +-velocity
          +-index.vm
          +-...

Within these directories, you can use any directory structure you want to organize files.

Customizing a theme

Themes can be customized to suit the needs of individual stores.

To customize a theme for a specific store, create a directory under the theme and set the directory name to the store code. For example, to customize mytheme1 for the SNAPITUP store, create a directory named SNAPITUP under mytheme1. The directory structure should look similar to the following:

assets
+-themes
  +-mytheme1
    +-default
    +-SNAPITUP

In the store-specific directory, create copies of the files that you want to customize. The copies must exist in the same relative directory structure within the store-specific directory. For example, to customize the mytheme1/default/template-resources/images/image-not-available.png image for the SNAPITUP store, place the custom version of image-not-available.png in mytheme1/SNAPITUP/template-resources/images.

assets
+-themes
  +-mytheme1
    +-default
      +-template-resources
        +-images
          +-image-not-available.png
        +-...
    +-SNAPITUP
      +-template-resources
        +-images
          +-image-not-available.png

It is not necessary to copy the entire contents of the default directory into the store-specific directory. You only need to include copies of the files that you are customizing. The application looks for files in the store-specific directory first. If it cannot find a file in the store-specific directory, it will then look for it in the default directory.

Selecting a theme using the store editor

You can select assign a theme to a store within the Commerce Manager.

  1. In Commerce Manager, choose Activity->Configuration.
  2. Under Stores, click Stores.
  3. Select the store, then click Edit Store.
  4. Click the Theme tab.
  5. Select the theme you want to assign. The names correspond to the names of the directories located under the root theme directory. For example, if the theme folder is C:/Program Files/Apache Software Foundation/apache-tomcat-5.5.26/assets/themes/mytheme1, enter mytheme1.
  6. In the Commerce Manager toolbar, click Save.

Selecting a theme

You can also change the theme of a store in the system configuration settings.

  1. In Commerce Manager, choose Activity->Configuration.
  2. Under System Administration, click System Configuration.
  3. In the Property Name list, select COMMERCE/STORE/theme.
  4. Click New (next to the Defined Values list).
  5. Set the values as follows:
    Context The store code. For example, for the Snap It Up demo store, the store code is SNAPITUP.

    Value

    The name of the theme folder. For example, if the theme folder is C:/Program Files/Apache Software Foundation/apache-tomcat-5.5.26/assets/themes/mytheme1, enter mytheme1.

  6. Click Save.