Ecommerce Developer
 
 

Platforms & Shopping Carts

Building a Magento Theme Start to Finish, Part 13: Turning the Page

By Armando Roggio on April 08, 2010 · with 9 Comments

 

The Pine Theme home page has come a long way since this series started. So much so that it is now nearly complete with a content slider, merchandising section, slide-out search form, rounded corners, an eye-catching newsletter form, and several links to social media sites.

In fact, only one simple task remains until the home page is complete, and we can turn to other site templates. That task is to add a section in the header to promote trust seals.

Trust seals are, in my opinion, an essential part of ecommerce marketing, especially for small-to-midsized companies with relatively less brand recognition. Research has shown that including trust seals, particularly in marquee positions, can increase sales conversions for your merchants. So when you're developing a theme, don't treat trust marks as an afterthought rather, plan for them.

Series Links

Getting the Trust Marks and Other Graphics

Of course, in the real world, your client will have to register for and pay for the trust seals. In the Pine Theme, however, I am using copied trust seals. If you are packaging a theme for resale, don't distribute images like the ones I am using for this demonstration. Use blanks, so that some customer is not tempted to live fake trust marks on site. But still use realistic examples when you demonstrate the theme, since these will make it more salable.

I am also generating additional background graphics for the trust seal section.

Adding the New Section

I am going to add a simple unordered list with three list items representing a GeoTrust SSL certificate, a TRUSTe Privacy Seal, and a VeriSign Trusted Seal, all three of which I am using in the example. Again, I am using realistic trust seals for the Pine Theme. If the Pine Theme were to be sold on a marketplace, I would still use these images for the demonstration, but I would replace them with blanks in the downloadable folder.

I want my new section to reside in the header so I navigate to header.phtml at app > design > frontend > default > pine > template > page > html.

For the theme, I am using the following mark-up.

<div id="trusted">
	<ul>
		 <li class="trusted"><a href=""><img src="<?php echo $this->getSkinUrl('images/truste.png') ?>" alt="TRUSTe Privacy" /></a></li>		
 <li class="trusted"><a href=""><img src="<?php echo $this->getSkinUrl('images/geotrust.png') ?>" alt="GeoTrust" /></a></li>
		 <li class="trusted"><a href=""><img src="<?php echo $this->getSkinUrl('images/verisign.png') ?>" alt="VeriSign TRUSTED" /></a></li>
	</ul>
</div>

Style the Trust Seals

When I reload the page, my layout is a mess. The new section is on page, but it has completely changed our flow. To fix this problem, I need to remove it from the general page flow, so I head to boxes.css at skin > frontend > default > pine > css.

First, I need to create a style description from my newly created "trusted" div , change its position, and make the list items display inline.

/*Trust Marks*/
#trusted {position: absolute; top: 60px; margin-left:575px;}
.trusted {display: inline; padding: 0 5px;}

Next, I filled out the style by adding several descriptions.

/*Trust Marks*/
#trusted {position: absolute; top: 60px; margin-left:575px;}
#trusted ul {width: 350px; height: 70px; background: #fff; border: #F29A43 solid 2px; border-radius: 20px; /* CSS 3 */ -moz-border-radius: 20px; /* Firefox */   -icab-border-radius: 20px; /* iCab */  -khtml-border-radius: 20px; /* Konqueror */  -webkit-border-bottom-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; /* Chrome and Safari */ text-align: center;}
.trusted {position: relative; top: 10px; display: inline; padding:0 5px; }

There are several things to notice. For example, I have added a significant style description for the unordered list, #trusted ul, including setting both height and width; including a solid white background; and adding a border using the tan color from the Pine Theme palette.

This description actually differs from the original Pine Them graphic design described earlier in the series, but after recently reviewing some examples of effect trust seal usage, I decided to use a higher-contract white background.

I am also specifying rounded corners. The CurvyCorners JavaScript that we are running makes this work even in Internet Explorer, which won't have support for rounded corners until version 9 comes out later this year or early in 2011.

The Pine Theme home page is now complete. In the next episode, we'll work on the product category pages. The work should move more quickly now.

Related Articles

8 Comments

Rss-sm