Product Page Templates

THE BASICS

Wrapping a product

When making a new product, it usually helps to encase the whole thing in a div and add a class to it. This makes it easier to enact page wide changes. Infact, this whole page is wrapped in a single div, allowing me to have custom settings on any part of the code I wish without impacting the other areas of the website.

<div class="product-wrapper">
 <p>all of the content</p>
</div>

Images

Images need to be coded the following way:

<img class="lazyloaded" data-src="link-of-image" src="link-of-image" alt="Description Text for Image">

The class "lazyloaded" help increase page speed. 'data-src' helps Shopify load the image quicker. 'src' is the link of the image and should be the same as 'data-src'. 'alt' is a description of the image that appears if the image fails to load, but more importantly it helps with SEO.

Here is how to upload and get the links for files.

Inserting links is done the following way:

<a href="https://treadmillfactory.ca/">This is text for a link</style>

If you add target="_blank" to the link as shown below, the link will open in a new tab.

<a href="https://treadmillfactory.ca/" target="_blank">This is text for a link</style>

Intro to CSS Styles

Including a <style"> in the product is how you make the html look good. It works like this; Say you want to make the paragraphs have a size of 14px, you would input the code here:

<style>
p {
 font-size: 14px;
}
</style>

This will change every paragraph on the page, including those outside of the product description area, which is bad. That's why we use classes. If you attach a class to an html element, you can call it in the style code. That way you can change the style of a specific area without affecting the rest of the page.

<style>
p.classname {
 color: #f00;
}
</style>

<p class="classname">Paragraph with a class</p>
<p>Paragraph with no class</p>
</div>

Because of something in the stylesheet called BootStrap, occassionally your own css styles will be overwritten by that. To get around it, add !important to any area of your css that is being overwritten.

<style>
p.classname {
 color: #f00!important;
}
</style>

<p class="classname">Paragraph not getting overwritten</p>
</div>

There are a few thousand different ways to style html, but for most of the product pages it's been done just like that.

Shipping Info and Boxify

The Steps

Adding the shipping dims

  1. Add the weight of the item in the shipping area, make sure the weight is in lbs.
  2. Access Boxify in the more actions area
  3. If there is only 1 box, add the dims and have the pack mode be "Pack into box".
  4. If more than 1 box, enable multiple parts then add the dims.

META-GURU STUFF

Making a banner

The Code

Making a banner

Navigate to collections and go into metafields
Search for or create a metafield with the following properties:

  • type: Multi-line text
  • namespace: sf_collection_header
  • key: html_blocks_collection_block_1
    (NOT html_blocks_collection_block_b)
Then insert the following code. This is the code we have for the Exercise Bikes Collection, but you can do whatever code you'd like. Just make sure the banner edges line up with the rest of the page.

<style>
.banner-links {
 display: flex;
 justify-content: space-between;
 margin: 2px;
 max-width: 1670px;
} @media screen and (min-width: 1024px) { .banner-links {
 margin: 0 auto;
}}
.banner-links a {
 margin: 2px;
 position: relative;
 text-align: center;
 width: 100%;
} @media screen and (min-width: 1024px) { .banner-links a {
 font-size: 24px;
 margin: 20px 10px;
 -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
 transition: all 0.3s ease;
}}
.banner-links a:hover {
 transform: scale(.95);
}
.banner-links article {
 overflow: hidden;
 max-height: 0;
}
</style>

<div class="banner-links">
 <a href="/products/assault-airbike">
  <img class="lazyloaded" data-src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/ASSAULT_Airbike-catlink.webp" src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/ASSAULT_Airbike-catlink.webp" alt="Assault Airbike">
  <article>
   <h2>The Original Airbike</h2>
   <h3>Free shipping in Canada</h3>
  </article>
 </a>
 <a href="/products/matrix-u50-xur-upright-bike">
  <img class="lazyloaded" data-src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/MATRIX_XUR_console-catlink.webp" src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/MATRIX_XUR_console-catlink.webp" alt="U50 XUR Upright Bike">
  <article>
   <h2>U50 XUR Upright Bike</h2>
   <h3>The Ultimate in Entertainment</h3>
  </article>
 </a>
</div>

For the footer. the code is mostly the same, except the key is "html_blocks_collection_block_b". Here's an example of the code for that area.

Making a footer

Navigate to collections and go into metafields
Search for or create a metafield with the following properties:

  • type: Multi-line text
  • namespace: sf_collection_header
  • key: html_blocks_collection_block_b

Then insert the following code. This is the code we have for and most other collections that have footers.

<style>
.staffBox {
 max-width: 785px;
 margin: 15px auto;
}
.staffBox figure {
 margin: 0 auto 10px;
 position: relative;
}
.staffBox figure .collectionText {
 position: absolute;
  bottom: 0;
  left: 0;
 background: #fff;
 padding: 30px;
}
.bottom-content-block {
 max-width: 1650px;
 margin: 50px auto;
 padding: 0 15px;
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-gap: 50px;
} @media screen and (max-width: 1024px) { .bottom-content-block {
 grid-template-columns: 1fr;
}}
</style>

<div class="staffBox">
<figure>
 <img src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/upright-bikes.png?v=1638566736" alt="upright bikes">
 <div class="collectionText">
  <img src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/upright_bikes.png?v=1638569271" alt="upright bikes">
 </div>
</figure>
<p>"An Upright bike compared to a spin bike does not allow for you to stand up and pedal on the bike. You sit on a much comfier seat and can casually ride to built in various programs while getting good cardio exercise.</p>
<p>A recumbent bike has back support which allows for people who may require back support like seniors and those recovering from injury to get a good cardio workout without putting strain on the lower back.</p>
<p>The Air bike is one of the most sought-after cardio pieces for those in the CrossFit industry. These types of bikes allow for a great HITT cardio workout which is scientifically proven to provide optimal benefits for fat loss. The air bike is very unique as it allows for both upper body and lower body engagement. The Assault Air bike has been a staple in the CrossFit industry and one of our top sellers for home and commercial use." Message from our team!</p>
</div>
<div>
<div>
 <h2>Upright and Recumbent Bikes</h2>
 <p>Stationary Exercise Bikes usually fall into two general categories: Upright Exercise Bikes and Recumbent Exercise Bikes. Upright Bikes can also include Indoor Cycles, although their increase in popularity has caused Indoor Cycles to be considered it's own class of Exercise Bike. And with changes and innovations in the field of exercise equipment, new hybrids and types of bikes are constantly emerging. One of these newer styles of bikes that are very popular now is the <a href="/products/assault-airbike">Assault AirBike</a>.</p>
</div>
<div>
 <h2>Top Models at The Treadmill Factory</h2>
 <p>Aside from the <a href="/products/assault-airbike-elite">Assault AirBike</a>, we carry a lot of different options, in both Upright and Recumbent styles. We stock only reputable brands that are always on the leading edge of new developments and technologies. Starting from the Vision R10 and U10 bikes, through to the Horizon Elite bikes, and up to the True and Octane bikes, we stand behind our line of Exercise Bikes.</p>
 <p>The Treadmill Factory has a <a href="/collections/cardio">Cardio Machine</a> specifically designed to suit your needs. </p>
</div>

Inserting and editing tabs

The Code

Adding and editing tabs

Navigate to product tabs area
Name the heading (ex: dimensions, specifications, warranty, instructional, etc)
Then insert the following code. Change the values depending on the product:

For Specs, Dims, and Links

<style>
.specs-banner table {
 background: none;
}
.specs-banner table td:first-of-type {
 width: 20%;
}
.specs-banner table td a img {
 margin-left: 6px;
}
</style>

<div class="specs-banner">
 <table>
  <th>SHIPPING DIMENSIONS:</th>
  <tr>
   <td>Length:</td>
   <td>35"</td>
  <</tr>
  <tr>
   <td>Width:</td>
   <td>9"</td>
  </tr>
  <tr>
   <td>Height:</td>
   <td>27"</td>
  </tr>
  <tr>
   <td>Weight:</td>
   <td>75 lbs</td>
  </tr>
  <tr>
   <td>Link to a manual:</td>
   <td><a href="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/GAMES_SYSTEM_SellSheet.pdf" target="_blank">Don't forget the outbound link icon<img src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/external-link.svg"></td>
  </tr>
 </table>
</div>

For Images

<div class="warranty-banner">
 <a href="/pages/ironax-warranty" target="_blank">
  <img class="lazyload" data-src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/ironax-warranty-banner.webp" src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/ironaxWarrantyBanner.webp">
 </a>
</div>

Making a product full width

The Steps

Making a full width product page

  1. type: integer
  2. namespace: sf_full_width
  3. key: enable
  4. value: 1

TEMPLATES

Text with image on the side

Alt Text for Image

Title

This template has a text area with an image on the side. On mobile it should be stacked, only going half and half if the screen size is bigger. The key code here is "display: flex;". That allows the 2 parts of this box to fit beside each other smoother than most other methods. You can also replace this text box with another image to make a gallery.

  • List Item 1
  • List Item 2
  • List Item 3

The Code:

<style>
.half-box-example {
 background: #ccc;
} @media screen and (min-width: 768px) { .half-box-example {
 display: flex;
}}
.half-box-example img {
 width: 100%;
} @media screen and (min-width: 768px) { .half-box-example img {
 width: 45%;
}}
.half-box-example article {
 direction: ltr;
 padding: 1rem;
 width: 100%;
} @media screen and (min-width: 768px) { .half-box-example article {
 width: 55%;
}}
.half-box-example h2 {
 margin: 0 0 .5rem;
}
.half-box-example p {
 margin: 0 0 .5rem;
}
</style>

<div class="half-box-example">
 <img class="lazyloaded" data-src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" alt="Alt Text for Image">
 <article>
  <h2>Title</h2>
  <p>This template has a text area with an image on the side. On mobile it should be stacked, only going half and half if the screen size is bigger. The key code here is "display: flex;". That allows the 2 parts of this box to fit beside each other smoother than most other methods.</p>
  <ul>
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
  </ul>
 </article>
</div>

If you want to make the image swap to the left, add this code to the style sheet:

.half-box-example {
 direction: rtl;
}

If you want to make the image swap to the left on every other section, add this code:

.half-box-example:nth-of-type(even) {
 direction: rtl;
}

Row of products

Description Text for Image

Feature 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Description Text for Image

Feature 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Description Text for Image

Feature 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Description Text for Image

Feature 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

The Code:

<style>
.row-box-example {
 display: flex;
 flex-wrap: wrap;
 padding: 0.5rem;
}
.row-box-example h3, .row-box-example p {
 line-height: 1.2;
}
.row-box-example h3 {
 margin: 0.5rem 0;
}
.row-box-example figure {
 margin: 0;
 padding: 0.5rem;
 width: 50%;
} @media screen and (min-width: 768px) { .row-box-example figure {
 width: 25%;
}}
</style>

<div class="row-box-example">
 <figure>
  <img class="lazyloaded padded-img" data-src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" alt="Description Text for Image">
  <h3>Feature 1</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 </figure>
 <figure>
  <img class="lazyloaded padded-img" data-src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" alt="Description Text for Image">
  <h3>Feature 2</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 </figure>
 <figure>
  <img class="lazyloaded padded-img" data-src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" alt="Description Text for Image">
  <h3>Feature 3</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 </figure>
 <figure>
  <img class="lazyloaded padded-img" data-src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" alt="Description Text for Image">
  <h3>Feature 4</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 </figure>
</div>

You can add or take out as many boxes as you like. This code as is will have 2 sections per row on mobile and 4 sections per row on desktop. This can be changed with the width settings here:

<style>
.row-box-example figure {
 width: 50%;
} @media screen and (min-width: 768px) { .row-box-example figure {
 width: 25%;
}}
</style>

Width in css can be calculated any number of ways, but for making mobile compatible templates it's easier to use the percentage format. The way it's formatted right now, it calculates the mobile settings first but at screen size 768px (small tablet size) it will change settings to the one below it.

If you wanted there to be 3 items per row, you could input the width as 33.33% but it still wouldn't be a perfect fit. To make the fit perfect you would need to input the width as "width: calc(100% / 3);".

Description Text for Image

Feature 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Description Text for Image

Feature 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Description Text for Image

Feature 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

The Code:

<style>
@media screen and (min-width: 768px) { .row-box-example.width-of-3 figure {
 width: calc(100% / 3);
</style>

Inserting videos

The Code:

For embed videos

<iframe src="https://player.vimeo.com/video/684783210?autoplay=1&loop=1&autopause=0&muted=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>

For videos we uploaded

<video poster="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/video-poster.webp?v=1648148203" muted loop autoplay src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/7-8_AT_Treadmill_banner_video.mp4?v=1648146809"></video>

The videos in this code will autoplay and loop once the page is loaded. You can remove "muted loop autoplay" from video or "autoplay=1&loop=1&autopause=0&muted=1" from iframe. In order to allow autoplay, the video must be muted. Here's a video on how to do a video embed from youtube. It works that way for most video sites like vimeo too.

When inserting an iframe video it will automatically get encased in a div with the class of "video-wrapper". That can't really be prevented so you'll just have to work around it.

.video-wrapper {
 position: relative;
 overflow: hidden;
 max-width: 100%;
 padding-bottom: 56.25%;
 height: 0;
 height: auto;
}

This is the code that the "video-wrapper" class has. Because of how it's coded, the height of the video is determined by the "padding-bottom" attribute. It will also extend itself to the full width of the screen. Inserting a video as is works most of the time, but sometimes it ends up looking really bad. If you need to change how the videoo is working, insert the following code and change the settings as you need. This code allows you to manually set the width and height of the video.

<style>
.video-wrapper {
 padding-bottom: 2rem;
}
.video-wrapper iframe, .video-wrapper video {
 height: 315px;
 position: unset;
 width: 560px;
}
</style>

For a different way of changing the settings, you can wrap the video in a div with a class name, then overwrite the style for videos in that specific area. In this example code the video has a max-width, is centered, and the height is determined by the "padding-bottom" attribute.

<style>
.video-section .video-wrapper {
 margin: 0 auto;
 padding-bottom: 570px;
 max-width: 1000px;
}
</style>

<div class="video-section">
 <iframe src="https://player.vimeo.com/video/684783210?autoplay=1&loop=1&autopause=0&muted=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>
</div>

Even when wrapping the video with your own div, it will still be automatically wrapped in a div once you open the product. It doesn't appear in the backend of the product, only the frontend.

Text over an Image

Text over the Image

In this example, the text is placed over top of an image. There are a couple ways to do this but we usually do it by having the html surrounded by a div, surrounding the text in a seperate div, then using "position: absolute;" to have it placed over the image, then positioning it using "top, left, bottom, and right". It's important that the div surrounding everything have a css attribute of "position: relative;" so that the textbox stays inside the div.

The Code:

<style>
.t-over-i figure {
 margin: 0;
 position: relative;
}
.t-over-i figure img {
 width: 100%;
}
.t-over-i figure article {
 color: #fff;
 padding: 2rem;
 position: absolute;
  top: 20%;
}
</style>

<div class="t-over-i">
<figure>
<img src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/horizon-74-banner.webp">
<article>
<h2>Text over the Image</h2>
<p>In this example, the text is placed over top of an image. There are a couple ways to do this but we usually do it by having the html surrounded by a div, surrounding the text in a seperate div, then using "position: absolute;" to have it placed over the image, then positioning it using "top, left, bottom, and right". It's important that the div surrounding everything have a css attribute of "position: relative;" so that the textbox stays inside the div.</p>
</article>
</figure>
</div>