Style Guide

Welcome to the style guide. This page will show you all the stylings for the most common features used in the WYSIWYG editor in Shopify. It will have examples of headings, paragraphs, unordered lists, ordered lists, definition lists, buttons, tables, tabs, toggles, accordion, alerts and responsive videos.

Header 01

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

Header 02

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

Header 03

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

Header 04

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

Header 05

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

Header 06

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

Unordered List (ul)

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Example Code:

<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>

Ordered List (ol)

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.

Example Code:

<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>

Definition List (dl)

Definition List Title
This is a definition list.
Definition List Title
This is a definition list.
Definition List Title
This is a definition list.

Example Code:

<dl>
<dt>Definition List Title</dt>
	<dd>This is a definition list.</dd>
<dt>Definition List Title</dt>
	<dd>This is a definition list.</dd>
<dt>Definition List Title</dt>
	<dd>This is a definition list.</dd>
</dl>

Buttons

Basic Button

Example Code:

<a class="button">Basic Button</a>

Tables

Header 1Header 2Header 3
DivisionDivisionDivision
DivisionDivisionDivision
DivisionDivisionDivision

Example Code:

<table>
	<tbody>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
		</tr>
		<tr>
			<td>Division</td>
			<td>Division</td>
			<td>Division</td>
		</tr>
		<tr>
			<td>Division</td>
			<td>Division</td>
			<td>Division</td>
		</tr>
		<tr>
			<td>Division</td>
			<td>Division</td>
			<td>Division</td>
		</tr>
	</tbody>
</table>

Tabs

Tab Content 1

Tab Content 2

Tab Content 3

Example Code:

<div class="tabs">
	<ul class="tab-titles">
		<li><a class="active">Tab One</a></li>
		<li><a>Tab Two</a></li>
		<li><a>Tab Three</a></li>
	</ul>
	<div class="tab-content">
		<div style="display: block;"><p>Tab Content 1</p></div>
		<div style="display: none;"><p>Tab Content 2</p></div>
		<div style="display: none;"><p>Tab Content 3</p></div>
	</div>
</div>

Toggles

Toggle 01

Toggle 02

Example Code:

<div class="toggle-group">
	<div class="toggle">
		<h4>Toggle 01</h4>
		<div class="toggle-content" style="display: none;">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable.</div>
	</div>
	<div class="toggle">
		<h4>Toggle 02</h4>
		<div class="toggle-content" style="display: none;">This toggle content is shown on page load, but the majority have suffered alteration in some form, by injected humour.</div>
	</div>
</div>

Accordion

Accordion 01

Accordion 02

Accordion 03

Example Code:

<div class="toggle-group accordion">
	<div class="toggle">
		<h4>Accordion 01</h4>
		<div class="toggle-content" style="display: none;">
			<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable.</p>
		</div>
	</div>
	<div class="toggle">
		<h4>Accordion 02</h4>
		<div class="toggle-content" style="display: none;">
			<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable.</p>
		</div>
	</div>
	<div class="toggle">
		<h4>Accordion 03</h4>
		<div class="toggle-content" style="display: none;">
			<p>This toggle content is shown on page load, but the majority have suffered alteration in some form, by injected humour.</p>
		</div>
	</div>
</div>

Responsive Video

Example Code:

<div class="videoWrapper">
<iframe src="http://www.youtube.com/embed/RNAxOZGbxXU" width="560" height="315" frameborder="0"></iframe>
</div>

Alerts

error: Write your error message here.
success: Write your success message here.
warning: Write your warning message here.
notice: Write your notice message here.