Shopify · Commercial theme upgrade

Shopify theme upgrade with customizations for Charlotte’s Web

Paid Shopify theme upgrade with section settings and custom code migration, style adjustments and testing in staging.

Role
Shopify Developer
Reference period
2026
Technologies
Shopify · Liquid · HTML · CSS · JavaScript · Shopify CLI · Git · GitHub
Public website
charlottesweb.com

By Case published:

Current Charlotte’s Web homepage with navigation and campaign banner

Current public website homepage. Reference capture; it does not show the delivered staging theme.

View sourceCapture:

I upgraded Charlotte’s Web’s paid Shopify theme to a new version. I reviewed the sections declared across all pages, identified customizations by comparing them with the updated theme, and migrated their settings and Liquid, CSS and JavaScript code. I adapted styles and global style variable access to the new version. The theme was delivered in staging, where the full user workflow was tested.

Requirement

The commercial theme had customizations that needed to be transferred to the new version. Updating without reviewing those modifications risked leaving out custom sections, settings and associated code. The new version also changed how global style variables were read.

Implementation

I compared the sections across all pages with those available in the updated version. I migrated section settings and custom code, adapted styles to the new theme, and uploaded it to staging to validate the user workflow.

The upgrade required separating section configuration, custom code and compatibility changes introduced by the new version. The process ended with delivery and testing in staging.

  1. Section inventory across pages

    I reviewed the sections declared on every page of the existing theme. This review identified which components each view used and which configurations needed to be transferred to the new version.

  2. Comparison with the updated theme

    I compared this inventory with the sections in the updated commercial theme. The comparison distinguished theme sections from custom sections that required their code to be migrated.

  3. Section settings migration

    I transferred each section’s settings to the new theme to retain its configuration. Configured values were migrated alongside the sections that use them; copying Liquid code alone did not reconstruct the full page configuration.

  4. Custom code migration

    I migrated custom sections and their Liquid, CSS and JavaScript code. Liquid defines markup and Shopify integration, CSS provides presentation, and JavaScript supplies the interface behaviors associated with those sections.

  5. Style and global variable adjustments

    I adjusted styles so that migrated sections worked with the updated version. I also adapted global style variable access to match the structure of the new theme version.

  6. Staging delivery and validation

    I uploaded the updated theme to staging. Tests there reproduced the full user workflow to review section integration, settings and behavior within the updated theme.

Current Charlotte’s Web collection with filters and product cards

Current public website collection with filters and catalog. The capture shows the version available at the time of review.

View sourceCapture:
Current Charlotte’s Web product page with gallery, price and purchase options

Current public website product page. Reference capture showing the storefront interface.

View sourceCapture:

Work delivered

Theme configuration and customization migration.

  1. Review and comparison

    I reviewed sections across all pages and compared them with the updated theme.

  2. Settings and custom code

    I migrated configurations and custom sections with their Liquid, CSS and JavaScript code.

  3. Compatibility and staging

    I adapted styles and global variable access, and uploaded the theme to staging for user workflow testing.

Delivered functionality

Updated theme delivered in staging.

Customizations transferred

Settings and custom sections identified in the existing theme were migrated.

Styles adapted

Styles and global style variable access were adjusted for the new version.

Staging delivery

The theme was delivered in staging and tests reproduced the full user workflow.

The work described was delivered and tested in staging. Captures show Charlotte’s Web’s current public website; they do not document staging or confirm publication of the delivered theme. The year 2026 is a reference period for the work, not an exact implementation date.

Applied skills

  • Shopify theme upgrades
  • Customization migration
  • Section configuration
  • Liquid
  • HTML
  • CSS
  • JavaScript
  • Shopify CLI
  • Git and GitHub
  • Staging testing

References