Customize Magento 1.9 Responsive Web Design Template Like a Boss

Customize Magento 1.9 Responsive Web Design Template Like a Boss


Eleven Dimensions Technologies has many years of experience building and maintaining Magento shopping carts and building custom templates.  In this short technical note we will explain how the responsive design template works.  The built-in Responsive Web Design (RWD) Template is a great place to start customizing your own Magento shop. It already has the so called "responsive" sections in the styles.css file for small screens. in styles.css you will see code such as this:
@media only screen and (max-width: 770px) {
 (various css here...)
This blog will show you all of my tricks. First you need to start with Magento ver.

Add Tabs to the RWD Product View

The First trick is to add a new tab to the RWD product view page:
edit this file:

in this section add a few lines to increase the tabs:

<block type="catalog/product_view_additional" name="" as="product_additional_data" />

<block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml">
   <action method="addToParentGroup"><group>detailed_info</group></action>
   <action method="setTitle" translate="value"><value>Description</value></action>

<block type="catalog/product_view_attributes" name="product.attributes" as="additional" template="catalog/product/view/attributes.phtml">
    <action method="addToParentGroup"><group>detailed_info</group></action>
    <action method="setTitle" translate="value"><value>Additional Information</value></action>

<!-- added this part -->
<block type="catalog/product_view_media" name="" as="moreviews" template="catalog/product/view/moreviews.phtml">
    <action method="addToParentGroup"><group>detailed_info</group></action>
    <action method="setTitle" translate="value"><value>More Views</value></action>

Customize the ZoomLens in product view.

ZoomLens allows your customers to view a zoomed in image of your product.  Simply edit this file:
if you use minimized js code then edit this file:
Change the zoom size, enable/disable the zoom lens entirely if you desire.

Magento Connect - Access is locked. Please try again in a few minutes

If you see this when trying to use Magento Connect, then edit this file ./var/brute-force.ini
Change the value in Line 1 to 0, optionally you can delete the last 2 lines to turn off this feature.
brute-force-bad-attempts-count = 0
brute-force-diff-time-to-attempt = 180
brute-force-attempts-count = 5
brute-force-last-bad-time = 1509709870

Get a Free SSL Certificate for your Magento Site

Define Custom Attributes for Products and Use Them in Backend Code

Suppose you want to show a palette of color swatches for your multicolor selectable product in your Magento Shop.  You can define a custom catalog product attribute that you can set a text value into and then query that attribute in your customized RWD template and then use it to query the contents of a CMS Block.  First of all, logon to the Magento Admin Panel, then use the menus to define attributes.  Catalog->Attributes->Manage Attributes then Add New Attribute button to make a new one. Define a new one called swatch_cms_block. The so called "Attribute Code" is where this name goes. Scope is Store View, type is Text Field. The Title will just be Swatch.  Apply to All product Types.  Default value should be just "None".
Now you need to go up one menu level to "Manage Attribute Sets" , Choose "Default" and assign this attribute to the General category of your product.
Finally, in your RWD view.phtml code you will need to add this code somewhere:


       $attribute = $_product->getResource()->getAttribute('swatch_cms_block');
       if ($attribute) {
           $attribute_value = $attribute->getFrontend()->getValue($_product);
       } else {
           $attribute_value = "Undefined Attribute";
           echo "<H1>Please Define the swatch_cms_block attribute first</H1>\n";
       if ($attribute_value == "") $attribute_value = "NONE";
       echo $this->getLayout()->createBlock('cms/block')->setBlockId($attribute_value)->toHtml();

Finally, you will need to define a CMS Static Block called "NONE" to serve as the default CMS block. Finally, you will need to define define CMS blocks to serve a swatches for your products. The result is that the CMS block will appear in your custom product now.

Crop and Resize Images in Catalog Grid View

Use the Varian_Image library like a boss to crop and resize images.
          $_imgSize = 350;
          $tempimg = $this->helper('catalog/image')->init($_product, 'small_image')
                              ->resize(350, 350);

          $image = Mage::helper('catalog/image')->init($_product, 'small_image')->resize(350, 350);
          $imageUrl = $image->__toString();
          $newFile = str_replace(
                              array(Mage::getBaseUrl('media'), '/'),
                              array(Mage::getBaseDir('media').DS, DS),
          $imageObj = new Varien_Image($newFile);
          $width = $imageObj->getOriginalWidth();
          $height = $imageObj->getOriginalHeight();
          echo "<H1>".$width." x ".$height."</H1>\n";

Many Thanks To

This Tech Tidbit was brought to you by your friends at Eleven Dimensions Computer Technologies.
See our new 11D website at:

Our Partner Websites:

Bare Wire Networks:
CTI Solutions:

Many Thanks to Our Partner companies


  1. This comment has been removed by the author.

  2. Thank you for sharing excellent information. Your website is very cool. Fully useful your blog post... Online Shopping Site In Ahmedabad

  3. Thank you for sharing this information

    Magento development company

  4. Thank you for the most valuable information....You must have done good research for the work, I appreciate your efforts.
    website design in india
    low cost web design services

  5. This is a great post. Your Blog the very informative i have learned some information about your blog. We are top Mobile App Development | Mobile App Development Company in India | Website Development Company in Delhi | Web Designing Company in Gurgaon.

  6. After the evolution of small screens that allowed us to call ourselves modern, ,Best Web Developers in India have come up with modular ways to develop. However, heavy frameworks like Angular has been overpowered React. The basic idea to build better applications and websites with lightweight yet robust tools. We cannot say that complexity will evade completely. Even if writing code becomes easy, fitting the components all together effectively is a task in itself. Yet, we shall see new changes in the technology as far as web development is concerned.

  7. A great guide for Magento 1.x users

    I have found another great guide for Magento 2: Magento 2 attributes

    I believe it will help your readers.

  8. We are one of the best and leading towing company in Portland and our services are available in various location of Oregon. Call us to get more information about charges, services and more.
    Towing Services in Portland
    Tow Truck Company in Beaverton
    Towing Services in Tigard
    Towing Company in Vancouver
    Flatbed Towing in Vancouver
    Towing Company in Clackamas

  9. Get best service of packers and movers from Taipan as we are the genuine and well known service providers in Malaysia. Our services are available for all local and national places.
    Packers and Movers in Malaysia
    International Movers in Malaysia
    Packers & Movers Near Me
    International relocation services
    Furniture Storage Solutions
    Moving with Kids
    Moving with Pets
    Moving High Value Items

  10. Great content , really informative and useful , appreciate you enlightening us with this! Lets also give ecommerce web development a go, please check it out guys! Thanks.

  11. I am reading blogs and articles for an extended, however seldom notice such participating posts we've a serious concern within the same field that reach us to urge higher data. Also visit: mobile application development company

  12. Hi, I am John Smith I am Web Developer, It is an amazing blog thanks for the sharing the blog. Frantic infotech provide the Android Chat App Development such as an information about software development for costumer service. Frantic infotech also provide the mobile app development. Theve delopment of advanced web applications is Orient Software’s specialty and we will successfully fulfill all your web application development requirements, from small-sized to wider-ranged projects.

  13. Informative and creative blog.
    Appreciate your thoughts.
    Dubai web design

  14. Event technology developed rapidly throughout the Covid pandemic. However, as platforms pivoted to virtual quickly, event manager data architecture decisions were rushed and often not carefully considered. This lack of coordinated output and the substantial increase in data from virtual events resulted in vast amounts of siloed data. define debrief, how much does wedding liability insurance cost, event management tools, swag bag ideas, what is nft, speaker biography examples, vendor events near me 2021, thank you email after meeting and how to invite someone for business lunch

  15. Physical therapy can relieve pain, improve range of motion, and accelerate recovery from injury or surgery. Learn more about onsite recovery in Westford.

  16. Web developers at web design Dubai agency are the programmers with the coding skills needed to add functionality to a website

  17. The following process of customization can serve different purposes. This information is technically quite credible. Wordpress website optimization


Post a Comment

Popular posts from this blog

Microsoft Visio 2010 Premium Product Keys

Fix: The Diagnostic Service Host service failed to start due to the following error. [ solved, no kidding ]

Mercedes Benz Diesel CDI EGR Emulator Circuit Diagrams