IThe problem
The store ran on a ThemeForest theme bought years earlier. Like many legacy themes it carried a lot of baggage: Bootstrap, animation libraries, app scripts and backup files, all loading on the storefront and making pages heavy.
Its styles were written in Sass (.scss.liquid files). Shopify has deprecated Sass in themes and moved to plain CSS, which also compiles far faster in the theme editor: about 300 ms against about 2,000 ms. A theme built on Sass is a theme falling behind.
Patching it further only added more weight. The store needed a modern theme that Shopify keeps up to date.
IIWhat I did
- Audited the old theme. Listed the sections, templates, settings, app code and custom features the store actually used, and what could be left behind.
- Chose Wonder, a Shopify Theme Store theme by Nethype, so the store gets regular updates and new Shopify features without custom work.
- Moved the store across, setting up Wonder’s sections and templates to match the old pages.
- Carried the custom features over, using Wonder’s built-in features where they did the job, such as quick buy and colour swatches, instead of porting old code.
- Checked every page against the old one on desktop and mobile before switching the store over.
IIIScreen proof
Client names, server addresses and customer data are hidden. Clients stay confidential.
IVWhere it ended
The store now runs on a lighter, current theme with plain CSS instead of deprecated Sass, and it receives Shopify theme updates regularly.
Shoppers get a cleaner quick-buy drawer with photo swatches, a full image gallery, reviews and a clear Add to cart, in place of the old cramped pop-up.
- Shopify
- Wonder theme
- Liquid
- JavaScript
- CSS