Redesigning a Theme

How do you redesign a live transactional website? This article is written for redesigning a website already on the Evance platform. 

As developers we advise regular incremental improvements, but as designers we understand creative cravings. The urge to give a website a radical makeover is seductive. More importantly it can reinvigorate enthusiasm in your business. But, if you've been designing websites for a while, you'll understand the pain of getting from design to production, and then from testing to the dreaded migration. 

In Evance 5+ you can start implementing a new design using all of your live site's data without having to create or copy data into a test site; preview your design whilst browsing live data; have a different navigation structure or even allow different content on some of the pages (usually the case with the homepage); and then once your happy, launch your new design in seconds with no downtime, no caching issues, and no loss in data integrity.

Getting Started

Whether you'd like to use your existing theme as a basis for your new design, modify a freshly installed theme, or start from scratch, the process is largely the same. For the purposes of this article we're going to use the original theme as a basis to design from. This is the preferred method for established websites as duplicating your existing theme will keep any custom templates, presets or settings that you've already made. 

Duplicating your existing theme

Direct your browser to Evance's Code Editor. Ensure you have selected the theme you wish to duplicate and from the current theme menu select the "Duplicate" option. You'll be presented with a dialogue window to enter the name of your new theme. 

Previewing your new theme

Now that you've duplicated your original theme you can now preview the new theme. When you do this Evance will remember your theme selection for your current session. You'll be able to browse the front end of your website and edit your website whilst viewing the new theme within Evance. Each time you start a design session you will need to repeat this step. Whilst you can see your website evolve as you change the design your live visitors are none-the-wiser. 

Making changes

Now that you have everything set-up and ready to go you can freely make changes to the source code of your new theme and preview your changes using live data. More importantly you don't have to stress yourself out about breaking visual appearance of your live website, because all of your visitors are still seeing the original theme. You should be aware that although you can edit pages within the CMS during preview mode, any changes you make will affect the live website. If you need to make content changes you might consider "Catering for different content" below. 

Implementing a different navigation set

If your new design requires a different navigation structure in the header or footer of your layout you do this by creating a new menu within the CMS menu manager and use the reference to the new menu in your layouts. 

Catering for different content

Your new design may require you to add or change content on one or more of your pages. Due to the way Evance builds web pages you can cater for changes in content. In this example we focus on the homepage, because this is where most changes generally occur with a redesign. 

Editable regions for Pages

Both the <ev:editable> and <ev:translate> tags allow you to create entirely custom IDs for the content on the page. Usually you will find an <ev:editable> with an ID of "Main" or "primaryContent" for your primary body of content. But, perhaps in your new design you want even the content of the page to be different. So you may simply rename the IDs in your new template and this will allow you to safely edit the site in the CMS for your redesign, whilst your live site remains unaffected. 

Page Assets

Let's say you have a slideshow on your homepage using assets. But, when you relaunch your site you'd like a new set of slides. It is now possible to rename the asset id in your new theme and start building a fresh set of slides within the CMS.  So long as the IDs are different you will not affect the original content on the live website. If your exclude the original asset id from your new page's theme settings then you will not see the original assets and therefore you should not affect them when you make changes.  This method also acts almost like a backup, just in case you wish to roll the update back to the original theme after launch. 

Page & Template Settings

As with Asset settings you can achieve the same with Page and Template settings. These settings are generally used to determine colour, links or viewable areas on the page. So you may wish to rename these if the design layout is vastly different to the original. Again, by using different IDs you will effectively provide  rollback point in case your wish to revert the new design later. 

Limitations with Categories and Products

Unlike pages managed by the CMS, Categories and Products do not permit different editable regions for their primary content, this is for the purposes of practicality. Many sites have hundreds or thousands of products so redesigning your theme should accommodate existing product content. However, adding additional editable regions to these pages is possible using the <ev:translate> tag. 

Inviting others to preview

Once you've made changes to your theme you can invite other users to preview your new design using the "Invite to Preview" option in the theme menu in the Code Editor. Invite any Evance user for the same Account and Evance will send an email invitation to your client/colleague with a link to preview. 

Publishing your new theme

Once you have thoroughly test your new design and it's time to launch head on over to Evance's Code Editor. Select the appropriate theme from the theme selector and then select the Publish option from the subsequent theme menu. Once you confirm that you wish to publish the change should instantaneous and all visitors to your site whether in an existing session or a new session will see your new design.