Story tips: Migrate your homepage sections and theme settings to a new version of Story
Here are some tips for migrating your settings and homepage sections when updating to the latest version of Story theme.
- 1
-
Download the new version of Story theme
In this step, you'll be downloading the latest version of Story from Shopify.
General instructions by Shopify:
How to update your theme
Here's a direct link to Story in the Theme Store:
Story Theme Download
Be sure you've done the following:
- Create a backup copy of your existing theme.
- 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.
- Click Add latest theme version or Add theme.
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".
- 2
-
Rename your the new downloaded theme
The newly added theme will sit in a section below your main live theme. This helps you differentiate your published theme theme from non-published themes. The large theme on top with the preview image of your homepage is the live/published theme (your current and older version of Story). Themes below the live theme are draft themes. These are unpublished and not live to the public. Rename the newly added theme, it's grouped with the non-published daft themes:
Choose Rename:
Rename the new theme to Story New.
Renaming the theme will help identify the newer version while you setup the theme in the next step.
- 3
-
Copy your settings and homepage sections
The following steps will help bring over your Homepage Sections and General Settings from your live version of Story to the newly downloaded version:
Open your Code Editor from your live (older version) of Story:
Type in data in the top filter bar and find in the Config folder:
settings_data.json
Click on the settings_data.json file to view the code.
This file holds your hompepage sections, colors, fonts and other general theme settings.
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.
- 4
-
Paste your settings to the new theme
Next, you'll be pasting all that code code to the same file in the new theme:
Return to the main Themes list. We will now edit code on the new version of Story. Be sure to open the right theme.
Use the Actions link and choose Edit code for the new theme, Story New:
Remember the top theme is your live theme and the themes below are your draft themes.
Important - Again, be sure you're working out of the new theme and not the one above which is your published/live theme.
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 from the code in Step 1.
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 Step 1 to copy that code again from your live theme.
Save the file.
You can now preview Story New:
- 5
-
Optional - Copy over your CSS style changes
This step is optional. If you have been saving override CSS code at the bottom of your theme.scss.liquid file, you can easily copy those changes over to the new theme.
Open the Code Editor from your live theme - Older version of Story:
In the top-left search bar, search for " scss" without the quotes:
Click on the file to view the code on the right side. Next, scroll to the very bottom of that file:
Use Command and Down-arrow on a Mac to automatically scroll to the very bottom:
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 from tutorials (if they still apply).
Next,
Open the draft theme, Story New and paste the override code at the bottom of that theme's theme.scss.liquid file.
Paste only the override styles that you might need. Remember, do not copy over all the CSS from the old theme.
Save the changes.
Your own code customizations
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.
Tips:
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/
Paste the current code from your Live theme on the right side and then use the Older versions link and copy the code over the left side (Important - Don't save after using the Older versions link, just copy the code and then cancel).
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.
Also - 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.