Instructions for updating to Whisk versions 15.0.0 and up

Whisk v15.0.0 was our biggest upgrade yet. We altered over 8000 lines of code in theme! 🤯 We did this to bring many of Shopify's newest features that launched after the theme was created into the theme. The biggest change was the adoption of native color schemes.

Shopify controls the auto-updating of themes when you upgrade from one version to the next. In these theme updates, they do not have a way for us theme developers to convert old code settings into new code settings and we would need that specifically for the transition to the new color schemes. The update from any theme version below 14.0.4 to any theme version from 15.0.0 and above requires extra configuration on your end after you update to complete this conversion. In this article, we'll share with you instructions and resources for how to do that.

For the rest of this tutorial, when we refer to the "old theme" version, we are referring to the original theme before the upgrade, version 14.0.4 or earlier. The "new theme" version will be the update, version 15.0.0 or later.

How to convert old color settings to new color schemes.

Go to the Online Store/Themes page in Shopify Admin and click in to "Edit code" in the old theme. In the config folder, copy the entire contents of thesettings_data.json file.
Visit our Online Color Scheme Converter webpage and select the preset you originally used as the foundation for your store. If you don't remember, you can just keep it at the "Default (Whisk)" option. In the "Input JSON" field, paste in the contents you just copied. Click on the "Process JSON" button to generate the new code.
Once you see a success message that the process was successful, copy the "Generated Output" using the "Copy" button on the right.
Go to "Edit code" in the new theme. Open the settings_data.json file, delete the text of the entire file and paste in the text that you just copied from the webpage. Click save.
Go back to the Online Store/Themes page in Shopify Admin. Click into "Edit theme" in the new theme.
Go into "Theme Settings/Colors" and make any adjustments and additions to the new color schemes. You'll find some new color settings for buttons and borders, and you'll be able to make more color schemes than the old theme allowed (it was only 6!).
Now, you'll need to go through each template in the theme editor to double check the color scheme that is assigned to them. You may need to change the color scheme that is default applied to that section. This also includes the header and the footer so make sure to check on those!
If using an Image banner section with a Transparent text box, you may have noticed that the text box has become solid. There is a new checkbox in the section settings that you have to toggle on to make the text box transparent again. Also, double check the Image banner on mobile, as we've added more options here where you can assign a color scheme to just the mobile version of the image banner.

We'll be making a video to demonstrate this update to make these instructions easier for you. In the meantime, please reach out to support with any problems or questions.