Tips: Migrating your settings and homepage secti​ons 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:

https://help.shopify.com/manual/using-themes/organizing-themes/updating-themes

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: 

1

Copy settings from your current live theme

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:

settings_data.json

Click on the settings_data.json file to view the code. 

Or use this quick link:

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.

2

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. 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 - 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:

Update errors

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: help@groupthought.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. 


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:

https://shopify.com/admin/pages

In previous version of Pipeline, that was a content block option in the Rich Text section. 

Fonts!

See all the new fonts available in Pipeline 4.1:
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. 

Additional features in Pipeline 4:

Mobile parallax scroll 

Dynamic Checkout Buttons for your product pages.

Learn more:
https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout


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.

How to:
Create a meganav in Pipeline with Nested Menus

How to:
Create a drop-down menu in Pipeline with Nested Menus


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?

We're not able to make any code customizations but we can recommend 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.

Still need help? Contact Us Contact Us