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>alt-btn
<a href="URL HERE" class="alt-btn" target="_self">BUTTON LABEL HERE</a>
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.
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)
one-half-column-left
Other text would go here.
one-half-column-last
Other text would go here.
Three Column Content (mobile it stacks to one column)
one-third-column-left
Other text would go here.
one-third-column-middle
Other text would go here.
one-third-column-last
Other text would go here.
Adding Press content to "press" Page (using "one-half-column-leftand "one-half-column-last classes)
