Big Commerce – Adding rel attributes to pagination

I was working on a BigCommerce site that needed rel attributes added to its pagination links. I’ve worked with BigCommerce sites in the past and I was curious if their backend had changed since then.

The rel=”next” and rel=”prev” link attributes are used to tell Google that each page in the series are unique – this eliminates duplicate content. This is similar to the rel=”canonical” attribute.

I dove right in – everything looked pretty much the same which was good, I needed that extra time to get familiarized again with where their template files were. I’m a big fan of BigCommerce – their backend is super slick. They’re working hard over there at BigCommerce.

When you’re in the backend, BigCommerce is loaded with modules and for the general administrator of the site – it does a pretty good job of providing call to action links to navigate around with ease.

If I had one feature request though – it would be to add call to action link to their template files and a huge title somewhere indicating which theme is installed. If you’re curious where they are, here is the navigation flow:

To access theme files

Store Front > My Themes > Edit HTML / CSS

To access snippets

Store Front > Snippets (expand with +)

Ok, moving on the adding the attributes. I was able to find the pagination file, it seemed to be a pretty standard file based on my research around forums unless you have a very specific theme file.

The Pagination File

Panels/Pagination.html

<div class="js-pagination {{ paginationClass }}">
    {{#paginate pagination type="previous"}}
        {{^if disabled}}<a href="#" class="nav-prev icon-angle-left js-paginate" data-page="{{n}}" rel="prev"></a>{{/if}}
    {{/paginate}}
    <ul class="js-paging-list {{ pagingListClass }}">
        {{#paginate pagination type="middle" limit="7"}}
        {{#if active}}
        <li class="ActivePage">{{n}}</li>
        {{else}}
        <li><a href="#" class="js-paginate" data-page="{{n}}">{{n}}</a></li>
        {{/if}}
        {{/paginate}}
    </ul>
    {{#paginate pagination type="next"}}
        {{^if disabled}}<a href="#" class="nav-next icon-angle-right js-paginate" data-page="{{n}}" rel="next"></a>{{/if}}
    {{/paginate}}
</div>​

Here you pretty much have all you need to implement those rel=”next” and rel=”prev” links. Keep in mind your pagination file may look slightly different based on your theme but you get the general idea. I went ahead and added them above. Pretty sweet.