Preparing for a Theme Change

Once you have decided to change your store theme, it's tempting to go straight to the Theme Marketplace and apply a new theme. It's important to lay down some groundwork so your store continues to function how you want it to. Below, we have a series of recommended actions to take before switching to a new theme.

Back up your Current Theme

It is strongly recommended that you create a backup of your current theme as it is. This provides you with something to fall back to if you run into a problem when you change themes.

For Stencil themes, follow the steps for downloading a theme. If you have made changes in the Theme Editor, make sure to select the option Download your latest customization.

If you are using a legacy Blueprint theme, follow the instructions for backing up your store.

When presented with the option to download customized files only or all files, select all files. This way you will have all the necessary files for your site as it is now.

Blueprint Theme Download

Check your Installed Apps

Most apps in the App Marketplace work with the current theme platform. However, any apps that require you to paste code into a theme file will not transfer over to your new theme. Take note of which apps you currently use, then check Stencil and App Compatibility to see if there are any extra steps necessary for getting your app to work. Apps will include their own installation instructions.

 

Have a question about a particular app? Ask in the Apps & Integration area in our Community for specific information.

Check for Installed API Accounts

A majority of our available apps can be installed with a single click. However, some older apps may use our Legacy API Accounts. These apps may have unpredictable behavior on your new theme, so determine how important the app is to your business before purchasing a new theme. You may want to check whether you had a developer make a custom app. If possible, get in touch with the original developer to have them update the API to make sure it’s compatible with the Stencil framework.

Legacy API Account

Check the Header and Footer Files

On legacy Blueprint themes, custom code is often placed in the footer or header template files. These won’t transfer to your new theme. Check whether these files have any code added that you might want to use on your new theme. If there is code you want to use, you can save it and add it to your new theme.

Go to Storefront Design › Design Options then click on the More tab and select Template Files. This will display a long list of all the templates in the theme. For the header and footer files you'll want to click the Panels folder to find HeadHTML.html and Footer.html. If a file is highlighted in orange, then it has some customizations.

Template Highlight

Click on the action icon and select Compare. This will show you a side by side of the original default code and your custom version. Check for any extra code in these files. If there is code for making an app work, see Stencil and App Compatibility for resources on how to make the app work on Stencil.

Side by Side View

Not sure what the code does? Ask in the Themes & Design section of our Community.

Some customizations no longer need custom code because in Stencil themes, it is handled in the Theme Editor. For example, if you want to display credit card logos or remove "Powered by BigCommerce", you can change these in the Theme Editor.

Check your Carousel Images

When changing to a new theme, the slideshow Carousel image dimensions change. You will want to check the size of the images you currently use to make sure they are compatible with your new theme. See Finding Carousel Image Dimensions for methods of finding appropriate image dimensions.

For more help on adjusting Carousel images, see Fixing Distorted Images.

Navigation

Navigation Sample

The way your site’s navigation is displayed can be different between themes. Check how your new theme displays categories and web pages to make sure it makes sense for your business. For example, if you have a large category library, side navigation may be more suitable.

This is also a good opportunity to review your category structure. Is there a way to reduce the number of categories? Perhaps a category should be renamed. Making sure your navigation is easy to for your shoppers to find the product they want will go a long way to improving your conversion rate.

Announcing Upcoming Changes

Now that you have committed to using a new theme, consider making an announcement on your store's social media. It's a good way to let regular shoppers know that there will be a change.

Selecting a New Theme

You can search the Stencil Theme marketplace for the best theme to suit your needs. You can always change the color scheme using the Stencil Theme Editor, so you are not restricted to default colors of the theme. Themes can be filtered by the Industry they were designed for or by price. To learn more about the Theme Marketplace and how to use it, see The BigCommerce Theme Marketplace..

Theme Marketplace

When you find the right theme for your business, click Add Theme or Buy. When prompted, click Apply Later. This will save the theme to Store Storefront Design › My Themes and not apply it to your live store right away. This gives you time to adjust the theme and prepare before applying it to your live storefront.

 

Click Apply Now by mistake? Reapply your old theme to your store, then follow the instructions for Restoring your template. Note that we do not keep backups of your old theme and cannot restore old storefronts.

Next you'll want to consider if you want to work with a Design Partner or web developer. It is possible to do all the work on your own. However, if you are not familiar with web development or want customizations beyond your skill level, you will benefit from working with an expert. The next chapter will discuss how to find and work with a Design Partner. If you plan on doing the work on your own, skip ahead to Personalizing your New Theme.

 

Was this article helpful?