Shopify Style Guide

Basic usage

Each one of the tags you see below in italics will need <h1> wrapped around them with an ending tag that looks like this </h1>. No spaces. Here's some more info on using basic tags in HTML for content.

Type & Heading

<h1 class="display-1">YOUR TEXT HERE</h1>

Hero 1 .display-1

<h1>YOUR TEXT HERE</h1>

Heading One

<h2>YOUR TEXT HERE</h2>

Heading Two

<h3>YOUR TEXT HERE</h3>

Heading Three

<h4>YOUR TEXT HERE</h4>

Heading Four

<h5>YOUR TEXT HERE</h5>

Heading Five

<h6>YOUR TEXT HERE</h6>

Heading Six

<p>YOUR TEXT HERE</p>

Regular ol' ass body ass looks like this. Pretty neat, huh? Body copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac sollicitudin massa. Nulla imperdiet commodo augue tincidunt elementum. Integer nibh est, varius in ullamcorper ac, volutpat ut orci. Nunc congue mattis velit, sed consequat eros sagittis a.

<p class="lead">YOUR TEXT HERE</p>

Big body lead copy and a Big body text link looks like this.

Content Buttons

primary-btn

<a href="URL HERE" class="primary-btn" target="_self">BUTTON LABEL HERE</a>

Primary Button

alt-btn

<a href="URL HERE" class="alt-btn" target="_self">BUTTON LABEL HERE</a>

Secondary Button

Heading & Copy

Heading One

Carrot cake pudding chupa chups dragée gummies cheesecake. Toffee tootsie roll chocolate cake. Candy canes ice cream donut croissant chocolate cake halvah liquorice. Chocolate cake bonbon chupa chups liquorice gummies. Jelly beans liquorice pudding cake caramels chupa chups tart marzipan.

Primary Button

Image Sizes

Product Page: 2048x2048px or 1440x1440px (1:1)

Collection: 1440x810px (16:9)

Homepage Static Full-width Hero Images: 2000x450, 550, 650, 750, 750+px

Canvas Parallax Images: 2100x1440px or 2100x1000px

*You may need to play around with the height to get the desired look.

Other Content Images:

1440x810px (16:9)

1440x960px (2:3)

1440x1440px (1:1)

Two Column Content (mobile it stacks to one column)