Detailed tips for migrating to a newer version of Pipeline

This article includes some additional information and tips to assist when updating your theme. 

Key filename changes

If you're updating from a version of Pipeline before Pipeline 4. There are a couple of key filenames that have changed. Here's a reference:

Shopify Font Library

See all the new fonts available in Pipeline:
https://help.shopify.com/themes/development/fonts/library

Example of the new settings and font picker:

Note:
With the new font picker, your old font settings will not migrate over. You'll need to choose your fonts again. Use the original theme as a reference for which fonts you had selected. 

Navigation changes

Shopify has introduced a new Nested Navigation system with full drag and drop menu creation. Previous versions of Pipeline can switch to the new Nested Navigation system in the Navigation Editor. Pipeline 4 only supports Shopify's new Nested Navigation. This means if you're updating from a previous version of Pipeline, your navigation will be forced to use Nested Navigation.

If your site was using the old navigation system - You will need to create new sub-menu items within your Main Menu navigation. The first level of your Menu Menu will still be there, all sub-menu items will need to be created again. Previously, you were able to link other menus to create drop-down menus or Meganav. Now you'll need to create menu items within your Main Menu, then drag and drop under each parent menu to build sub-menus. 

Learn more about Shopify's new Nested Navigation: 

How to create a drop-down menu using nested navigation

We've updated our Meganav documentation to assist with making them under the new Nested Navigation system which is used in Pipeline 4.

Create a meganav in Pipeline with Nested Menus

Create a drop-down menu in Pipeline with Nested Menus

Additional Tips for Custom Code

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. 

Need help with code changes or custom code?

Our theme support doesn't cover code changes to the theme, we suggest you work with a small ask agency like shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing. If you need assistance with code migration, talk to them about copying over your custom code changes or writing any new features you need. 

For help with apps, be sure to engage the app developers for each of your apps. App migration is separate from theme updates, each app handles migration differently. All good apps will have documentation for support services for installing their app.