Header image

loki theme kit

Luma with blazing performance

The default Magento theme - Magento/blank & Magento/luma - and all deritives have been called slow for more than a decade. However, the biggest culprit here is JavaScript. Loki Theme for Luma removes all legacy JavaScript and replaces it with modern JavaScript, including Alpine.js. The result: A perfect Lighthouse score.
header image
Read our docs
View on GitHub

Current status

This is open source and work-in-progress

Page coverage

  • Homepage and other CMS pages
  • Checkout page (with Loki Checkout)
  • Checkout success page
  • Basic category page (without swatches)
  • Basic product page (without swatches)

Work in progress

  • Shopping cart page
  • Advanced category page (with swatches)
  • Advanced product page (with swatches)
  • CMS pages
  • Customer Account pages
  • Third party extensions

Disclaimer: This assumes a plain Magento site with few extensions.

Available components

  • LocalStorage (Alpine store)
  • Messages (Alpine store + component)
  • Cookie notice
  • Top navigation
  • Mobile navigation
  • Currency switcher
  • Top links (customer welcome)
  • Minicart
  • Newsletter subscribe
  • Add-to-cart (product page)
  • Add-to-cart (category page)
  • Add-to-wishlist (category page)
  • Add-to-compare (category page)
  • Tabs (product page)

Loki Checkout under Luma

A Lighthouse performance score of 100

Luma is often labeled as slow. We are agreeing there. However, instead of migrating away towards a new theme entirely, the Loki Theme Kit allows for a gradual migration instead. For instance, if you want to keep the rest of the site, but want to speed up the checkout big time: The Loki Theme Kit allows you to do this.

With the Loki Theme Kit for Luma and the Loki Checkout, we actually fixed our own itch: Make sure that the checkout flies, even under Luma.

Loki Theme Kit in the wild

Luma shops that are made blazing fast

Yireo Shop

Luma with Loki Theme Kit applied to CMS-pages, product pages, category pages and the checkout
https://shop.yireo.com/
https://shop.yireo.com/

meipos LED verlichting

Luma with Loki Theme Kit applied to CMS-pages, product pages, category pages and the checkout
https://meipos.nl/
https://meipos.nl/

Upgrade your Luma theme

Step-by-step into a faster Magento site.

Create a child theme

Create a child theme based upon your current Luma theme. This serves as a cross-over theme to move your pages into Loki Theme step-by-step.

Rip out JavaScript

Configure the LokiTheme_LumaComponents module for your new theme. This removes all legacy JavaScript and replaces it with new components.

Apply the theme per page

Use the Yireo_ThemeByRoute module to apply the theme only to the checkout, CMS pages and other pages that you wish to convert.

Let's make this happen

This open source effort aims to upgrade Luma to new levels. Many components will still need to be written. Let's collaborate. Or hire us to do the heavy lifting.

Comparison with all checkouts

Review the statistics. Numbers do not lie.

When extending an existing Luma-based shop with both the Loki Theme Kit and the Loki Checkout combined, the numbers do not lie: The Loki Checkout outperforms any existing checkout, under either Luma-based or Hyvä-based themes. It even shows that that the Loki Checkout under Luma uses less resources than the Hyvä Checkout under Hyvä Themes!

Under Luma, this checkout success is largely due to the Loki Theme Kit. Which is entirely available for free for you too.