Upgrade a Legacy Theme

Version: AbleCommerce 9.0.2 version and later

Last Update: 06/29/21

If you are upgrading from a previous build and your theme doesn’t have Theme.config file defined, it will be still working as expected. However, if you go to theme’s manager in admin panel, you will notice a label saying “Upgrade” right next to theme’s name. This document describes the process of upgrading a legacy theme.

 

 

How do I upgrade a legacy theme?

Earlier versions of AbleCommerce (9.0.0 and 9.0.1) used theme specific views to provide with theme’s styles and script includes. In later versions, starting from AbleCommerce 9.0.2 the theme’s structure was updated and it now supports a theme configuration file called Theme.config. This configuration file allows you to set display name, description, stylesheets and scripts for theme.

If you are upgrading from a previous build and your theme doesn’t have Theme.config file defined, it will be still working as expected. To check your theme, go to Website > Store Design > Themes from the admin menu. If it's outdated, you will notice a label saying “Upgrade” right next to theme’s name. This is an alert to let you know that you need to update your theme to the latest standards.

 

Steps to create a Theme.Config

  1. Create a copy of the sample Theme.config which is located inside the root of your Theme directory. The exact location for the original file should be: /Website/Themes/Sample/Theme.config

  2. Paste the copied Theme.config to your own custom theme folder: /Website/Themes/{your_custom_theme_name}/Theme.config

  3. Open the file and make changes as needed. Reference the code below and change items that are bold. Be sure to change any additional files that may be in use for a custom site. Save when finished.

<?xml version="1.0" encoding="utf-8"?>

<Theme>

  <DisplayName>Your Custom Theme Name</DisplayName>

  <Description>The description for your custom theme.</Description>

  <StyleSheets>

    <Include Path="Content/fonts.css"  />

    <Include Path="Content/font-awesome.min.css" />

    <Include Path="Content/animate.css" />

    <Include Path="Content/style.css" />

    <Include Path="Content/color/dark-blue.css" />

    <Include Path="Content/default.css" />

    <Include Path="Content/skin.css" />

    <Include Path="Content/custom.css" />

  </StyleSheets>

  <Scripts>

    <Include Path="Scripts/bootstrap-hover-dropdown.min.js" />

    <Include Path="Scripts/SmoothScroll.js" />

    <Include Path="Scripts/custom.js" />

  </Scripts>

</Theme>

 

NOTE: You can have any number of Include elements inside both the StyleSheets and Scripts elements where every include Path attribute will point to the resource URL. You can use relative or absolute URLs inside Path attribute.

  1. Once the new Theme.config is added, you no longer need to have _ThemeScripts.cshtml and _ThemeStyles.cshtml. Remove these two files from your Theme’s /Views/ directory. This will automatically make the system use the correct views.

    NOTE: If you are not overriding any of the default views of Ablecommerce then you can remove the entire /Views/ folder from Theme’s directory. The /Views/ folder will only be needed if you are overriding any of the application view files. For example, _ThemeScripts.cshtml and _ThemeStyles.cshtml can be overridden in the theme folder if custom handling for script and style includes is present. Otherwise, the /Views/ folder is not needed and can be removed.

  2. To confirm the upgrade was successful, revisit the Website > Store Design > Themes page from the admin menu. If the "Upgrade" label is no longer present next to your theme, then you have successfully upgraded your theme to the latest standards.