Optimize The Product Options Box on Magento

Out of the box Magento looks great, but it can be a little large for people with smaller resolution. Analytics has taught me that majority of users are stuck on 1024X768. Sadly this resolution is tiny and really limits how wide your website can be – unless your working with something fluid, but your probably not. One of the biggest issues I saw in Magento’s large styled product page is the Product Options Box. In Magento’s demo you can see two options:

Large Product Options Box:

Better Formated Box

The first image is what comes out of the box with Magento. So how can you get the Product Options Box smaller and better formated? It’s an easy edit:

Open File: /app/design/frontend/default/-YOURTEMPLATE-/template/catalog/product/view.phtml

Locate this code:

1
2
3
4
5
6

</div>
        <div class="clear"></div>
        <?php if ($_product->isSaleable() && $this->hasOptions()):?>
            <?php echo $this->getChildChildHtml('container2', '', true, true) ?>
        <?php endif;?>
    </form>

Replace it with this code:

1
2
3
4
5
6

<?php if ($_product->isSaleable() && $this->hasOptions()):?>
            <?php echo $this->getChildChildHtml('container2', '', true, true) ?>
        <?php endif;?>
        </div>
        <div class="clear"></div>
    </form>

Now you have a better optimized product options box! Users with smaller resolutions will be more likely to see Add to Cart which in turn should help out your conversation rate. Of course you should always A/B Test any changes!