Tips: Migrating your settings and homepage sections to a new version of Pipeline
Here are some tips for migrating your settings and homepage sections when updating to the latest version of Pipeline. Pipeline 2 and higher are considered "sectioned" themes, we are able to easily copy over all your homepage settings, general settings and all your collections, product pages, blogs and articles, menus and pages. The following steps will help with your theme update:
Download the new version of Pipeline
In this step, you'll be downloading the latest version of Pipeline from Shopify. Follow their instructions for this procedure:
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 big one on top with the preview image of your homepage is the live/published theme (your current and older version of Pipeline) and the ones below are non-published themes. Rename the newly added theme, it's grouped with the non-published themes:
You can now start customizing the Pipeline New theme while your live website is still running the older version of Pipeline.
Copy your settings
The following steps will help bring over your Homepage Sections and General Settings:
Copy settings from your current live theme
Tip: Before you begin this step - Verify if you've created any custom homepage sections like our custom Banner image for desktop and mobile or custom Slideshow for desktop and mobile:
If you've created these or similar sections, you'll want to create them in the new theme first. That way when you copy your settings over, those sections will also migrate - Saves you time setting them up again. You just need to create the section files in the Code Editor (Steps 1 & 2).
These are a few other sections that are commonly created:
After you've created the section files, then proceed to this step:
How to copy your settings and homepage sections
Open your Code Editor.
From your list of themes, choose the Actions button on the main live theme and then Edit code:
Type in data in the top filter bar and find in the Config folder:
Click on the settings_data.json file to view the code.
Or use this quick link:
Open settings_data.json from live theme
This file holds your hompepage sections, colors, fonts and other general 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.
Paste your settings to the new theme
We will next paste 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 Pipeline. Be sure to open the right theme.
Use the Actions link and choose Edit code for the new theme, Pipeline 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 your theme:
If you experience an error when saving your copied settings_data.json code like this:
This will prevent you from proceeding. If that's the case, contact us with a screenshot of the error. We will need access to your theme and can remove that section of code which is not able to be migrated over. When you contact us, please include your xxxxxx.shopify.com domain name, we need this to request access to your theme. Send that information to: email@example.com
Copy over your CSS style changes
This step is optional.
If you have been saving override CSS code at the bottom of your style.scss file, you can easily copy those changes over to the new theme.
Open the Code Editor from your live theme - Older version of Pipeline:
In the top-left search bar, search for "style" without the quotes:
If you're already on Pipeline 4, then find theme.scss.liquid:
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).
In Pipeline 4 and higher, the theme styles have moved to a new file: theme.scss.liquid:
You can open that file and scroll to very bottom, 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.
Note: Pipeline 4 already includes the hover over product image on collection pages to show the next image. You won't need to make that customization in Pipeline 4 and higher.
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:
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).
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.
Key filename changes
Many of the support articles reference files and links for assets/style.scss.liquid and assets/shop.js. These filenames have changed in Pipeline 4:
style.scss.liquid is now theme.scss.liquid
shop.js.liquid is now theme.js
product.liquid is still the same except the Add to Cart form has moved to snippets/product-form.liquid.
The links in our support articles will be referencing the older filenames. Please be aware of the change and manually access your files for changes.
New sections and settings in the theme editor
Use the Theme Editor to make additional changes, add new modules and make any other changes. While your main old theme is still running the store, you can use the Theme Editor to customize Pipeline new without affecting the live theme. Use the Customize link on the main themes page for the unpublished theme:
Check out some of the new section modules you can add on the homepage:
The Page section allows you to bring any page into the homepage that you've created in the Shopify Pages admin:
In previous version of Pipeline, that was a content block option in the Rich Text section.
See all the new fonts available in Pipeline 4.1:
Example of the new settings and font picker:
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.
Additional features in Pipeline 4:
Mobile parallax scroll
Dynamic Checkout Buttons for your product pages.
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.
Publishing your theme
Once you have the new theme looking good, you can publish it from the themes list in the Actions menu:
Need help with code changes?
If you need assistance with code migration, talk to them about copying over your custom code changes.