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
The following files should now be located in
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
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):
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
Step-2 : Following is what to do with copies of Sass files from
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.
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.
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); ?>”