All posts tagged magento responsive web design

Make Your Magento Responsive Theme Ready for Production

To prepare your responsive theme for production, you should update config.rb in your theme directory to use these values:

output_style = :compressed
environment = :production

After you do this, you should recompile all of your Sass files—you can do this on the command line by running these commands inside your theme directory: compass clean and then compass compile. Finally, deploy the compiled CSS to your production system.

Sass Fallback Structure

We recommend copying all of the Sass files from




to make it easy to get started with custom theme development. The downside of this approach is that it results in duplicating many files that you never edit directly.

In the end, your custom theme must include all Sass partials you want to override. There are at least two ways to do this:

If you followed the setup instructions in Create Custom Responsive Theme in Magento, you must delete some files from your custom theme.

Delete the following directories to remove all the Sass partials that you copied from rwd/default:


The following files should now be located in skin/frontend/custompackage/customtheme/scss:


If you’re familiar with Magento theme development and you did not already copy Sass partials, copy the Sass partials you want to override from rwd/default to skin/frontend/custompackage/customtheme/scss.

Now you can set up a fallback structure:

Step-1 : Add the following line to skin/frontend/rwd/default/config.rb (omit the first line if you’re using CE):

add_import_path “../../../rwd/enterprise/scss”
add_import_path “../../../rwd/default/scss”

The preceding causes Compass to look for Sass files in skin/frontend/rwd/enterprise/scss first and then in skin/frontend/rwd/default/scss if they can’t be found in skin/frontend/custompackage/customtheme/scss.

Step-2 : Following is what to do with copies of Sass files from rwd/default:

styles.scss, styles-ie8.scss: You must copy these files into your custom theme so that Compass knows which files to compile into CSS files.

core.scss, framework.scss: You must copy these files into your custom theme so Compass looks in the custompackage/customtheme directory for any of the files imported by these two files.

var.scss: You’ll typically edit the values in this file for your custom theme.
If you don’t like the idea of editing this file and want to override its values with a _var_custom.scss file, make sure it gets imported immediately after var.scss.

Step-3: As a reminder, to override Sass partials in rwd/default, you must copy them into your custom theme so they’ll get included by Compass.

Note: If you’re using compass watch to recompile your Sass, you must stop and restart Compass any time you copy a new Sass file into your custom theme. Otherwise, the Compass compiler won’t know about the existence of the new file.
To avoid having to stop and restart compass watch, start your project by copying all Sass files from rwd/default into your custom theme, and then delete all unchanged Sass files at the end of your project.

Scaffold Forms

The Magento responsive theme ships with


that has styles that cause the labels of long forms (for example, the Billing Information step of checkout) to display to the left of their associated input on larger viewports (as opposed to on top). This layout is intended to make long forms seem less intimidating to users.

However, these styles are not currently implemented because the Magento responsive theme must work well with internationalization (where the length of labels can vary greatly, thereby impacting the scaffold form layout).

It’s up to you whether or not to use these styles. To do so, move



core/_scaffold-forms.scss and edit scss/_core.scss

to include it.

High-Definition Images

The responsive theme has no high-resolution image solution for product listing pages. For a 2x solution, PictureFill (or similar polyfill) could be used, although it would need to be integrated with ElevateZoom.

Note: Category banners and product detail pages use a 1.5x image solution.

Magento does not resize the main product photo on product detail pages, so you must implement high-resolution support in your responsive theme. You must be careful with this if you have very large product photos because it could drastically impact performance.

To constrain the size of your main product photo, open


and modify this line:

helper(‘catalog/image’)->init($_product, ‘image’) ?>

to something like:

src=”helper(‘catalog/image’)->init($_product, ‘image’)->constrainOnly(true)->resize(1800); ?>”

Load More