# 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,022Total Sales

763Pending Orders

Dec 01 -
 Dec 31 Current

$156AOV

254Fulfilled Orders

Nov 01 -
 Nov 30 Comparison

Shopifytrmnl.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-ab9af54c64d9" class="w--full grow"></div>
      <script type="text/javascript"></script>
    </div>
    <div class="title_bar">
      <img class="image" alt="" src="http://localhost:3000/images/plugins/shopify--render.svg">
      <span class="title">Shopify</span>
      <span class="instance">trmnl.com</span>
    </div>

#### Half Horizontal



$159,022Total Sales

$156AOV

763Pending Orders

254Fulfilled Orders

Nov 01 -
 Nov 30

Dec 01 -
 Dec 31

Shopifytrmnl.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-d36028b36c28" 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"></script>
        </div>
      </div>
    </div>
    <div class="title_bar">
      <img alt="Shopify Plugin Icon" class="image" src="http://localhost:3000/images/plugins/shopify--render.svg">
      <span class="title">Shopify</span>
      <span class="instance">trmnl.com</span>
    </div>

#### Half Vertical



$159,022Total Sales

$156AOV

763Pending Orders

254Fulfilled Orders

Nov 01 -
 Nov 30

Dec 01 -
 Dec 31

Shopifytrmnl.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-08d254ce50b1" 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"></script>
    </div>
    <div class="title_bar">
      <img alt="Shopify Plugin Icon" class="image" src="http://localhost:3000/images/plugins/shopify--render.svg">
      <span class="title">Shopify</span>
      <span class="instance">trmnl.com</span>
    </div>

#### Quadrant



$159,022Total Sales

763Pending Orders

254Fulfilled Orders

Nov 01 -
 Nov 30

Dec 01 -
 Dec 31

Shopifytrmnl.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-81ecd3fee4f0" 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"></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="http://localhost:3000/images/plugins/shopify--render.svg">
      <span class="title">Shopify</span>
      <span class="instance">trmnl.com</span>
    </div>

Previous

[GitHub Commit GraphGitHub Commit GraphGitHub Commit Graph A visual representation of GitHub commit activity across different view sizes](/framework/examples/github_commit_graph)

Next

[Days Left This YearDays Left This YearDays Left This Year Countdown display showing remaining days in the year across different layout sizes](/framework/examples/days_left_year)