Rock4uEu Theme Modernization

Published: April 28, 2026 mynotes

Rock4uEu Theme Modernization

I spent March modernizing the Rock4u.eu theme. It was about time, as I had not changed the design since the site was created in February 2019. In the meantime, I also added rock4u.es for blogging, and the idea was to bring the theme closer to the feel of rock4u.es while making it feel more modern. Another goal was to improve mobile performance.

From the start, I had some constraints. I could change spacing, hierarchy, surfaces, typography, and all of that, but I did not want to casually touch the parts that customers already understand. The short version is that I was trying to make it feel more modern without turning it into one of those redesigns that accidentally breaks the parts of the shop that already work.

The biggest rule was very simple: do not break Add to cart. I didn’t realize it at first, but that single rule influenced so much of what I did. The existing add-to-cart colors and behavior stayed. Checkout logic stayed. Custom module behavior stayed.

I ended up breaking the work into phases because otherwise it would have been too easy to mix everything together.

The first phase was establishing a performance baseline. I wanted proper Lighthouse numbers for home, category, product, cart, and checkout before making too many changes. The product page baseline (71 mobile) indicated heavy above-the-fold content and/or render-blocking assets. Category and cart/checkout scores suggested CSS/layout complexity and possible non-responsive components. Desktop was already near target, so the biggest gains would come from mobile-first optimization. After that, I started working with Codex to create a mockup for the new theme, and I went through several iterations.

Once the design was done, I broke the work into shorter phases.

In the second phase, the real work started with a much bigger implementation pass. I introduced color tokens and added cards for the homepage and category pages. Most of the visible work so far has been in the header, navigation, home page structure, product listing, and product detail pages. That is where the store really shows its age.

In phase 3, I added dedicated header classes for targeted modernization and structural wrappers for the home page. I implemented modern navigation and top-menu styling with responsive behavior. I kept all hooks and module output locations intact, and I made no changes to the Add to cart colors.

Phase 4 focused mainly on modernizing product listing and product detail styles, and phase 5 was about cart and checkout UX polish. I improved cart summary readability with better table contrast and spacing, a clearer totals/voucher area, and a cleaner heading counter. I also polished checkout flow blocks: order steps, delivery and address cards, carrier table blocks, and payment module cards. I improved OPC spacing and form readability as well, plus more consistent block styling. I kept business logic and hooks untouched, since this pass was CSS-only.

Phase 6 improved search readability and updated it to the new color scheme. I changed the top-menu background and updated the alert colors.

Phase 7 focused on performance hardening through CSS refactoring. I moved a large active OPC/cart ruleset out of css/global.css into css/order-opc.css. I removed duplicate, overridden, invalid, and dead declarations from css/global.css. I also consolidated ownership of active base rules for headings, forms, alerts, labels, links, paragraphs, muted text, and checkout carrier headings. I kept the cleanup incremental and test-driven across Home, Category, Product, Login/Contact, and OPC checkout.

Phase 8 was mainly about fixing bugs. Category and cross-selling card backgrounds were aligned to black for consistency with the product page design, and I updated the Spanish frontend translations to a more informal tone.

One thing I like about this project is that performance was never treated as something to worry about later. I usually test performance after almost every phase.
Looking back on it, I am happy that I managed to complete the project in a bit less than a month. There were very few issues after go-live, and the ones that did appear were resolved quickly.
And yes, without Codex I don’t think I could have completed this project in the same way. It helped me move faster and gave me confidence that I can complete to see it through.