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
usetrmnl.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 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 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 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;" />
Dec 01 -
Dec 31
</span>
<span class="label">Current</span>
</div>
</div>
</div>
</div>
</div>
<div class="divider" />
<div class="grid">
<div class="row">
<div class="grid">
<div class="item col--span-2">
<div class="meta" />
<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 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 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" />
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 src="https://code.highcharts.com/12.3.0/highcharts-more.js" />
<script src="https://code.highcharts.com/12.3.0/modules/pattern-fill.js" />
<div id="chart-85286ab012cb" class="w--full" />
<script type="text/javascript" />
</div>
<div class="title_bar">
<img class="image" alt="" src="https://usetrmnl.com/images/plugins/shopify--render.svg" />
<span class="title">Shopify</span>
<span class="instance">usetrmnl.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
usetrmnl.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 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 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 class="grid grid--cols-2">
<div class="item">
<div class="meta" />
<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 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 class="grid grid grid--cols-2">
<div class="item">
<div class="meta" />
<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" />
Nov 01 -
Nov 30
</span>
</div>
</div>
<div class="item">
<div class="meta" />
<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;" />
Dec 01 -
Dec 31
</span>
</div>
</div>
</div>
</div>
<div class="col--span-3 col gap--space-between">
<div id="chart-805716e90d32" class="w--full" />
<script src="https://code.highcharts.com/12.3.0/highcharts.js" />
<script src="https://code.highcharts.com/12.3.0/highcharts-more.js" />
<script src="https://code.highcharts.com/12.3.0/modules/pattern-fill.js" />
<script type="text/javascript" />
</div>
</div>
</div>
<div class="title_bar">
<img alt="Shopify Plugin Icon" class="image" src="https://usetrmnl.com/images/plugins/shopify--render.svg" />
<span class="title">Shopify</span>
<span class="instance">usetrmnl.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
usetrmnl.com
<div class="layout layout--col gap--space-between">
<div class="grid grid grid--cols-2">
<div class="item">
<div class="meta" />
<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 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 class="grid grid grid--cols-2">
<div class="item">
<div class="meta" />
<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 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 class="grid grid grid--cols-2">
<div class="item">
<div class="meta" />
<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" />
Nov 01 -
Nov 30
</span>
</div>
</div>
<div class="item">
<div class="meta" />
<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;" />
Dec 01 -
Dec 31
</span>
</div>
</div>
</div>
<div id="chart-6270b35d1ff1" class="w--full" />
<script src="https://code.highcharts.com/12.3.0/highcharts.js" />
<script src="https://code.highcharts.com/12.3.0/highcharts-more.js" />
<script src="https://code.highcharts.com/12.3.0/modules/pattern-fill.js" />
<script type="text/javascript" />
</div>
<div class="title_bar">
<img alt="Shopify Plugin Icon" class="image" src="https://usetrmnl.com/images/plugins/shopify--render.svg" />
<span class="title">Shopify</span>
<span class="instance">usetrmnl.com</span>
</div>Quadrant
$159,022
Total Sales
763
Pending Orders
254
Fulfilled Orders
Nov 01 -
Nov 30
Dec 01 -
Dec 31
Shopify
usetrmnl.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 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-b120b917bbe5" class="w--full" />
<script src="https://code.highcharts.com/12.3.0/highcharts.js" />
<script src="https://code.highcharts.com/12.3.0/highcharts-more.js" />
<script src="https://code.highcharts.com/12.3.0/modules/pattern-fill.js" />
<script type="text/javascript" />
</div>
</div>
<div class="divider" />
<div class="grid grid--cols-2">
<div class="item">
<div class="meta" />
<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 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 class="grid grid grid--cols-2">
<div class="item">
<div class="meta" />
<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" />
Nov 01 -
Nov 30
</span>
</div>
</div>
<div class="item">
<div class="meta" />
<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;" />
Dec 01 -
Dec 31
</span>
</div>
</div>
</div>
</div>
<div class="title_bar">
<img class="image" alt="" src="https://usetrmnl.com/images/plugins/shopify--render.svg" />
<span class="title">Shopify</span>
<span class="instance">usetrmnl.com</span>
</div>