Your Store's Theme (CE 1.9/EE 1.14 & Later)
Table of Contents
- Responsive Web Design
- Using the Default Theme
- Technical Information
- Code Location
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.
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
To view the default theme:
- On the Admin menu, select System > Configuration.
- In the panel on the left, under General, select Design.
- Click to expand the Package section. The new responsive theme is enabled by default. The default package name is “rwd.”
Default RWD Theme Package
- Click to expand the Themes section. The Default theme name is “default” (although the field may appear blank).
Default RWD Theme
- When complete, click the Save Config button.
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
The responsive theme uses the following modern technologies:
- Sass/Compass: A CSS pre-compiler that provides organizable, reusable CSS.
The new responsive theme code is contained in the following directories (relative to your Magento installation directory):