Size Matters styling can be changed by adding CSS to your store's theme.

The following CSS selectors can be used to style Size Matters:

  • div.esc-size-guide
  • h5.esc-size-guide--title
  • div.esc-size-guide--table-wrap
  • p.esc-size-guide--description
  • table.esc-size-guide--table
  • tr.esc-size-guide--row
  • th.esc-size-guide--heading


These methods can be used by developers to extend or modify how the charts created by Size Matters appear on your store.

Getting started

Add the following code before your scripts (this will expose Size Matter's configuration options):

!function(a){a._empty=a._empty||[],a._beforeRender=a._beforeRender||[],a._afterRender=a._afterRender||[],a._renderedAll=a._renderedAll||[],a._overrideContent=a._overrideContent||function(a){return a.content},a.onEmpty=function(b){b&&a._empty.push(b)},a.onBeforeRender=function(b){b&&a._beforeRender.push(b)},a.onAfterRender=function(b){b&&a._afterRender.push(b)},a.onRenderedAll=function(b){b&&a._renderedAll.push(b)},a.overrideCellContent=function(b){a._overrideContent=b}}(window.eastsideco_sizeGuides||(window.eastsideco_sizeGuides={}));

Get a callback before a chart is rendered

The onBeforeRender method allows you to register a callback which can modify the data in the chart.

var SizeMatters = window.eastsideco_sizeGuides;
SizeMatters.onBeforeRender(function(data) {
	// data: { guideData, container }
	return data.guideData;

Get a callback after a chart is rendered

The onAfterRender method allows you to register a callback which is called after a chart is rendered. This callback cannot modify the chart.

var SizeMatters = window.eastsideco_sizeGuides;
SizeMatters.onAfterRender(function(data) {	
    // data: { guideData, container, element }

Get a callback after all charts are rendered

var SizeMatters = window.eastsideco_sizeGuides;
SizeMatters.onRenderedAll(function(data) {	
    // data: { container }

Provide a callback which modifies cell contents

The overrideCellContent method allows you to register a function that will be used to transform cell contents. The function should accept a string and return the modified content (as HTML).

var SizeMatters = window.eastsideco_sizeGuides;
SizeMatters.overrideCellContent(function(value) {
    if (value == 'logo') {
        return '<img src="foo.png">';

    return value;


Still need help? Contact Us Contact Us