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 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>
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.
Adding the shipping dims
Making a banner
Navigate to collections and go into metafields
Search for or create a metafield with the following properties:
<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:
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>
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 full width product page
| Specifications | |
|---|---|
| Diameter | 51" |
| Height | 3 adjustable height options |
| Assembled Weight | 22 lbs |
| Max User Weight | 300 lbs |
This is the basic template that can be placed on any product that doesn't have a fancy custom design. A professionally basic design that should be easy enough to copypaste into any product, for the sake of design consistency on our products. If this paragraph is long enough, you should be able to see that the specs box on the side scrolls with this content, not before or after it.
Ramp up your row workouts with the Body-Solid SPRTB Dual T-Bar Row Platform. Built to work with olympic bars, the SPRTB is an ideal option building muscles and strength in the middle back, rear delts and traps. Superior to dumbbell rows, T-Bar Rows offer the ability to work both arms at the same time for increased weight capacity and effort.
When we just want a basic layout that looks nice. This one has a specs tab that shows on the bottom when the page is viewed on mobile but on the right when viewed on bigger screens. It even scrolls with the content so that the box will always be visible while reading the product description.
<style>
.bc-product {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap;
margin: 1rem 0;
} @media screen and (min-width: 1024px) { .bc-product {
display: block;
}}
.bc-product h2, .bc-product h3 {
font-weight: 800;
text-transform: uppercase;
}
.bc-product h2 {
font-size: 30px;
margin-bottom: 1rem;
}
.bc-product h3 {
font-size: 20px;
margin: 1rem 0 0;
}
.bc-product p {
margin-bottom: 1rem;
}
.bc-product ul.bc-dims {
list-style: none;
margin: 0;
}
.bc-product .desc {
margin: 0 0 2rem;
} @media screen and (min-width: 1024px) { .bc-product .desc {
width: 65%;
max-width: 1200px;
}}
@media screen and (min-width: 1024px) { .bc-product .table-wrapper {
float: right;
position: sticky;
top: 150px;
width: 30%;
max-width: 500px;
}}
.bc-product table {
background: none;
}
.bc-product table tr {
border-bottom: #ccc solid 1px;
display: flex;
}
.bc-product table tr:last-of-type {
border-bottom: none;
}
.bc-product table th {
text-transform: uppercase;
width: 100%;
}
.bc-product table td {
width: 70%;
}
.bc-product table td:first-of-type {
font-weight: 600;
width: 30%;
}
.bc-product table td ul {
margin: 0;
}
</style>
<div class="bc-product">
<table>
<tr>
<th>Specifications</th>
</tr>
<tr>
<td>Diameter</td>
<td>51"</td>
</tr>
<tr>
<td>Height</td>
<td>3 adjustable height options</td>
</tr>
<tr>
<td>Assembled Weight</td>
<td>22 lbs</td>
</tr>
<tr>
<td>Max User Weight</td>
<td>300 lbs</td>
</tr>
</table>
<div class="desc">
<h2>Product Title</h2>
<p>This is the basic template that can be placed on any product that doesn't have a fancy custom design. A professionally basic design that should be easy enough to copypaste into any product, for the sake of design consistency on our products. If this paragraph is long enough, you should be able to see that the specs box on the side scrolls with this content, not before or after it.</p>
<p>Ramp up your row workouts with the Body-Solid SPRTB Dual T-Bar Row Platform. Built to work with olympic bars, the SPRTB is an ideal option building muscles and strength in the middle back, rear delts and traps. Superior to dumbbell rows, T-Bar Rows offer the ability to work both arms at the same time for increased weight capacity and effort.</p>
<h3>Smaller Header</h3>
<ul>
<li>Participate in virtual boutique studio classes</li>
<li>Personally-tailored workouts based on your fitness level and interest are sent to your equipment every day</li>
<li>Redeem your 30-day iFit Coach Trial* to activate your product and gain access to world-class personal training in your home</li>
</ul>
</div>
</div>
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.
<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;
}
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<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);".
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<style>
@media screen and (min-width: 768px) { .row-box-example.width-of-3 figure {
width: calc(100% / 3);
</style>
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.
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.
<style>
.t-over-i figure {
align-items: center;
display: flex;
justify-content: center;
margin: 0;
position: relative;
z-index: 1;
}
.t-over-i figure img {
height: 100%;
object-fit: cover;
position: absolute;
width: 100%;
z-index: -1;
}
.t-over-i figure article {
color: #fff;
padding: 2rem;
}
</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>
