Your Store's Theme (CE 1.9/EE 1.14 & Later)

Table of Contents

Overview

Note: This article provides information about themes in Magento Community Edition (CE) and Enterprise Edition (EE). The information is based on CE 1.9 and EE 1.14 and later versions; some options here might not apply to earlier versions. In particular, responsive web design themes do not apply to earlier versions.

A theme is a collection of files that determines the visual presentation of your store. You might think of a theme as the “window dressing” of your store. When you first install Magento, the design elements of the store are based on the “Default” theme. In addition to the initial default theme that comes with your Magento installation, there is a wide variety of themes that are available “off the shelf” on Magento Connect.

Magento themes include layout files, template files, translation files, and skins. A skin is a collection of supporting CSS, images, and JavaScript files that together, create the visual presentation and interactions that your customers experience when they visit your store. Themes and skins can be modified and customized by a developer or designer who has knowledge of Magento theme design and access to your server. To learn more, see the Designer’s Guide to Magento.

Responsive Web Design

Responsive design is an approach to web page creation that flows the page layout to fit the visitor’s screen size and orientation, and changes the layout accordingly. The Magento default responsive theme features stylesheets that support flexibility for layouts and images, and helps provide a pleasing experience for site visitors using mobile devices. By comparison, non-responsive sites or sites not optimized for smaller screens or mobile devices are often slow or difficult to read, and offer a clunky mobile eCommerce experience.

Benefits of using the Magento default responsive theme include:

  • You can get a tablet and smart phone friendly responsive site in about half the time as before, speeding time to market and freeing up resources for other projects.
  • Your responsive site makes you better able to participate in the fast growing mobile commerce space, and gives you the ability to create a website that is more easily adapted to new opportunities and less expensive to maintain. A responsive site also offers potential search engine optimization (SEO) benefits from using Google’s preferred approach to mobile-optimizing sites.
  • You no longer need to develop separate content per device. The default theme is easy to customize for simple sites, and provides a powerful starting point for developing themes for more complex sites.

To learn more about creating custom responsive themes, see the Responsive Theme Developer's Guide.

Using the Default Theme

The default theme uses Responsive Web Design (RWD) principles. Responsive web design enables you to use a single theme to present your storefront to your customers regardless of which device they use to access it. The theme is built using modern technologies and incorporates best practices for mobile sites and experiences.

Responsive Theme on Tablet and Smartphone
Responsive Theme on Tablet and Smartphone

To view the default theme:

  1. On the Admin menu, select System > Configuration.
  2. In the panel on the left, under General, select Design.
  3. Click to expand the Package section. The new responsive theme is enabled by default. The default package name is “rwd.”
    Default RWD Theme Package
    Default RWD Theme Package
  4. Click to expand the Themes section. The Default theme name is “default” (although the field may appear blank).
    Default RWD Theme
    Default RWD Theme
  5. When complete, click the Save Config button.

Exceptions

Responsive design is not currently implemented for the following:

  • Multiple address checkout
  • Popular search terms page
  • Popular search terms cloud
  • Site map
  • My Account – Billing Agreements
  • My Account – Recurring Profiles
  • Gift registry
  • Multiple wishlists
  • Add to cart by SKU
  • Email templates
  • Tags
  • Polls
  • CAPTCHA

Technical Information

The responsive theme uses the following modern technologies:

  • Sass/Compass: A CSS pre-compiler that provides organizable, reusable CSS.
  • jQuery: jQuery is used for all custom JavaScript in the responsive theme. jQuery operates in noConflict() mode so it doesn't conflict with Magento's existing JavaScript library.
  • JavaScript Libraries

Additional JavaScript libraries are discussed in more detail in the Responsive Theme Developer’'s Guide.

Code Location

The new responsive theme code is contained in the following directories (relative to your Magento installation directory):

app/design/frontend/rwd skin/frontend/rwd

Discussion:

RSS: New Article posts

Explore the Knowledge Base