How to update your unsectioned Underground Shopify theme
The web is a constantly changing environment. Daily, browsers, API's, and Shopify requirements are changing and improving. Here at We Are Underground it is a high priority to keep up with all the new changes and requirements to keep our themes top notch. Throughout the life of a theme, we will release new, updated versions. These updates will include changes to the old version of the theme sometimes adding new features, improving current features or fixing bugs. Once you have purchased a theme from We Are Underground (in the Shopify Theme Store or from us here on our site) you will have free access to these newer theme versions for the life of the theme. We strongly encourage you to keep your theme up to date, that way you always have the best version.
In this tutorial, we will go through the process of updating an older legacy theme that does not support sections to a new version (with sections) while still retaining current customizations and settings. Watch our quick video tutorial or follow our step-by-step instructions.
How do I know if my theme is unsectioned?
If you're unsure if your theme supports sections then go to your Shopify admin select Online Store > Themes > and click the blue Customize button next to your theme. Compare your theme editor to those shown below. If you have a sectioned theme the steps for updating are the same, however, we have put together a separate tutorial geared toward sectioned theme updates here "How to Update your Underground Shopify Theme". If your theme is unsectioned, then you're in the right place!
So what are these new sections?
"Think of sections as individual, customizable components of a theme. Within each section, you can easily add, reorder, and remove chunks of content such as products, slideshows, videos, or collections. You can preview your changes in real-time in either desktop or mobile view, offering more options to test our updated layouts in Shopify Themes on the fly." Shopify Blog - Introducing Sections for Shopify Themes
Theme sections make configuring your Underground theme easier and have given us the opportunity to offer more options within our themes. You can learn more about sections in the Shopify Blog article Introducing Sections for Shopify Themes.
Here at Underground, we have a few articles to help you get familiar with the new Theme Editor and the difference between Editable and Re-Orderable Blocks within Sections.
Once you have a better understanding of the differences in using a newer Sectioned Shopify Theme, you're ready to begin the process of updating.
Step 1: Download New Version of Theme
If you bought the theme from the Shopify store
Go to the Shopify Theme Store and log into the Shopify account you used when you first purchased the theme, then on our themes page here Underground Themes find and select your theme.
Once you've found and selected your theme, click Add latest theme version. This will add the new theme to the Themes page in your Shopify admin.
If you bought the theme from the We Are Underground Website
Send us an email through our contact form (and attach your original receipt) and we'll send you the theme file (.zip).
Save the zip to your computer's Desktop. Go to your Shopify admin select Online Store > Themes > click the Upload theme button under More themes. Select the theme file from your computer and click Upload.
The theme will appear as unpublished on the Themes page of your dashboard.
Step 2: Copy all settings and customizations
From your Shopify Admin select Online Store > Themes > right-click on the blue Customize button next to the current theme version and open in a new window. Then right-click on customize next to the new theme version and open in a new window.
Resize these windows so they can fit next to each other side-by-side. In the theme editor in the new theme version click on Theme Settings and begin going through each category in Theme Settings looking for the similar settings in the older theme version copying over settings. Be sure to click Save when you're done.
You will find many things are in new places and names have changed, here are some notable differences:
- Each homepage section like Slideshow, has its own color, size, and weight settings that belong in the Slideshow section settings now (not in Colors and Typography alone).
- Newsletter is now called Popup.
- There is a new theme setting called Product Grid, these settings control the product listings on the collection page and homepage, it has options for a quick view, dynamic payment buttons, switching product image on hover, and showing vendor name.
- The selection of what shows on the homepage is now dynamic and re-orderable before you had to choose these settings in "Homepage" now you can and remove homepage sections and reorder them.
- Featured Images is now Gallery (or Image Gallery)
- Featured Products is now Featured Collection
- Featured Collections is now Collections List
- Featured Content is now Rich Text
As you go through the new theme version settings and sections, this is a really great time to browse around and try out new sections and features you may not have had access to before.
Once you have completed copying the theme settings, static section (header and footer) settings, and homepage section settings, you will need to copy section settings for the other templates as well. In the new theme version click on the template picker menu and choose the next template in the list and copy over its settings. Do this for all the templates in the template picker menu.
Step 3: Migrate custom code
Next, you'll need to migrate any custom code that has been added to the theme files. In the Theme Editor for both themes go to Theme Actions > Edit Code, then navigate to the theme file custom code was added to. In this example, we have added some custom CSS to the very bottom of the stylesheet.css.liquid file.
Copy the custom code from the older theme file and paste it into the same spot in the newer theme file.
You will need to repeat this process and copy over all custom code that you want to keep from the older theme. If the custom code has not been well documented this can be a bit tricky, try contacting the original developer who made the changes to see if they have a record of the changes.
For future updates it will make the process much quicker and easier if you make clear, searchable, comments in your custom code, you could even keep a simple Changelog that lists the change, where the change was made, the reason for a change, the date it was changed, and by whom it was changed. This can be a very valuable resource.
Step 4: Uninstall and Reinstall apps
Next, you will need to Uninstall any apps that add code to a theme, and then re-install them from the Shopify App Store. If you're not sure whether an app needs to be re-installed, then contact the app developer for support. To contact the app developer, find the app on the Apps page of your Shopify admin, click View details, and then click Get support.
Step 5: Publish
Once you have completed copying your theme settings, theme sections, custom code, and reinstalling your apps, go through the theme carefully and double check everything is correct. When you're happy with the new theme, go to Online Store > Themes, next to the new theme version, click on Actions > Publish. This will take the older version of the theme and move it to the draft themes and then make the newer version the live published theme.