TIps: Migrating your settings and homepage sections to a new version of Broadcast

Here are some tips for migrating your settings and homepage sections when updating to the latest version of Broadcast theme. 

1

Download the new version of Broadcast theme

In this step, you'll be downloading the latest version of Broadcast from Shopify. 

General instructions by Shopify:
How to update your theme

Here's a direct link to Broadcast in the Theme Store:
Broadcast Theme Download

Be sure you've done the following:

1. Create a backup copy of your existing theme.
2. Visit the Shopify Theme Store and log in. For paid themes, it is important to log in to the account that you used to buy the theme. This will prevent you from being asked to buy the theme again.
3. Click Add latest theme version:

Tip: You must be logged-in to the account that purchased the original theme.

If you see "Try theme" and "Buy theme" options, logout and log-in again with the account that purchased the theme. Be sure the main button has "Add latest theme version". 

Here are some tips for migrating your settings and homepage sections when updating to the latest version of Broadcast:

When you download a new version of Broadcast, the new version is added as a draft theme. It won't update or replace your live version that's currently running the store. You can copy over the contents of settings_data.json from your existing (earlier version) of Broadcast over to the new version. Doing so will copy over essential settings throughout the theme and your homepage sections. If you've made code changes and CSS overrides, these will have to be manually created on the new theme version as those type of changes won't migrate over. The following steps will help with theme updates:

The newly added theme will sit in a section below your main live theme. This helps you differentiate your published theme theme (live theme) from non-published themes (draft theme). 

(1) The theme on top with the preview image of your homepage is the live/published theme (your current and older version of Broadcast)

(2) The new updated theme from your download, added to the the lower non-published or draft themes: 

2

Rename your the new downloaded theme

To help organize your versions and avoid making changes to the wrong theme, rename your live theme to Broadcast old:

Rename to "Broadcast Old":

Use the Rename button to complete.

Next, rename the new theme from the drafts list using the Actions link:

Choose rename and rename to "Broadcast New":

Use the Rename button to complete. 

Both themes will be easily identified now:

You can now start customizing the Broadcast New theme while your live website is still running the older version of Broadcast. 

Copy over your settings and homepage sections

The following steps will help bring over your Homepage Sections and General Settings: 

Use the Actions link on Broadcast Old, choose Edit code:

From the config folder, open settings_data.json:

Click the filename to view the code on the right. 

This file holds all your settings and homepage sections. 

Copy all the code from the right code section:

Use Command-A (Mac) or Control-A (Win) to select all:

Then Command-C (Mac) or Control-C (Win) to copy all the selected code.

Paste the code into Broadcast New

Return to the main Themes list. We will now edit code on the new version of Broadcast. Be sure to open the right theme.

Use the Actions link and choose Edit code for the new theme, Broadcast New:

From Actions, choose Edit code. 

Next, in the Code Editor - Type in data in the top filter bar and search for data:

Click on settings_data.json in the Config folder to see the code. 

Next, replace all the code in this file which we copied earlier. 

Use select all (Command-A on Mac or Control-A in Win) to highlight all the code:

Then replace all the code by using paste (Command-V on Mac or Control-V in Win).

Remember, we are copying from your live theme to the new draft theme. 

If you don't have the code from Step 1 in your clipboard, then go back to the earlier step and copy that code again from your live theme.

Save the file:

Preview Broadcast New

You can now Preview your new theme from the drafts list:

Copy over your CSS style changes

This step is optional. 

If you have been saving CSS override code at the bottom of your theme.scss.liquid file, you can easily copy those changes over to the new theme (if still needed):

Open the Code Editor from your live theme - Broadcast Old:

From the Assets folder, open theme.scss.liquid:

Click on the file to view the code on the right side. Next, scroll to the very bottom of that file:

Keyboard shortcuts: Mac use Command-DownArrow to reach the bottom of the file quickly or on Windows use the End key.

Make sure you've scrolled to the bottom. 

If you have override CSS code here, you can copy certain elements from this lower section over to the new theme. Only copy over css overrides from the bottom. Do not copy all the CSS. 

Important: Be sure not to copy all the CSS from the old theme to the new theme - That will break your theme. Only copy the overrides that you might have added (if they still apply).

Additional tips - Your own code customizations and app code

Any code customizations you've done to your old/live them will need to be done manually to the new theme. Some apps will require these customizations so refer back to their installation instructions to integrate with the new theme.

For files you create/modify - Shopify does place a blue dot next to the file in the code editor (your Live theme):

That helps you see which files were created or modified. Most of those files have version tracking (not the CSS or JS files) so you can go to:

https://www.diffchecker.com/

Example:

Use the button below to check the differences:

This will show you what's been added (green) and removed (red). It may help you with understanding the changes you made on your Live theme. You can document those changes as reference when updating your custom code in the new theme. 

Keep in mind Broadcast theme files might have been updated with the new version. This technique is helpful for finding code you've added and just need to locate where exactly. 

You can still refer back to your Live theme while setting up the new theme. If you need to copy some code, switch to the Live theme (or make a duplicate and work out of that) and copy the code needed over to the new theme. It's important to NOT copy all the code from the CSS file or Javascript file over to the new theme. That will most certainly break your new theme. 

Apps

Most apps add code to this file:

You can use Diffchecker to find changes. 

We strongly recommend you visit the App Developer's support site to find details on how to installed their app to a new theme. 

Most app developers will have published information about how to reinstall their app after changing themes. 

Publishing your theme

Once you have the new theme looking good, you can publish it from the themes list in the Actions menu: