What Is the Shopify Skeleton Theme? A Guide to Getting Started with Theme Development

What is the Skeleton Theme?

The Skeleton Theme is a minimal theme released by Shopify in May 2025.

• GitHub: https://github.com/Shopify/skeleton-theme

It consists of only the essential files and code, designed as a foundation for building your own unique themes.

Difference in Roles: Dawn vs. Skeleton Theme

Many probably recognize Dawn as a "practical theme distributed for free by Shopify."

However, Shopify officially refers to Dawn as a "reference theme."

• Dawn: "Shopify's first source available reference theme"
  Source: Shopify/dawn - GitHub
• Skeleton Theme: "A clean, flexible starting point"
  Source: Skeleton theme is now available - Shopify Developer Changelog

"Reference" means for consultation. In other words, Dawn is a model for learning "how to build," not a theme intended for immediate practical use.

What Shopify is trying to convey with both Dawn and Rise is, "Please refer to this, customize it properly, and improve the quality of your store."

Learning from Dawn and building from Skeleton. This is the theme development approach advocated by Shopify's official guidelines.

Why was the Skeleton Theme created?

General-purpose themes are designed to cater to a wide variety of stores. They are packed with every conceivable feature so they can be used for any industry—apparel, food, general merchandise, etc.

However, this also means that "to display one store, code for 10 stores is running." Code for features your store doesn't use is still loaded.

The result is a decrease in display speed.

Large stores, with their capital, build custom themes to achieve fast display speeds. Smaller stores, on the other hand, are forced to use general-purpose themes and suffer from slower display speeds. This gap cannot be bridged by effort alone.

The Skeleton Theme is Shopify's official answer to this structural problem.

The difficulty of starting with the official Skeleton Theme

However, the official Skeleton Theme is, quite literally, just a "skeleton." It has an HTML structure, but almost none of the mechanisms for an e-commerce site to function are included.

For example, you have to develop all of the following "basic operations" from scratch:

• Price and inventory display changing when a variation is selected
• Cart quantity in the header updating when an item is added to the cart
• A mechanism for coordinating events between components (pubsub)
• Utility functions used in common (global.js)
• Japanese localization files
• A complete set of customer account-related screens

Developing from the official Skeleton means starting not just with building the look, but also with building the entire foundation for e-commerce functionality.

What changes when you rethink the theme structure?

There are two major benefits to building from the Skeleton Theme:

1. Improved display speed

By eliminating unnecessary code, page loading speed improves. A faster store leads to lower bounce rates and an improved user experience.

2. Realizing unique store UI/UX

Freed from the constraints of general-purpose themes, you can build designs and user flows optimized for your specific store. You can design the UI based on "store needs" rather than "theme convenience."

In practice, we experience a 10% to 20% difference in CVR.

The size of the store doesn't matter. There's no reason to settle for a general-purpose theme just because you're a small business.

High CVR → High profitability → Faster business growth

Considering this causal relationship, building from a skeleton is a rational investment. We consider it essential.

The foundation for winning on Shopify

In e-commerce consulting, the focus tends to be on ad management and UI improvements. While these are certainly important, superficial improvements alone cannot bridge the fundamental gap.

The foundation for winning is rethinking the theme structure.

Understanding the theme structure and being able to build from the Skeleton Theme. This can be a criterion for identifying trustworthy consultants and production companies.

Whether they can say "we can build from Skeleton" instead of "we'll customize Dawn." The difference in experience and technical ability is evident here.

ARMERIA's Theme Distribution

ARMERIA distributes a theme uniquely built from the Skeleton Theme.

We've addressed the difficulties of starting with the official Skeleton, establishing a foundation that allows you to "immediately focus on developing unique features." The mechanisms for an e-commerce site to function as expected are already implemented. Now, you can concentrate on creating the features your store needs.

Full Online Store 2.0 Compatibility

This theme is fully compatible with Shopify Online Store 2.0 features.

• Sections Everywhere: Sections can be added and reordered on all pages
• JSON Templates: All templates are in JSON format
• Block Structure: Major sections are block-based and can be reordered
• App Blocks (@app): App blocks can be inserted into each section
• Metafield Integration: Standard support

Flexible page building is possible within the theme editor without touching the code.

Design System

Fonts

We use a system font with a sans-serif typeface optimized for Japanese display. Yu Gothic/Meiryo is used in Windows environments, and Hiragino Kaku Gothic in macOS environments. By not using web fonts, we achieve faster loading speeds and stable Japanese display.

Font Sizes

Font sizes are defined on a 6-level scale. This design was adopted based on extensive website building experience to maintain overall site consistency.

--font-size-xs:  0.75rem  (12px)
--font-size-sm:  0.875rem (14px)
--font-size-md:  1rem     (16px) ← Base for body text
--font-size-lg:  1.125rem (18px)
--font-size-xl:  1.25rem  (20px)
--font-size-xxl: 1.5rem   (24px)

Colors

In addition to base colors, we provide three shades of gray (light gray, gray, dark gray). The different shades of gray visually represent information hierarchy and importance, creating consistency in design.

• Light Gray: Section backgrounds, etc.
• Gray: Borders, placeholders, etc.
• Dark Gray: Subtext, captions, etc.

Rounded Corners

Rounded corners on buttons and cards are important elements that influence the overall impression of a site. They can be managed centrally in the theme settings and adjusted to match your brand image.

Optimized CSS Loading

In Shopify, if the same snippet is called multiple times using render or blocks, CSS loading within those snippets can also be duplicated. Additionally, CSS for unused sections may be loaded, which can lead to performance degradation.

This theme adopts a rule of synchronous loading for common CSS and asynchronous loading for section-specific CSS, balancing performance with FOUC (Flash of Unstyled Content).

Customer Account Settings

This theme uses the "classic customer accounts."

• Customizable login and registration screen designs
• High convenience for repeat customers because passwords can be saved
• The new method of one-time passwords (email confirmation every time) can cause abandonment

Download

Download is free.

Armeria Skeleton Theme - ver 1.0.0

However, simply having the theme doesn't guarantee success. How you utilize it is up to you.

The theme is merely a foundation. We hope this theme will be used by those who can consider what strategy to build upon it and how to operate it.