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--space-between">
<div class="grid">
<div class="row">
<div class="grid">
<div class="item col--span-2">
<div class="meta"></div>
<div class="content">
<span class="value value--large value--tnums" data-value-type="number">$159,022</span>
<span class="label">Total Sales</span>
</div>
</div>
<div class="item col--span-1">
<div class="meta"></div>
<div class="content">
<span class="value value--small value--tnums" data-value-type="number">763</span>
<span class="label">Pending Orders</span>
</div>
</div>
<div class="item col--span-1">
<div class="meta"></div>
<div class="content">
<span class="value value--xsmall 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">
<div class="item col--span-2">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums" data-value-type="number">$156</span>
<span class="label">AOV</span>
</div>
</div>
<div class="item col--span-1">
<div class="meta"></div>
<div class="content">
<span class="value value--small value--tnums" data-value-type="number">254</span>
<span class="label">Fulfilled Orders</span>
</div>
</div>
<div class="item col--span-1">
<div class="meta"></div>
<div class="content">
<span class="value value--xsmall 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://code.highcharts.com/12.3.0/highcharts.js"></script>
<script src="https://code.highcharts.com/12.3.0/highcharts-more.js"></script>
<script src="https://code.highcharts.com/12.3.0/modules/pattern-fill.js"></script>
<div id="chart-4fb554ed920f" class="w--full"></div>
<script type="text/javascript"></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 layout--col gap--space-between">
<div class="grid h-full">
<div class="col--span-3 col gap--space-between">
<div class="grid grid--cols-2 gap--[9px]" data-adjust-grid-gaps="false">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value 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 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 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 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 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 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 col gap--space-between">
<div id="chart-1ca7cbbf808f" class="w--full"></div>
<script src="https://code.highcharts.com/12.3.0/highcharts.js"></script>
<script src="https://code.highcharts.com/12.3.0/highcharts-more.js"></script>
<script src="https://code.highcharts.com/12.3.0/modules/pattern-fill.js"></script>
<script type="text/javascript"></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--space-between">
<div class="grid grid grid--cols-2">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value 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 value--tnums" data-value-type="number">$156</span>
<span class="label">AOV</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--small 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 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 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 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-e527e80302cb" class="w--full"></div>
<script src="https://code.highcharts.com/12.3.0/highcharts.js"></script>
<script src="https://code.highcharts.com/12.3.0/highcharts-more.js"></script>
<script src="https://code.highcharts.com/12.3.0/modules/pattern-fill.js"></script>
<script type="text/javascript"></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 gap--[9px]" data-adjust-grid-gaps="false">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums" data-value-type="number">$159,022</span>
<span class="label">Total Sales</span>
</div>
</div>
<div class="item">
<div id="chart-cbd2d87840c4" class="w--full"></div>
<script src="https://code.highcharts.com/12.3.0/highcharts.js"></script>
<script src="https://code.highcharts.com/12.3.0/highcharts-more.js"></script>
<script src="https://code.highcharts.com/12.3.0/modules/pattern-fill.js"></script>
<script type="text/javascript"></script>
</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 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 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 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 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>