Shopify
Layout Variations
See how this plugin adapts across different mashup views. Each view shows a single instance to demonstrate how the layout responds to available space.
Full View
$159,022
Total Sales
763
Pending Orders
Dec 01 -
Dec 31
Current
$156
AOV
254
Fulfilled Orders
Nov 01 -
Nov 30
Comparison
Shopify
trmnl.com
<div class="layout layout--col gap">
<div class="grid">
<div class="row">
<div class="grid portrait:grid--cols-8 portrait:gap">
<div class="item col--span-2 portrait:col--span-8">
<div class="meta"></div>
<div class="content">
<span class="value value--large lg:value--xxlarge value--tnums" data-value-type="number">$159,022</span>
<span class="label">Total Sales</span>
</div>
</div>
<div class="item col--span-1 portrait:col--span-4">
<div class="meta"></div>
<div class="content">
<span class="value value--small lg:value--base value--tnums" data-value-type="number">763</span>
<span class="label">Pending Orders</span>
</div>
</div>
<div class="item col--span-1 portrait:col--span-4">
<div class="meta"></div>
<div class="content">
<span class="value value--small lg:value--base value--tnums" data-value-type="date">
<div class="w--14 h--1.5 mb--2 bg--black" style="border-radius: 20px;"></div>
Dec 01 -
Dec 31
</span>
<span class="label">Current</span>
</div>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="grid">
<div class="row">
<div class="grid portrait:grid--cols-8 portrait:gap">
<div class="item col--span-2 portrait:col--span-8">
<div class="meta"></div>
<div class="content">
<span class="value lg:value--base value--tnums" data-value-type="number">$156</span>
<span class="label">AOV</span>
</div>
</div>
<div class="item col--span-1 portrait:col--span-4">
<div class="meta"></div>
<div class="content">
<span class="value value--small lg:value--base value--tnums" data-value-type="number">254</span>
<span class="label">Fulfilled Orders</span>
</div>
</div>
<div class="item col--span-1 portrait:col--span-4">
<div class="meta"></div>
<div class="content">
<span class="value value--small lg:value--base value--tnums" data-value-type="date">
<div class="w--14 h--1.5 mb--2 bg--gray-5"></div>
Nov 01 -
Nov 30
</span>
<span class="label">Comparison</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://trmnl.com/js/highcharts/12.3.0/highcharts.js"></script>
<script src="https://trmnl.com/js/highcharts/12.3.0/highcharts-more.js"></script>
<script src="https://trmnl.com/js/highcharts/12.3.0/pattern-fill.js"></script>
<div id="chart-e37fd059d678" class="w--full grow"></div>
<script type="text/javascript">document.addEventListener("DOMContentLoaded", () => {
var data = [{"name":"Current","data":[["2024-12-01",946.02],["2024-12-02",1441.82],["2024-12-03",449.37],["2024-12-04",452.0],["2024-12-05",705.0],["2024-12-06",936.43],["2024-12-07",2681.07],["2024-12-08",3770.49],["2024-12-09",2260.71],["2024-12-10",3609.26],["2024-12-11",4116.29],["2024-12-12",2447.15],["2024-12-13",1180.39],["2024-12-14",714.16],["2024-12-15",1863.91],["2024-12-16",1512.0],["2024-12-17",867.28],["2024-12-18",1673.34],["2024-12-19",13877.3],["2024-12-20",32002.05],["2024-12-21",17434.28],["2024-12-22",12187.9],["2024-12-23",10076.88],["2024-12-24",4633.01],["2024-12-25",4358.82],["2024-12-26",5784.35],["2024-12-27",6120.38],["2024-12-28",3170.55],["2024-12-29",3004.26],["2024-12-30",10763.44],["2024-12-31",3982.23]]},{"name":"Comparison","data":[["2024-12-01",425.28],["2024-12-03",326.3],["2024-12-04",462.96],["2024-12-05",294.26],["2024-12-06",751.98],["2024-12-08",296.12],["2024-12-09",131.78],["2024-12-10",619.4],["2024-12-11",616.0],["2024-12-12",462.0],["2024-12-14",9524.06],["2024-12-15",7180.58],["2024-12-16",2815.0],["2024-12-17",2194.1],["2024-12-18",909.08],["2024-12-19",1499.78],["2024-12-20",2029.41],["2024-12-21",884.0],["2024-12-22",972.72],["2024-12-23",909.0],["2024-12-24",151.99],["2024-12-25",1824.98],["2024-12-26",748.73],["2024-12-27",1064.97],["2024-12-28",772.56],["2024-12-29",1478.86],["2024-12-30",590.56]]}];
Highcharts.chart('chart-e37fd059d678', {
chart: {
type: 'spline',
height: null,
width: null,
animation: false,
spacing: [10, 10, 5, 10]
},
title: {
text: null
},
plotOptions: {
series: {
animation: false,
enableMouseTracking: false,
states: {
hover: { enabled: false }
},
marker: {
enabled: false
}
}
},
series: [{
data: data[0].data,
lineWidth: 4,
color: '#000000',
name: data[0].name,
zIndex: 2
}, {
data: data[1].data,
lineWidth: 5,
name: data[1].name,
zIndex: 1,
color: {
pattern: {
image: 'https://trmnl.com/images/grayscale/gray-5.png',
width: 12,
height: 12
}
}
}],
tooltip: { enabled: false },
legend: { enabled: false },
yAxis: {
labels: {
style: { fontSize: '16px', color: '#000000' }
},
gridLineDashStyle: 'shortdot',
gridLineWidth: 1,
gridLineColor: '#000000',
tickAmount: 5,
title: {
text: null
}
},
xAxis: {
type: 'datetime',
labels: {
style: { fontSize: '16px', color: '#000000' },
padding: 5,
y: 25
},
lineWidth: 0,
gridLineDashStyle: 'dot',
tickWidth: 1,
tickLength: 0,
gridLineWidth: 1,
gridLineColor: '#000000',
tickPixelInterval: 120,
offset: 0,
margin: 0,
title: {
text: null
}
},
credits: {
enabled: false
}
});
});</script>
</div>
<div class="title_bar">
<img class="image" alt="" src="https://trmnl.com/images/plugins/shopify--render.svg">
<span class="title">Shopify</span>
<span class="instance">trmnl.com</span>
</div>Half Horizontal
$159,022
Total Sales
$156
AOV
763
Pending Orders
254
Fulfilled Orders
Nov 01 -
Nov 30
Dec 01 -
Dec 31
Shopify
trmnl.com
<div class="layout gap--space-between">
<div class="flex w--full h--full portrait:grid--cols-1 portrait:gap--xlarge">
<div class="col--span-3 portrait:col--span-1 col gap--space-between">
<div class="grid grid--cols-2 portrait:grid--cols-1 gap--[9px]" data-adjust-grid-gaps="false">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value lg:value--large value--tnums" data-value-type="number">$159,022</span>
<span class="label">Total Sales</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value lg:value--base value--tnums" data-value-type="number">$156</span>
<span class="label">AOV</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="grid grid--cols-2">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xsmall lg:value--base value--tnums" data-value-type="number">763</span>
<span class="label">Pending Orders</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xsmall lg:value--base value--tnums" data-value-type="number">254</span>
<span class="label">Fulfilled Orders</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="grid grid grid--cols-2">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xxsmall lg:value--small value--tnums" data-value-type="date">
<div class="w--12 h--1.5 mb--2 bg--gray-5"></div>
Nov 01 -
Nov 30
</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xxsmall lg:value--small value--tnums" data-value-type="date">
<div class="w--12 h--1.5 mb--2 bg--black" style="border-radius: 20px;"></div>
Dec 01 -
Dec 31
</span>
</div>
</div>
</div>
</div>
<div class="col--span-3 portrait:col--span-1 col gap--space-between">
<div id="chart-3e5e4a801edb" class="w--full h--full"></div>
<script src="https://trmnl.com/js/highcharts/12.3.0/highcharts.js"></script>
<script src="https://trmnl.com/js/highcharts/12.3.0/highcharts-more.js"></script>
<script src="https://trmnl.com/js/highcharts/12.3.0/pattern-fill.js"></script>
<script type="text/javascript">document.addEventListener("DOMContentLoaded", () => {
var data = [{"name":"Current","data":[["2024-12-01",946.02],["2024-12-02",1441.82],["2024-12-03",449.37],["2024-12-04",452.0],["2024-12-05",705.0],["2024-12-06",936.43],["2024-12-07",2681.07],["2024-12-08",3770.49],["2024-12-09",2260.71],["2024-12-10",3609.26],["2024-12-11",4116.29],["2024-12-12",2447.15],["2024-12-13",1180.39],["2024-12-14",714.16],["2024-12-15",1863.91],["2024-12-16",1512.0],["2024-12-17",867.28],["2024-12-18",1673.34],["2024-12-19",13877.3],["2024-12-20",32002.05],["2024-12-21",17434.28],["2024-12-22",12187.9],["2024-12-23",10076.88],["2024-12-24",4633.01],["2024-12-25",4358.82],["2024-12-26",5784.35],["2024-12-27",6120.38],["2024-12-28",3170.55],["2024-12-29",3004.26],["2024-12-30",10763.44],["2024-12-31",3982.23]]},{"name":"Comparison","data":[["2024-12-01",425.28],["2024-12-03",326.3],["2024-12-04",462.96],["2024-12-05",294.26],["2024-12-06",751.98],["2024-12-08",296.12],["2024-12-09",131.78],["2024-12-10",619.4],["2024-12-11",616.0],["2024-12-12",462.0],["2024-12-14",9524.06],["2024-12-15",7180.58],["2024-12-16",2815.0],["2024-12-17",2194.1],["2024-12-18",909.08],["2024-12-19",1499.78],["2024-12-20",2029.41],["2024-12-21",884.0],["2024-12-22",972.72],["2024-12-23",909.0],["2024-12-24",151.99],["2024-12-25",1824.98],["2024-12-26",748.73],["2024-12-27",1064.97],["2024-12-28",772.56],["2024-12-29",1478.86],["2024-12-30",590.56]]}];
Highcharts.chart('chart-3e5e4a801edb', {
chart: {
type: 'spline',
height: null,
width: null,
animation: false,
spacing: [10, 0, 10, 0]
},
title: {
text: null
},
plotOptions: {
series: {
animation: false,
enableMouseTracking: false,
states: {
hover: { enabled: false }
},
marker: {
enabled: false
}
}
},
series: [{
data: data[0].data,
lineWidth: 4,
color: '#000000',
name: data[0].name,
zIndex: 2
}, {
data: data[1].data,
lineWidth: 5,
name: data[1].name,
zIndex: 1,
color: {
pattern: {
image: 'https://trmnl.com/images/grayscale/gray-5.png',
width: 12,
height: 12
}
}
}],
tooltip: { enabled: false },
legend: { enabled: false },
yAxis: {
labels: {
style: { fontSize: '16px', color: '#000000' },
formatter: function() {
return '$' + (this.value / 1000) + 'k';
}
},
gridLineDashStyle: 'shortdot',
gridLineWidth: 1,
gridLineColor: '#000000',
tickAmount: 5,
title: {
text: null
}
},
xAxis: {
type: 'datetime',
labels: {
style: { fontSize: '16px', color: '#000000' },
padding: 5,
y: 25
},
lineWidth: 0,
gridLineDashStyle: 'dot',
tickWidth: 1,
tickLength: 0,
gridLineWidth: 1,
gridLineColor: '#000000',
tickPixelInterval: 120,
offset: 0,
margin: 0,
title: {
text: null
}
},
credits: {
enabled: false
}
});
});</script>
</div>
</div>
</div>
<div class="title_bar">
<img alt="Shopify Plugin Icon" class="image" src="https://trmnl.com/images/plugins/shopify--render.svg">
<span class="title">Shopify</span>
<span class="instance">trmnl.com</span>
</div>Half Vertical
$159,022
Total Sales
$156
AOV
763
Pending Orders
254
Fulfilled Orders
Nov 01 -
Nov 30
Dec 01 -
Dec 31
Shopify
trmnl.com
<div class="layout layout--col gap">
<div class="grid grid--cols-2 portrait:grid--cols-1 portrait:gap">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value lg:value--large value--tnums" data-value-type="number">$159,022</span>
<span class="label">Total Sales</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value lg:value--base value--tnums" data-value-type="number">$156</span>
<span class="label">AOV</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="grid grid--cols-2 portrait:grid--cols-1 portrait:gap">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--small lg:value--base value--tnums" data-value-type="number">763</span>
<span class="label">Pending Orders</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--small lg:value--base value--tnums" data-value-type="number">254</span>
<span class="label">Fulfilled Orders</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="grid grid--cols-2 portrait:grid--cols-1 portrait:gap">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xxsmall lg:value--small value--tnums" data-value-type="date">
<div class="w--12 h--1.5 mb--2 bg--gray-5"></div>
Nov 01 -
Nov 30
</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xxsmall lg:value--small value--tnums" data-value-type="date">
<div class="w--12 h--1.5 mb--2 bg--black" style="border-radius: 20px;"></div>
Dec 01 -
Dec 31
</span>
</div>
</div>
</div>
<div id="chart-cf3e38ef02b4" class="w--full grow"></div>
<script src="https://trmnl.com/js/highcharts/12.3.0/highcharts.js"></script>
<script src="https://trmnl.com/js/highcharts/12.3.0/highcharts-more.js"></script>
<script src="https://trmnl.com/js/highcharts/12.3.0/pattern-fill.js"></script>
<script type="text/javascript">document.addEventListener("DOMContentLoaded", () => {
var data = [{"name":"Current","data":[["2024-12-01",946.02],["2024-12-02",1441.82],["2024-12-03",449.37],["2024-12-04",452.0],["2024-12-05",705.0],["2024-12-06",936.43],["2024-12-07",2681.07],["2024-12-08",3770.49],["2024-12-09",2260.71],["2024-12-10",3609.26],["2024-12-11",4116.29],["2024-12-12",2447.15],["2024-12-13",1180.39],["2024-12-14",714.16],["2024-12-15",1863.91],["2024-12-16",1512.0],["2024-12-17",867.28],["2024-12-18",1673.34],["2024-12-19",13877.3],["2024-12-20",32002.05],["2024-12-21",17434.28],["2024-12-22",12187.9],["2024-12-23",10076.88],["2024-12-24",4633.01],["2024-12-25",4358.82],["2024-12-26",5784.35],["2024-12-27",6120.38],["2024-12-28",3170.55],["2024-12-29",3004.26],["2024-12-30",10763.44],["2024-12-31",3982.23]]},{"name":"Comparison","data":[["2024-12-01",425.28],["2024-12-03",326.3],["2024-12-04",462.96],["2024-12-05",294.26],["2024-12-06",751.98],["2024-12-08",296.12],["2024-12-09",131.78],["2024-12-10",619.4],["2024-12-11",616.0],["2024-12-12",462.0],["2024-12-14",9524.06],["2024-12-15",7180.58],["2024-12-16",2815.0],["2024-12-17",2194.1],["2024-12-18",909.08],["2024-12-19",1499.78],["2024-12-20",2029.41],["2024-12-21",884.0],["2024-12-22",972.72],["2024-12-23",909.0],["2024-12-24",151.99],["2024-12-25",1824.98],["2024-12-26",748.73],["2024-12-27",1064.97],["2024-12-28",772.56],["2024-12-29",1478.86],["2024-12-30",590.56]]}];
Highcharts.chart('chart-cf3e38ef02b4', {
chart: {
type: 'spline',
height: null,
width: null,
animation: false,
spacing: [10, 0, 0, 0]
},
title: {
text: null
},
plotOptions: {
series: {
animation: false,
enableMouseTracking: false,
states: {
hover: { enabled: false }
},
marker: {
enabled: false
}
}
},
series: [{
data: data[0].data,
lineWidth: 4,
color: '#000000',
name: data[0].name,
zIndex: 2
}, {
data: data[1].data,
lineWidth: 5,
name: data[1].name,
zIndex: 1,
color: {
pattern: {
image: 'https://trmnl.com/images/grayscale/gray-5.png',
width: 12,
height: 12
}
}
}],
tooltip: { enabled: false },
legend: { enabled: false },
yAxis: {
labels: {
style: { fontSize: '16px', color: '#000000' },
formatter: function() {
return '$' + (this.value / 1000) + 'k';
}
},
gridLineDashStyle: 'shortdot',
gridLineWidth: 1,
gridLineColor: '#000000',
tickAmount: 5,
title: {
text: null
}
},
xAxis: {
type: 'datetime',
labels: {
style: { fontSize: '16px', color: '#000000' },
padding: 5,
y: 25
},
lineWidth: 0,
gridLineDashStyle: 'dot',
tickWidth: 1,
tickLength: 0,
gridLineWidth: 1,
gridLineColor: '#000000',
tickPixelInterval: 120,
offset: 0,
margin: 0,
title: {
text: null
}
},
credits: {
enabled: false
}
});
});</script>
</div>
<div class="title_bar">
<img alt="Shopify Plugin Icon" class="image" src="https://trmnl.com/images/plugins/shopify--render.svg">
<span class="title">Shopify</span>
<span class="instance">trmnl.com</span>
</div>Quadrant
$159,022
Total Sales
763
Pending Orders
254
Fulfilled Orders
Nov 01 -
Nov 30
Dec 01 -
Dec 31
Shopify
trmnl.com
<div class="layout layout--col gap--space-between">
<div class="grid grid--cols-2 portrait:grid--cols-1 gap--[9px]" data-adjust-grid-gaps="false">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value lg:value--large value--tnums" data-value-type="number">$159,022</span>
<span class="label">Total Sales</span>
</div>
</div>
<div class="item">
<div id="chart-de5dd1c1ab3b" class="w--full"></div>
<script src="https://trmnl.com/js/highcharts/12.3.0/highcharts.js"></script>
<script src="https://trmnl.com/js/highcharts/12.3.0/highcharts-more.js"></script>
<script src="https://trmnl.com/js/highcharts/12.3.0/pattern-fill.js"></script>
<script type="text/javascript">document.addEventListener("DOMContentLoaded", () => {
var data = [{"name":"Current","data":[["2024-12-01",946.02],["2024-12-02",1441.82],["2024-12-03",449.37],["2024-12-04",452.0],["2024-12-05",705.0],["2024-12-06",936.43],["2024-12-07",2681.07],["2024-12-08",3770.49],["2024-12-09",2260.71],["2024-12-10",3609.26],["2024-12-11",4116.29],["2024-12-12",2447.15],["2024-12-13",1180.39],["2024-12-14",714.16],["2024-12-15",1863.91],["2024-12-16",1512.0],["2024-12-17",867.28],["2024-12-18",1673.34],["2024-12-19",13877.3],["2024-12-20",32002.05],["2024-12-21",17434.28],["2024-12-22",12187.9],["2024-12-23",10076.88],["2024-12-24",4633.01],["2024-12-25",4358.82],["2024-12-26",5784.35],["2024-12-27",6120.38],["2024-12-28",3170.55],["2024-12-29",3004.26],["2024-12-30",10763.44],["2024-12-31",3982.23]]},{"name":"Comparison","data":[["2024-12-01",425.28],["2024-12-03",326.3],["2024-12-04",462.96],["2024-12-05",294.26],["2024-12-06",751.98],["2024-12-08",296.12],["2024-12-09",131.78],["2024-12-10",619.4],["2024-12-11",616.0],["2024-12-12",462.0],["2024-12-14",9524.06],["2024-12-15",7180.58],["2024-12-16",2815.0],["2024-12-17",2194.1],["2024-12-18",909.08],["2024-12-19",1499.78],["2024-12-20",2029.41],["2024-12-21",884.0],["2024-12-22",972.72],["2024-12-23",909.0],["2024-12-24",151.99],["2024-12-25",1824.98],["2024-12-26",748.73],["2024-12-27",1064.97],["2024-12-28",772.56],["2024-12-29",1478.86],["2024-12-30",590.56]]}];
Highcharts.chart('chart-de5dd1c1ab3b', {
chart: {
type: 'spline',
height: 60,
width: null,
animation: false,
spacing: [0, 0, 0, 0]
},
title: {
text: null
},
plotOptions: {
series: {
animation: false,
enableMouseTracking: false,
states: {
hover: { enabled: false }
},
marker: {
enabled: false
}
}
},
series: [{
data: data[0].data,
lineWidth: 4,
color: '#000000',
name: data[0].name,
zIndex: 2
}, {
data: data[1].data,
lineWidth: 5,
name: data[1].name,
zIndex: 1,
color: {
pattern: {
image: 'https://trmnl.com/images/grayscale/gray-5.png',
width: 12,
height: 12
}
}
}],
tooltip: { enabled: false },
legend: { enabled: false },
yAxis: { visible: false },
xAxis: { visible: false },
credits: {
enabled: false
}
});
});</script>
</div>
</div>
<div class="divider"></div>
<div class="grid grid--cols-2 portrait:grid--cols-1">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xsmall lg:value--base value--tnums" data-value-type="number">763</span>
<span class="label">Pending Orders</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xsmall lg:value--base value--tnums" data-value-type="number">254</span>
<span class="label">Fulfilled Orders</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="grid grid--cols-2 portrait:grid--cols-1">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xxsmall lg:value--small value--tnums" data-value-type="date">
<div class="w--12 h--1.5 mb--2 bg--gray-5"></div>
Nov 01 -
Nov 30
</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xxsmall lg:value--small value--tnums" data-value-type="date">
<div class="w--12 h--1.5 mb--2 bg--black" style="border-radius: 20px;"></div>
Dec 01 -
Dec 31
</span>
</div>
</div>
</div>
</div>
<div class="title_bar">
<img class="image" alt="" src="https://trmnl.com/images/plugins/shopify--render.svg">
<span class="title">Shopify</span>
<span class="instance">trmnl.com</span>
</div>