Shopify template to visualize your site’s layout and styles with dummy content that is common across themes. This is a copy of the template that used to be available form Shopify's start theme template.

page.styles.liquid

{% comment %}
Custom template for testing styles applied to RTE content.
Remove before deploying to production/publishing your theme.
{% endcomment %}

<style>
  /* Styleguide styles */
  .docs-title {
    opacity: 0.5;
    font-style: italic;
    margin-left: -20px;
  }
</style>

<div class="section">
  <div class="page-width">
    <div class="page-content">

      <h1>{{ page.title }}</h1>

      <p>This page is here to show off styles for standard page elements such as typography, form elements, and icons.
        These are hard coded in an alternate page template file, named <code>page.styles.liquid</code>.</p>

      <hr>

      <h2 class="docs-title">Typography</h2>

      <h1>Heading one</h1>
      <h2>Heading two</h2>
      <h3>Heading three</h3>
      <h4>Heading four</h4>
      <h5>Heading five</h5>
      <h6>Heading six</h6>

      <h4 class="docs-title">RTE headings</h4>
      <div class="rte">
        <h1>RTE heading one</h1>
        <h2>RTE heading two</h2>
        <h3>RTE heading three</h3>
        <h4>RTE heading four</h4>
        <h5>RTE heading five</h5>
        <h6>RTE heading six</h6>
      </div>

      <h4 class="docs-title">Paragraphs</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
      <p>Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
        vulputate velit esse molestie consequat.</p>

      <h4 class="docs-title">Type styles</h4>
      <ul>
        <li><strong>Strong</strong></li>
        <li><em>Emphasis</em></li>
        <li><a href="#">Inline link</a></li>
        <li><span style="text-decoration: line-through;">Strike</span></li>
        <li><sup>Sup</sup></li>
      </ul>

      <h4 class="docs-title">Blockquotes</h4>
      <blockquote>
        <p>Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
          zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
          congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
        <cite>The author of the quote</cite>
      </blockquote>

      <h4 class="docs-title">Lists</h4>
      <table>
        <tbody>
          <tr>
            <td width="40%">
              <h6><code>ul</code> (default)</h6>
            </td>
            <td>
              <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td>
              <h6>Numeric bullet <code>ol</code> (default)</h6>
            </td>
            <td>
              <ol>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
              </ol>
            </td>
          </tr>
          <tr>
            <td>
              <h6>Child lists (to match the RTE styles)</h6>
            </td>
            <td>
              <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three, with child list
                  <ul>
                    <li>First sub item</li>
                    <li>Second sub item</li>
                    <li>Third sub item, with child list
                      <ul>
                        <li>Third level item</li>
                        <li>Another third level item</li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>Four</li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>

      <hr>

      <h2 class="docs-title">Responsive tables</h2>

      <table class="responsive-table">
        <thead>
          <tr>
            <th>Order</th>
            <th>Date</th>
            <th>Payment Status</th>
            <th>Fulfillment Status</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr class="responsive-table-row">
            <td data-label="Order">#1001</td>
            <td data-label="Date">December 22, 2015</td>
            <td data-label="Payment Status">Authorized</td>
            <td data-label="Fulfillment Status">Unfulfilled</td>
            <td data-label="Total">$43.03</td>
          </tr>
          <tr class="responsive-table-row">
            <td data-label="Order">#1002</td>
            <td data-label="Date">December 23, 2015</td>
            <td data-label="Payment Status">Authorized</td>
            <td data-label="Fulfillment Status">Unfulfilled</td>
            <td data-label="Total">$44.03</td>
          </tr>
          <tr class="responsive-table-row">
            <td data-label="Order">#1003</td>
            <td data-label="Date">December 24, 2015</td>
            <td data-label="Payment Status">Authorized</td>
            <td data-label="Fulfillment Status">Unfulfilled</td>
            <td data-label="Total">$45.03</td>
          </tr>
          <tr class="responsive-table-row">
            <td data-label="Order">#1004</td>
            <td data-label="Date">December 25, 2015</td>
            <td data-label="Payment Status">Authorized</td>
            <td data-label="Fulfillment Status">Unfulfilled</td>
            <td data-label="Total">$46.03</td>
          </tr>
          <tr class="responsive-table-row">
            <td data-label="Order">#1005</td>
            <td data-label="Date">December 26, 2015</td>
            <td data-label="Payment Status">Authorized</td>
            <td data-label="Fulfillment Status">Unfulfilled</td>
            <td data-label="Total">$47.03</td>
          </tr>
          <tr class="responsive-table-row">
            <td data-label="Order">#1006</td>
            <td data-label="Date">December 27, 2015</td>
            <td data-label="Payment Status">Authorized</td>
            <td data-label="Fulfillment Status">Unfulfilled</td>
            <td data-label="Total">$48.03</td>
          </tr>
        </tbody>
      </table>

      <hr>

      <h2 class="docs-title">Forms</h2>

      <h4 class="docs-title">Default form elements</h4>

      <form>
        <label for="textHorizontal1">Horizontal Label</label>
        <input type="text" id="textHorizontal1" placeholder="Input 1">
        <label for="textHorizontal2">Horizontal Label 2</label>
        <input type="text" id="textHorizontal2" placeholder="Input 2">

        <select id="selectHorizontal1">
          <option value="0">-- Choose --</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>

        <input type="checkbox" id="checkInline">
        <label for="checkInline" class="inline">Checkbox Label</label>
      </form>

      <h4 class="docs-title">Invisible labels</h4>

      <p>Add a class of <code>label-hidden</code> to a label to visually hide it, while keeping it accessible to screen
        readers. Use the <code>placeholder</code> attribute as your visible label.</p>
      <p><small><strong>Note:</strong> The <code>placeholder</code> attribute only works in IE10+, so invisible labels
          are disabled in IE9 and below.</small></p>

      <label for="testInvisibleLabel1" class="label-hidden">First Name</label>
      <input type="text" id="testInvisibleLabel1" name="testInvisibleLabel1" placeholder="First Name">
      <label for="testInvisibleLabel2" class="label-hidden">Last Name</label>
      <input type="text" id="testInvisibleLabel2" name="testInvisibleLabel2" placeholder="Last Name">
      <label for="testInvisibleLabel3" class="label-hidden">Email</label>
      <input type="text" id="testInvisibleLabel3" name="testInvisibleLabel3" placeholder="Email">

      <hr>

      <h4 class="docs-title">Vertical forms (customer, contact, etc)</h4>
      <p>No styles for this exist in Slate, but are used in most themes. Style elements inside a form/div with class
        `form-vertical` to see your styles here.</p>
      <p>You cannot add a class directly to most liquid form elements (e.g.
        <code>{% raw %}{% form 'contact' %}{% endraw %}</code>). Instead, wrap the form in a div with the class
        <code>.form-vertical</code> to achieve the same effect.</p>

      <form class="form-vertical">
        <label for="text1">Text Field</label>
        <input type="text" id="text1">

        <label for="text2">Placeholder</label>
        <input type="text" id="text2" placeholder="Placeholder text">

        <label for="text3">Disabled Field</label>
        <input type="text" id="text3" disabled="disabled">

        <label for="text4">Label</label>
        <input type="text" id="text4">

        <label for="text5" class="error">Text Field (Error)</label>
        <input type="text" id="text5" class="error" value="Invalid Entry">

        <label for="select1">Select Field</label>
        <select id="select1">
          <option value="0">-- Choose --</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>

        <fieldset>
          <legend>Checkboxes</legend>
          <input type="checkbox" id="check1">
          <label for="check1" class="inline">Checkbox Field</label><br>
          <input type="checkbox" id="check2">
          <label for="check2" class="inline">Checkbox Field</label><br>
          <input type="checkbox" id="check3">
          <label for="check3" class="inline">Checkbox Field</label>
        </fieldset>
        <fieldset>
          <legend>Radios</legend>
          <input type="radio" name="radio" id="radio1">
          <label for="radio1" class="inline">Option1</label><br>
          <input type="radio" name="radio" id="radio2"> <label for="radio2" class="inline">Option1</label><br>
          <input type="radio" name="radio" id="radio3">
          <label for="radio3" class="inline">Option1</label>
        </fieldset>

        <label for="textarea1">Textarea</label>
        <textarea id="textarea1" placeholder="Placeholder text"></textarea>

        <label for="file1">File Field</label>
        <input id="file1" type="file">
      </form>

      <h4 class="docs-title">Notes and form errors</h4>
      <p>No note styles exist in Slate but are commonly added to handle form errors. Example styles:</p>
      <pre>
    .note {
      padding: 20px;
      border: 1px solid #ccc;
    }

    .note--success {
      border-color: green;
      background-color: lightgreen;
    }

    .note--error {
      border-color: red;
      background-color: lightred;
    }
  </pre>

      <p>Example usage:</p>
      <pre>
    {% raw %}{% if form.posted_successfully? %}{% endraw %}
      &lt;p class="note note--success"&gt;Thanks for submitting the form&lt;/p&gt;
    {% raw %}{% endif %}{% endraw %}

    {% raw %}{% if form.errors %}{% endraw %}
      &lt;div class="note note--error"&gt;
        {% raw %}{{ form.errors | default_errors }}{% endraw %}
      &lt;/div&gt;
    {% raw %}{% endif %}{% endraw %}
  </pre>

      <div class="note">This is a standard note</div>
      <div class="note note--success">This is a success message</div>
      <div class="note note--error">
        <p>This is an error message.</p>
        <ul>
          <li>Bullets can offer more insight to the error</li>
        </ul>
      </div>

      <hr>

      <h2 class="docs-title">Buttons</h2>

      <p>
        <a href="#" class="btn">Default button</a>
      </p>

      <p>
        <a href="#" class="btn btn--secondary">Default button (no defaults)</a>
      </p>

      <p>
        <a href="#" class="btn" disabled>Button disabled</a>
      </p>

      <p>
        <a href="#" class="btn btn--full">Wide button (no defaults)</a>
      </p>

      <hr>

      <h2 class="docs-title">Miscellaneous elements</h2>

      <h4 class="docs-title">Horizontal Rules</h4>
      <p>There are no default <code>hr</code> styles in Slate, but these are common ones to add.</p>
      <p>Default <code>hr</code></p>
      <hr>

      <p>Invisible <code>hr.hr--clear</code></p>
      <hr class="hr--clear">

      <p>Small <code>hr.hr--small</code></p>
      <hr class="hr--small">

      <hr>

      <h2 class="docs-title">SVG icons</h2>
      <p>Read more about using, creating, and editing SVG icons in Slate's documentation.</p>

      <h4 class="docs-title">Payment icons</h4>
      <ul class="payment-icons">
        <li>{% include 'icon-amazon_payments' %}</li>
        <li>{% include 'icon-american_express' %}</li>
        <li>{% include 'icon-bitcoin' %}</li>
        <li>{% include 'icon-cirrus' %}</li>
        <li>{% include 'icon-dankort' %}</li>
        <li>{% include 'icon-diners_club' %}</li>
        <li>{% include 'icon-discover' %}</li>
        <li>{% include 'icon-dogecoin' %}</li>
        <li>{% include 'icon-dwolla' %}</li>
        <li>{% include 'icon-forbrugsforeningen' %}</li>
        <li>{% include 'icon-interac' %}</li>
        <li>{% include 'icon-jcb' %}</li>
        <li>{% include 'icon-litecoin' %}</li>
        <li>{% include 'icon-maestro' %}</li>
        <li>{% include 'icon-master' %}</li>
        <li>{% include 'icon-paypal' %}</li>
        <li>{% include 'icon-visa' %}</li>
      </ul>

      <h4 class="docs-title">Social icons</h4>
      <ul>
        <li>{% include 'icon-facebook' %}</li>
        <li>{% include 'icon-instagram' %}</li>
        <li>{% include 'icon-pinterest' %}</li>
        <li>{% include 'icon-snapchat' %}</li>
        <li>{% include 'icon-tumblr' %}</li>
        <li>{% include 'icon-twitter' %}</li>
        <li>{% include 'icon-vimeo' %}</li>
        <li>{% include 'icon-youtube' %}</li>
      </ul>

      <h4 class="docs-title">General icons</h4>
      <ul>
        <li>{% include 'icon-arrow-down' %}</li>
        <li>{% include 'icon-cart' %}</li>
        <li>{% include 'icon-close' %}</li>
        <li>{% include 'icon-hamburger' %}</li>
        <li>{% include 'icon-minus' %}</li>
        <li>{% include 'icon-plus' %}</li>
        <li>{% include 'icon-rss' %}</li>
        <li>{% include 'icon-search' %}</li>
      </ul>

    </div>
  </div>
</div>