Migrate to using color schemes

This guide describes how to migrate your Shapes version 2 custom color schemes to Shapes version 5's color schemes format.

Important

Since Shapes version 3, Shapes has used Shopify's newest color scheme format. This newer format is also used in Shapes version 5, and it offers advantages over the older implementation used in Shapes version 2.

Shapes version 2 and subsequent Shapes versions use different data formats to implement color schemes. Because of this difference, your store's color schemes do not migrate automatically when you update from version 2 to version 5.

Use the Color scheme migrator tool

To help you bring your existing color schemes over to the new color schemes format, Switch provides the Color scheme migrator tool.

To use the Color scheme migrator tool, complete the following steps.

Note

Before you edit your theme code, duplicate your current theme. Refer to Shopify help: Duplicating themes.

Duplicating your theme retains a backup copy of your current theme in your Shopify admin. If something unexpected happens to your store after you edit your theme code, use your duplicated theme to revert your changes.

Prepare your updated theme

1. In your Shopify admin, navigate to Sales channels > Online store.

2. In the Themes area, locate your Shapes version 2 theme.

3. Update your Shapes version 2 theme to the latest version.

   Refer to Update to latest version. The update process creates a new copy of Shapes in your Shopify admin. Your new copy of Shapes is updated to the latest version, without the colors from your store's color schemes.

4. In your Shopify admin Themes area, locate your new version of Shapes created by the update process.

Copy your color scheme data

1. Beside the name of your new version of Shapes, select ... (the ellipsis icon), and then choose Edit code.

   Selecting the Edit code option opens Shopify's Code editor.

   

2. In the Code editor, expand the Config subdirectory.

3. Inside the Config subdirectory, select the settings_data.json file.

   

4. With the settings_data.json file open in the Code editor, select the entire contents of the file, and then copy the file's contents to your clipboard.

   In the next steps, you will paste the copied file contents into the Color scheme migrator tool. Keep the file open in the Code editor, because you will edit it again shortly.

   

Migrate the data

1. In a new web browser window or tab, open the Color scheme migrator tool.

2. On the Color scheme migrator page, select Paste to paste the settings_data.json file contents into the tool.

   Alternatively, locate the Color scheme migrator's first text box (on the left side). Then, in the tool's first text box, paste the settings_data.json file contents that you copied previously.

   

3. After you paste your data, the contents of the tool's second text box update automatically (on the right side).

   When the second text box updates, select Copy to copy the contents of the tool's second text box to your clipboard. In the following steps, you will paste the data you copied into Shopify's Code editor.

   Note

   If the tool's second text box shows an error message, follow the instructions displayed on the web page. Alternatively, contact the Switch support team for help.

   

Apply the migrated data

1. Return to your previous browser window or tab that has the settings_data.json file open in Shopify's Code editor.

   If you closed the file in the Code editor, reopen it.

2. In the Code editor, select the entire contents of the settings_data.json file.

3. Replace the file's contents with the data that you copied from the Color scheme migrator tool.

4. Select Save, and then preview your store to verify that your color schemes were migrated successfully.

5. After you finish customizing, publish your updated theme from your Shopify admin. Refer to Shopify help: Publishing themes.