X-Cart Breadcrumbs and Rich Snippets

by Tim Hill (aka Doodled)

November 17th 2012
Adding rich snippets to your breadcrumbs enhances the way your pages look in the search results
Adding rich snippets to your breadcrumbs enhances the way your pages look in the search results

Rich snippets are all the rage at the moment because they make the way your website looks in the search results of Google, Yahoo and Bing well a little more sexy!

If you're not sure what Rich snippets are or how they might relate to your online shop have a read of our page on rich snippets and schema first

So how to you integrate them into your X-Cart store so you can go from looking like this in search engine results:

X-Cart page withput rich snippets added to breadcrumbs

to this

X-Cart page with rich snippets added to breadcrumbs

I'll be taking you through adding rich snippets to your breadcrumbs here. There will be future posts on adding Rich Snippets to an individual product screen and a list of products.

What you'll need:

  • HTML knowledge (a little, not too much)
  • FTP access

Steps to adding Rich Snippets

Locate the file bread_crumbs.tpl (usually in skin/common_files/customer/ although yours may be in the skin of a specific template so check both).

Open the file in your text editor and add the text you see in red below:

<div id="location">
{foreach from=$location item=l name=location}
{if $l.1 and not $smarty.foreach.location.last}
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="{$l.1|amp}" class="bread-crumb{if $smarty.foreach.location.last} last-bread-crumb{/if}"><span itemprop="title">{if $webmaster_mode eq "editor"}{$l.0}{else}{$l.0|amp}{/if}</span></a>
</span>
{else}
<font class="bread-crumb{if $smarty.foreach.location.last} last-bread-crumb{/if}">
{if $webmaster_mode eq "editor"}{$l.0}{else}
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">

{if $h1_title eq ""}
{$l.0|amp}
{else}
{$h1_title}
{/if}
</span></span>
{/if}</font>
{/if}
{if not $smarty.foreach.location.last && $config.Appearance.breadcrumbs_separator ne ''}
<span class="seperator">{$config.Appearance.breadcrumbs_separator|amp}</span>
{/if}
{/foreach}
</div>

Testing your Rich Snippets

You can test how your webpage will look in the search results using the Google Structured Data Testing Tool. Note you will need to try a page that is at least 3 deep.

So for example:

Store Home Page > Emergency Light Batteries

Will not show anything in the testing tool

Store Home Page > Emergency Light Batteries > Replacement elb06042 Battery

will show up something like this:

X-Cart page with rich snippets added to breadcrumbs

Note that your HTML and Smarty may look slightly different depending on your version of X-Cart but the general idea is the same. Each breadcrumb should be highlighted individually.

If you're having issues or don't know how to do this get in touch with me at Professional SEO Services.