Code

This involves creating two widgets and adjusting a page to use the new widgets.

ABC Filter Widget

HTML

<div class="abc-filter">
<div class="abc-filter-i" ng-repeat="initial in ::data.initials">
<a class="label label-as-badge label-primary" href="?id=sc_category&initial={{::initial}}">{{::initial}}</a>
</div>
<div class="abc-filter-i">
<a class="label label-as-badge label-primary" href="?id=sc_category&initial=all">All</a>
</div>
</div>

CSS

.abc-filter {
padding-top:5px;
}
.abc-filter-i {
float:left;
padding-right:5px;
}

Server Script

(function() {
data.sc_catalog = $sp.getValue('sc_catalog');
var initials = [];
var itemRec = new GlideRecord('sc_cat_item');
itemRec.addQuery('sys_class_name', 'NOT IN', 'sc_cat_item_guide,sc_cat_item_wizard,sc_cat_item_content');
itemRec.addQuery('sc_catalogs', data.sc_catalog);
itemRec.addQuery('active',true);
itemRec.addQuery('category.active',true);
itemRec.orderBy('name');
itemRec.query();
while (itemRec.next()) {
if (!$sp.canReadRecord("sc_cat_item", itemRec.sys_id.getDisplayValue()))
continue; // user does not have permission to see this item
var initial = itemRec.name.toString()[0];
initials.push(initial);
}
var arrayUtil = new ArrayUtil();
initials = arrayUtil.unique(initials); //remove duplicates
data.initials = initials;
})();

Client Script

function() {
/* widget controller */
var c = this;
}

SC Category Page v2 Widget

Go and find the SC Category Page widget.
Clone the widget and give a new name: SC Category Page v2
Adjust the Server Script

Server Script

(function() {
data.category_id = $sp.getParameter("sys_id");
data.showPrices = $sp.showCatalogPrices();
data.initial = $sp.getParameter('initial') || 'all';
if (options && options.sys_id)
data.category_id = options.sys_id;

data.sc_catalog_page = $sp.getDisplayValue("sc_catalog_page") || "sc_home";
// Does user have permission to see this category?
if (!$sp.canReadRecord("sc_category", data.category_id)) {
data.error = "You do not have permission to see this category";
return;
} 

var cat = new GlideRecord('sc_category');
cat.get(data.category_id);
data.category = cat.getDisplayValue('title');
var items = data.items = [];
var sc = new GlideRecord('sc_cat_item_category');
if (data.category_id) 
sc.addQuery('sc_category', data.category_id);

sc.addQuery('sc_cat_item.active',true);
sc.addQuery('sc_cat_item.sys_class_name', 'NOT IN', 'sc_cat_item_wizard');
if (data.initial != 'all') {
sc.addQuery('sc_cat_item.name', 'STARTSWITH', data.initial);
}
sc.orderBy('sc_cat_item.order');
sc.orderBy('sc_cat_item.name');
sc.query();
while (sc.next()) {
// Does user have permission to see this item?
if (!$sp.canReadRecord("sc_cat_item", sc.sc_cat_item.sys_id.getDisplayValue()))
continue;

var item = {};
var gr = new GlideRecord('sc_cat_item');
gr.get(sc.sc_cat_item);
gr = GlideScriptRecordUtil.get(gr).getRealRecord();
$sp.getRecordDisplayValues(item, gr, 'name,short_description,picture,price,sys_id');
item.sys_class_name = sc.sc_cat_item.sys_class_name + "";
item.page = 'sc_cat_item';
if (item.sys_class_name == 'sc_cat_item_guide')
item.page = 'sc_cat_item_guide';
else if (item.sys_class_name == 'sc_cat_item_content') {
$sp.getRecordValues(item, gr, 'url,content_type,kb_article');
if (item.content_type == 'kb') {
item.page = 'kb_article';
item.sys_id = item.kb_article;
} else if (item.content_type == 'literal') {
item.page = 'sc_cat_item';
} else if (item.content_type == 'external')
item.target = '_blank';
}

items.push(item);
}
})()

Edit the SC Category Page

Remove the Typeahead Search widget and add ABC Filter Widget
Remove SC Category Page and replace with SC Category Page v2 widget

VERSION 2

I also have a version 2 with different images, available per request. You can format buttons in limitless possibilities in the Service Portal.

ABC Filter (Version 2)