Understanding Skin, Theme and Core for Maximum Customization and Configuration: Solve Conflict with Wireframes
When building an eCommerce website, you’re bound to hear several terms that are often used interchangeably, but in reality refer to three distinct platform elements: core, theme and skin. All three help define the eCommerce professional’s options to customize and configure a Magento-based website.
On the surface, these terms may sound like they refer to the same general subject. However, each element’s role in the function of a Magento website is completely different, therefore it is important to have a clear understanding of each.
Differences between the Core, Theme and Skin layers
Let’s take a look at how we define these primary configuration and customization options for a Magento website:
- Core: The primary Magento engine that drives the operation of your website and everything connected to the platform. Think of this as the frame of a house or chassis of a car. The Core also defines the interfaces to other enterprise-level systems, such as your order management or inventory management capabilities.
- Theme: Defines the functionality of the front end, the data structures for passing information from page to page or between a page and another website function, as well as the interface to back end, admin or Core functionality. Themes typically define the page types as well as the interaction between pages.
- Skin: CSS, JavaScript and media library sets that drive the look and feel of your site. The Skin provides no operational impact, therefore it’s possible to re-skin your site for branding purposes without affecting the operation of the site—as long as you stay within the constructs of your chosen Theme and Core elements.
Simply put, these three components taken together define what your site looks like and how it behaves, and offers you the ability to configure and customize your online store.
Why is this important?
It’s important to understand the boundaries of what can be modified via a CSS/JavaScript change (essentially a re-skin), and what changes need to propagate to Theme and Core. With Magento, it is relatively simple to make changes at the Skin level—it is much more complex to make changes to the Theme and Core.
Therefore, good Magento design practice suggests that when the site is initially designed, you design for maximum flexibility. And to achieve this flexibility, designers use wireframes to define website functionality that separates it from the Theme or Core. We build in this separation because of the inherit complexity of introducing modifications to the Theme and Core.
It’s surprisingly easy to run afoul of the separation between Skin, Theme and Core. Seemingly small changes in the user experience—changes that should be easily handled in the Skin layer–can easily result in a customization or modification to a theme element. Failure to maintain separation between the Skin, Theme and Core result in projects that are more complex than they needed to be. Some examples:
- Moving a search input field from the header to the footer.
- Moving a site login into the main navigation menu
- Adding Contact Us form fields on the Home Page.
It’s interesting to note that these are all seemingly minor changes, but because of the way the site was built, they required deeper Theme- or Core-level modifications. More attention during the design phase could have yielded a site that avoided those deeper-level development requirements. As we said above, it is always much more cost effective to use configuration changes or Skin-based changes versus requiring you to modify the system with Theme or Core.
Design choices, UX design, and use of Wireframes
When a Magento site is designed, future potential conflict can often be avoided by figuring out the most flexible UX design using wireframes. There is an inherent complexity when you put customizations into the system via modifications to the Theme (or Core). Proper use of wireframes in the planning stage organize the process and make it easier to plan for future changes, reducing the need to modify the Theme or even the Core.
Wireframes for a Magento-based site can help you scrutinize each potential future alteration, enabling your ability to make future customizations while avoiding costly changes. Wireframes help you map out how skin-based changes enable new or modified capability, rather than relying on customizing the system with theme or core changes. This makes for an easier upgrade path, and improves the maintainability of the system.
Having a UX team that fully grasps the abilities and limitations of the platform will ensure that the system is utilized to its fullest potential before reverting to customizations to the Theme or Core. When designing your Magento site, be sure that your design partner (whether in-house or an outside designer) fully understands the boundaries among Skin, Theme and Core.
This means you should have your decision on platform (Magento or other eCommerce platform) made before you start the design process. Designing for a hypothetical eCommerce platform first means that if Magento is later chosen as your future website’s platform, there may be more customizations and added costs.
