IMPORTANT NOTICES

This article only applies to you if your application was created before October 2022.

If your app was created in October 2022 or later, then some of these steps must be completed before December 7, 2022 and will not be possible after that date. Others are safe to do after you have already upgraded.


Introduction

This article will walk you through: what you need to do before you update, how to update, and finally what to do after you update.

There may be some videos that don't apply to you and your application(s). Each step of this article will show you how to tell when a step applies to you and whether or not you can skip a section. Follow the directions and click the "Skip to:" buttons as they apply to you.

Is the update required?

Whether you opt in to the update early or not, the Fall 2022 Update will be applied automatically to all apps on December 7, 2022.

Do I need to do anything before going through the update?

The only step that must be taken before December 7 on your own is Backing up your Theme Customizations. This step is not necessary for most users, (see Identifying if you have Theme Customizations later in this article) but failure to do so could result in the loss of any Theme Customizations on your site. Customizations lost in this way can not be recovered. If you only do one step in this entire article, back up your customizations.

Do I have to change how I use Memberships/Product Bundles in order to take advantage of these "Collections"?

After the Fall 2022 Update, it will no longer be possible to put Product Bundles/Memberships inside one another. Any nested Product Bundles/Memberships will be separated from each other. This may require changes to how you organize your Products and Content.

Do I need to follow these steps for every CustomerHub app I have access to?
Any admin can follow these steps but completing the update for one app will not apply the update to all of your apps. These steps need to be followed on an app by app basis.


Preparing for the Update

Nested Collections

When you look at your products in your CustomerHub admin Product Bundles and Memberships have a little badge on them.

For example, in this image above, Comic Books 200 and Comic Book Bundle have this little badge at the bottom that says "bundle"

If none of your products have these grey badges that say either "membership" or "bundle" then this video will not apply to your application and you can skip ahead by clicking this button:

If you are using nested Collections in your CustomerHub app, they will be separated to avoid app breaking bugs.

Identifying if you have Theme Customizations

If you have Theme Customizations you would like to preserve, then continue on to the step below. Should you choose to, then making a back up of your Theme Customizations is the only step that can not be completed after your theme has been updated. If you don't have time to apply your theme customizations before the update goes through, then your app will continue to function as intended, and you will be able to apply those Customizations as you see fit, when you are able to. But only if you have made your back up of them.

Backing up your current Theme Customizations


NOTE: This is the only step that can not be completed after your CustomerHub app has been updated.


If you don't have any theme customizations that you need to back up before updating, you can skip ahead to this section of the article:

CustomerHub doesn't have a way to save a copy of your Theme customizations natively on the site (Yet!) so you'll have to save any customizations via the tried and true Copy and Paste method.


NOTE: If you are very confident that you have not made any customizations to your Theme then you can skip ahead to upgrading to the new update, BUT it doesn't hurt to check first! Once you have updated to the new version you will not be able to recover any changes that you did not save beforehand.


First you'll need a place to paste it!
You can download a folder with a file for each of the pages you can customize here:

Once that is downloaded, duplicate the folder and rename one of them so you can tell them apart. One of these folders will be used to paste your code into, and the other will be used to compare your code to the default code. This will make it easier for you to pick out specific parts that you were using (where applicable).


NOTE: Do not open these documents with Microsoft Word or anything else that will format the text. You can open and access these files much more effectively with a program like Notepad or a Development environment like VS Code, Sublime Text, or Notepad++. These programs will not change the contents of the files or the code that you paste in, unlike Word.


When you've downloaded and extracted it, the files should look like this:

There is one folder for each tab in the Theme settings, and one file for each file you can customize.

To access your Theme settings click on the gear at the bottom left, then click on "Theme"

Here you will see six tabs all used to customize your Theme.

Colors - The colors don't need to be saved as a file. You just need to make sure you have a record of the Hex Codes for each field. You can do this with copy and paste into a text document, or you can just take a couple of screenshot likes this:

Fonts - Can be saved the same way as the Colors tab.

CSS - Under the CSS tab there are multiple files but only the "Overrides" file can be edited. So if there is any text in that file copy it and paste it into the corresponding file in your backups folder.

JavaScript - By default, the JavaScript tab should have no code in it. If you see any at all, make sure to copy it to the backups folder.

Components - This tab is divided into a series of folders; one for every type of component you can add in the Page Builder. Don't worry, It's very easy to see which components have edits in them!

If a component has been edited it will have the "Reset" option next to it. If it has not been changed it will have the option to either view it without editing (the eye option) or to customize it.

Click on the "pencil icon" of the first component you see that has been customized. For this example I will use the Audio Component.

In each component there are three files to copy. This doesn't mean that all of these files have changes though. To know for sure, you can compare the default files against your current theme using this site. Just paste the default code on the left, and your code on the right, then click on the "Find Difference" button. You may need to scroll down to see it and it looks like this:

Repeat this for each of the 3 files in the folder. Any of the files that are different from the Default Code, will need to be saved.

If the website says all three files are identical to the Default files, then you don't need to copy any code from the component.

Once you've done that, you can hit the "X" in the top left next to the component's name and repeat this process for each of the other components that have customizations.

Once you are sure you have copied all of the customized code and saved it to your computer, you can move on to the "Layouts" tab.

Layouts - This tab will be very similar to the components tab except that each layout only has one file instead of 3. If you're layouts tab looks like this:

Then you have no custom layouts and this tab requires no action.

If any of your layouts that look like this:

Then you will need to copy that code into your backups folder.

Clearing all of your Customizations

Once you have finished backing up all of your customizations, then you will need to restore the defaults before you update.


Make absolutely sure that you have saved all the files with custom code in them. Once you reset your theme, you will not be able to recover any code that was not saved.


To do this do the following in any order:

  • Remove all code from the "Overrides" file in the CSS tab

  • Remove all code from the JavaScript Tab

  • Click the "Reset" button on all Components and Layouts

Once you have completed these steps, click on the Save button, wait for it to finish spinning, then click the Publish button.

Once the Publish button finishes spinning, you're ready to update!


Performing the Update

Log into your app at customerhub.com and you should see a banner at the top to upgrade. Click the learn more button and follow the steps provided.

If you don't see the banner a the top, then try refreshing the page and logging out/logging back in. If these don't work then check to see if you have already updated. And easy way to check is to go to your "Products" page. Only apps that have already updated can edit the titles of products by clicking on the pencil next to their name. There is no pencil to click on for apps that haven't upgraded yet.


Re-Implementing your Custom Code

Welcome to your new Theme! I think you're going to really enjoy some of the new features. You can learn more about those features here

If you did not backup your Theme Customizations before updating, then this video doesn't apply to you. In fact, if you don't have any Theme Customizations to carry over, then there's nothing left to do but enjoy all of the new features! Great job!

Otherwise the following video will outline what you need to do next.

To implement your theme customizations from the old theme, we will go through each tab again just like before.


Colors - manually type out or copy each of the Hex codes into each of the corresponding fields.

Fonts - manually type out or copy each of the font names and sizes into each of the corresponding fields.

CSS - Paste the Overrides code from your backup into the Override file on the site.

JavaScript - Paste your backed up JavaScript Code into the JavaScript tab.

Components - Almost all components have undergone some change. The biggest occurring in the Product Card Component. Unfortunately this means that you will not be able to paste all of your original code back in. You will need to first look for the differences between your custom code and the original code, then select that and paste it where it works in the new code. You can identify these snippets using the diffchecker site again.

Layouts - The biggest changes in this update are in the Layouts tab. You will not be able to simply paste all of your layouts from your backups into these layouts without breaking things. The main changes in this update are:

  • Membership/Bundle Layout has been changed to Collections Layout

  • Collections Dashboard Layout has been added

  • Minor changes to most other layouts

To avoid breaking your new site, you can go to https://www.diffchecker.com/diff again and check your backed up code to the default code again. Not the new code that is on the site, but the default code from the old site downloaded from the button in this section. Using the diff checker, you can see the specific code that you added to your old site and where it fits. Then you can look in the live site and paste it wherever you need it.
Whenever you make a change, make sure to save the theme and publish it, then log in as a test user to check it out. That way if anything goes wrong, you only have to remove the code that you pasted in one spot to fix it rather than trying to figure out where the mistake is. If you can't find where you made a mistake, then you can always reset the layout, save, publish, and try again.

Repeat this process for every layout that you customized.

Once you’ve completed this process your site will include both the new changes to the Motivate theme introduced with the product update and will also include your prior customizations. Hooray and great job!

Did this answer your question?