<% user.full_name %>
<% util.level ? util.level.title : '' %>
Explorer Pioneer Apollo Viking Voyager Pathfinder Orion
Points
<% user.points ? user.points.toLocaleString() : 0 %>
Badges
<% util.badgeCount %>
Streaks
Congratulations You've <% util.newestBadge.isCurriculum ? 'completed' : 'earned' %> the
<% util.newestBadge.title %> <% util.newestBadge.isCurriculum ? 'curriculum' : 'badge' %>!
previous
next
Share to Social Media
Linked In Facebook
Status
<% util.level ? util.level.title : '' %>
<% util.level ? util.level.points : '' %>
<% util.nextLevel ? util.nextLevel.title : '' %>
<% util.nextLevel ? util.nextLevel.points : '' %>
Level up! <% util.levelPointsRemaining %> points to go
Level up! <% util.levelPointsRemaining %> points to go
Badges
Completed Hitchhikers Track Completed Content Track Completed Pages Track Completed Page Builder Track Completed Search Backend Track Completed Search Frontend Theme Track Completed Search UI React Track Completed Solution Templates and the Admin Console Track Completed Technical Skills Track Completed Platform Basics Track Completed Listings Track Completed Reviews Track Completed Industry Overview Track Completed Analytics Track Completed Industry Overview & Product Basics Track Completed Multi-Language Experiences Track Completed Chat Track
<% util.expandBadges ? 'Less' : 'More' %>
Playground Accounts
New +
No Playground Accounts
Create Playground +
View Profile
Log Out loading
Mission Complete! 🚀
Congratulations, you’ve completed your first module!

We hope you enjoy exploring the rest of the site. Please don’t forget to leave us feedback - we are constantly looking to improve. Happy Hitchhiking!
Home
Welcome to Hitchhikers! 👋
To learn more about the platform we encourage you to get started by completing the Hitchhikers Program Track and earning your first badge!
Start Here
Close notification
Guide
Upgrade Theme for Search Frontend Experiences
Arrow Back
Completed
Introduction
Introduction
completed
Completed 1
Step 1
Create a Branch
completed
Completed 2
Step 2
Pre-Work for Theme Upgrade
completed
Completed 3
Step 3
Upgrade the Theme
completed
Completed 4
Step 4
Process Version Updates
completed
Completed 5
Step 5
QA Your Search Site
completed
Completed 6
Step 6
Push to Production
completed
Completed 7
Step 7
Common Upgrade Issues
completed
Completed 8
Step 8
Patches - Apply a Diff
completed
Completed 9
Step 9
Rebuild Your Site
completed
home

Step 2: Pre-Work for Theme Upgrade

There are a few things you want to do before you actually hit Upgrade Theme.

Check Current Theme Version

Part of the theme upgrade process entails accounting for the changes in each theme version from your current version to the latest version. To do this, you first need to know what version you’re on.

To check which version of the theme you are currently on, open package.json in your Code Editor and look for the version number (the experience in the screenshot below is on version 1.22.0). The steps to upgrade your theme will depend on what version of the theme you are currently on.

Code editor opened on package.json file with arrow pointing to version number in file

Complete Pre-Work for Themes Older Than v1.16

If your site was created before October 15th, 2020 or is on a theme older than v1.16, you’ll need to update to a newer node version. Complete the Theme v1.16 upgrade call out steps. Then commit your work and make sure the build is successful (if not, post in the Community). Refresh the Code Editor before moving on to the next step.

Read Through the Upgrade Considerations Thoroughly

Upgrade instructions and implications are consolidated in the Hitchhikers Theme Changelog .

Review the callouts for every version between the one you are currently on (or Theme v1.17, whichever is newer) and the version you’re upgrading to (most likely the latest version). Any new Search UI SDK versions will be included in the same posts.

Take note of whether you’ll need to take action on any of them and whether you need to do them before or after upgrading the theme. Types of upgrades include re-forking certain files and adding CSS variables to the answers-variables.scss file.

Make Any Changes Needed Before Upgrading the Theme

For example, we may have updated the cards in the theme, which means if you’re using theme cards, you’ll be using our latest and greatest recommendations when you upgrade. If you want to keep your cards as they are or do something different, you can always override the card before running the theme upgrade to get the card layout at that moment in time.

Feedback
<% elem.innerText %>