Homepage Templates / Code



Lazy load images

Base code 


<div>
  <img class="lazy" alt="alt text goes here" src="https://cdn.shopify.com/s/files/1/2660/5202/t/376/assets/lazyPixel.png" loading="lazy" 
  data-src="image url">
</div>

For most situations you'll only need the data-sml (mobile) and data-med (desktop/tablet).

Image sources for different sizes
data-sml mobile
data-med tablet (min 769px)
data-lrg desktop (min 992px)
data-src fallback

Example

Overstock Sale Vente de surstock 


<div>
  <img class="langEN lazy" alt="Overstock Sale" src="https://cdn.shopify.com/s/files/1/2660/5202/t/376/assets/lazyPixel.png" loading="lazy" 
  data-sml="https://cdn.shopify.com/s/files/1/2660/5202/files/Overstock_Sale_Banner_EN_Mobile_-_Final_V2.png?v=1667854573" 
  data-med="https://cdn.shopify.com/s/files/1/2660/5202/files/Overstock_Sale_Banner_EN_Desktop_-_Final.png?v=1667854574">
  
  <img class="langFR lazy" alt="Vente de surstock" src="https://cdn.shopify.com/s/files/1/2660/5202/t/376/assets/lazyPixel.png" loading="lazy" 
  data-sml="https://cdn.shopify.com/s/files/1/2660/5202/files/Overstock_Sale_Banner_FR_Mobile_-_Final_V2.png?v=1667842379" 
  data-med="https://cdn.shopify.com/s/files/1/2660/5202/files/Overstock_Sale_Banner_FR_Desktop_-_Final.png?v=1667839810">
</div>



Hero banner

Full width

alt text goes here
Flyer Icon Shop the Flyer Magasinez Notre Dépliant
Deals Icon See All Deals Voir toutes les aubaines

Default Hero (Single Image)
Desktop: 1140 x 350
Mobile: 800 x 1000 


<div class="hero-container">
<div class="container" style="display:none;"></div>
<div class="container">
  <div class="hero-wrapper">
    <div class="hero-grid hero-full">
      <a href="/">
        <div class="imgwrapper">
          <img class="lazy" alt="alt text goes here"
          src="https://cdn.shopify.com/s/files/1/2660/5202/t/376/assets/lazyPixel.png" loading="lazy"
          data-sml="https://cdn.shopify.com/s/files/1/2660/5202/files/Homedoc_hero_mobile.png?v=1667938730"
          data-med="https://cdn.shopify.com/s/files/1/2660/5202/files/Homedoc_hero_desktopfull.png?v=1667938731">
        </div>
      </a>
    </div>
    <div id="hero-button" class="homepage-cta">
      <a href="/">
        <span class="langEN">Shop Now</span>
        <span class="langFR">Magasinez</span>
      </a>
    </div>
  </div>
  <div class="hero-cta-wrapper">
    <div class="hero-cta-button">
      <a href="/"
        title="Flyer Page" aria-label="shop the flyer">
        <img class="CTA-icons"
          src="https://cdn.shopify.com/s/files/1/2660/5202/files/BrickFlyer_7fa29bd6-698a-4502-91a3-a7ecdc8befc1.svg?v=1663968478"
          alt="Flyer Icon">
        <span class="langEN">Shop the Flyer</span>
        <span class="langFR">Magasinez Notre Dépliant</span>
      </a>
    </div>
    <div class="hero-cta-button">
      <a href="/pages/deals?utm_source=homepage&utm_medium=hero&utm_campaign=blackfriday-earlyaccess"
        title="Deals Page" aria-label="shop deals">
        <img class="CTA-icons"
          src="https://cdn.shopify.com/s/files/1/2660/5202/files/saveIcon.svg?v=1663968478"
          alt="Deals Icon">
        <span class="langEN">See All Deals</span>
        <span class="langFR">Voir toutes les aubaines</span>  
      </a>
    </div>
  </div>
  <style>
    .hero-container {
      background-color: #ccc;
    }
  </style>
</div>
</div>



Two halves / split

alt text goes here
Alt text goes here
Flyer Icon Shop the Flyer Magasinez Notre Dépliant
Deals Icon See All Deals Voir toutes les aubaines

Stacked Hero
The hero is split into 2 images at 570px wide and 350px tall. They will stack on mobile, so mobile images are not required. 


<div class="hero-container">
<div class="container" style="display:none;"></div>
<div class="container">
  <div class="hero-wrapper">
    <div class="hero-grid hero-half">
      <a href="pages/deals?utm_source=homepage&utm_medium=hero&utm_campaign=blackfriday-earlyaccess">
        <div class="imgwrapper">
          <img class="lazy" alt="alt text goes here"
          src="https://cdn.shopify.com/s/files/1/2660/5202/t/376/assets/lazyPixel.png" loading="lazy" 
          data-src="https://cdn.shopify.com/s/files/1/2660/5202/files/Homedoc_hero_desktophalf.png?v=1667938731">
        </div>
      </a>
    </div>
    <div class="hero-grid hero-half">
      <a href="/collections/electronics-promo-select-tv-sale-1?utm_source=homepage&utm_medium=hero&utm_campaign=blackfriday-earlyaccess">
        <div class="imgwrapper">
          <img class="lazy" alt="Alt text goes here"
          src="https://cdn.shopify.com/s/files/1/2660/5202/t/376/assets/lazyPixel.png" loading="lazy"
          data-src="https://cdn.shopify.com/s/files/1/2660/5202/files/Homedoc_hero_desktophalf.png?v=1667938731">
        </div>      
      </a>
    </div>
    <div id="hero-button" class="homepage-cta">
      <a href="/">
        <span class="langEN">Shop Now</span>
        <span class="langFR">Magasinez</span>
      </a>
    </div>
    </div>
    <div class="hero-cta-wrapper">
    <div class="hero-cta-button">
      <a href="/"
        title="Flyer Page" aria-label="shop the flyer">
        <img class="CTA-icons"
          src="https://cdn.shopify.com/s/files/1/2660/5202/files/BrickFlyer_7fa29bd6-698a-4502-91a3-a7ecdc8befc1.svg?v=1663968478"
          alt="Flyer Icon">
        <span class="langEN">Shop the Flyer</span>
        <span class="langFR">Magasinez Notre Dépliant</span>
      </a>
    </div>
    <div class="hero-cta-button">
      <a href="/pages/deals?utm_source=homepage&utm_medium=hero&utm_campaign=blackfriday-earlyaccess"
        title="Deals Page" aria-label="shop deals">
        <img class="CTA-icons"
          src="https://cdn.shopify.com/s/files/1/2660/5202/files/saveIcon.svg?v=1663968478"
          alt="Deals Icon">
        <span class="langEN">See All Deals</span>
        <span class="langFR">Voir toutes les aubaines</span>  
      </a>
    </div>
    </div>
  <style>
    .hero-container {
      background-color: #ccc;
    }
  </style>
</div>
</div>


alt text goes here
Alt text goes here
Flyer Icon Shop the Flyer Magasinez Notre Dépliant
Deals Icon See All Deals Voir toutes les aubaines

Mobile specific images
Works with lazyload sizes so if there is a desire for the image to change on mobile, you can use data-sml and data-med for mobile and tablet/desktop versions. 


<div class="imgwrapper">
  <img class="lazy" alt="Alt text goes here"
  src="https://cdn.shopify.com/s/files/1/2660/5202/t/376/assets/lazyPixel.png" loading="lazy" 
  data-sml="https://cdn.shopify.com/s/files/1/2660/5202/files/Homedoc_hero_mobilehalf.png?v=1667940264"
  data-med="https://cdn.shopify.com/s/files/1/2660/5202/files/Homedoc_hero_desktophalf.png?v=1667938731">



Banners

Examples

alt tag goes here


alt tag goes here


alt tag goes here 


<div ratio-desktop="small" ratio-mobile="small"> 
  <img class="lazy" alt="alt tag goes here" src="https://cdn.shopify.com/s/files/1/2660/5202/t/376/assets/lazyPixel.png" loading="lazy" 
  data-sml="https://cdn.shopify.com/s/files/1/2660/5202/files/Homedoc_banner_mobileS.png?v=1667938730" 
  data-med="https://cdn.shopify.com/s/files/1/2660/5202/files/Homedoc_banner_desktopS.png?v=1667938730"> 
</div>

The attributes of ratio-desktop and ratio-mobile are added to the div that wraps around the image. They are interchangable so you could have a desktop size of medium and a mobile size of xsmall.

Desktop ratios
ratio-desktop="small" 1140 x 150
ratio-desktop="medium" 1140 x 250
ratio-desktop="large" 1140 x 300

Mobile ratios
ratio-mobile="xsmall" 800 x 250
ratio-mobile="small" 800 x 400
ratio-mobile="medium" 800 x 600
ratio-mobile="large" 800 x 800




Mattress Banner with collection 


<div id="mattress-callout" class="homepage-banner" role="banner"> 
  <div id="Mattress_Promo" class="image-container"> 
    <div id="mattress-banner-CTA" class="homepage-cta"> 
      <a href="/collections/mattresses-mattresses-and-more-all-mattress"> 
        <span class="langEN"> Shop Now</span> 
        <span class="langFR"> Magasiner</span> 
      </a> 
    </div> 
    <div ratio-desktop="small" ratio-mobile="xsmall"> 
      <img class="lazy" alt="alt tag goes here" src="https://cdn.shopify.com/s/files/1/2660/5202/t/376/assets/lazyPixel.png" loading="lazy" 
      data-sml="https://cdn.shopify.com/s/files/1/2660/5202/files/Homedoc_banner_mobileXS.png?v=1667938731" 
      data-med="https://cdn.shopify.com/s/files/1/2660/5202/files/Homedoc_banner_desktopS.png?v=1667938730"> 
    </div> 
  </div> 
  <div id="insertcollection_home-mattresscallout" class="cards salebadge mattress savestory"> </div> 
  <script type="text/template" class="insertcollection"> {
    "home-mattresscallout": [["HURONMQM", "BLMFLDQP", "BBHTL1QP", "ICPRMEQP"], "home-page-november-01-2022-featured-products-date-november-01-2022-november-17-2022"]
  }</script> 
</div>



Banner utility classes

Buttons - Colours

Shop Now Magasinez
Shop Now Magasinez
Shop Now Magasinez
Shop Now Magasinez
Default (#2f363c)
<div class="homepage-cta"></div>
Black (#000)
<div class="homepage-cta black"></div>
Red (#e81f23)
<div class="homepage-cta red"></div>
White (#fff)
<div class="homepage-cta white"></div>


Buttons - Inverted hover

Shop Now Magasinez
Shop Now Magasinez
Shop Now Magasinez
<div class="homepage-cta black invert"></div>
<div class="homepage-cta red invert"></div>
<div class="homepage-cta white invert"></div>



Shop by category

Template


Shop by category section includes the script for featured products at the top.

When selecting the "featured image" make sure to count starting at 0. This number system aligns with how liquid calls the images for example product.images[0] is the first image. 


<script type="text/template" class="insertcollection">{
"home-featuredproducts": [["BRIEBLSF::img7 pos3 row2 col2", "MOJACQBD", "DENACCTL", "15LBGRTB", "GALVECTB", "65UN9000", "GLR16FSS", "JOYLFEQM"], "home-page-november-01-2022-featured-products-date-november-01-2022-november-17-2022"]
}</script>

<div class="container-background">
<div class="container"><div id="shopbycat-container">

  <div data-shopbycat="UPHOLSTERY" class="shopbycat-card">
    <a href="/collections/furniture-living-room-collections-promo-p">
      <div class="shopbycat-offer">
        <div class="langEN">
          <h2>up to <span class="red">25% off<sup>+</sup></span></h2>
          <p>on select Sofas, Loveseats and Living Room Chairs</p>        
        </div>
        <div class="langFR">
          <h2>JUSQU'À <span class="red">25 % DE RABAIS<sup>+</sup></span></h2>
          <p>sur les sofas, causeuses, fauteuils assortis et sofas sectionnels</p>        
        </div>
      </div>
      <div class="shopbycat-img">
        <img loading="lazy" src="https://cdn.shopify.com/s/files/1/2660/5202/products/adorgysf_des_800x.jpg?v=1626794778" alt="upholstery ADORGYSF">
        <div class="homepage-cta red"><span>
          <span class="langEN">Shop Upholstery</span>
          <span class="langFR">Magasiner les meubles rembourrés</span>
        </div></span>
      </div>      
    </a>
  </div>
  
  <div data-shopbycat="MATRESSES" class="shopbycat-card">
    <a href="/collections/mattresses-mattress-sets">
      <div class="shopbycat-offer">
        <div class="langEN">
          <h2>up to <span class="red">50% off<sup>+</sup></span></h2>
          <p>Select Mattress Sets</p>        
        </div>
        <div class="langFR">
          <h2>JUSQU'À <span class="red">50 % DE RABAIS<sup>+</sup></span></h2>
          <p>sur les ensembles matelas sélectionnés</p>        
        </div>
      </div>
      <div class="shopbycat-img">
        <img loading="lazy" src="https://cdn.shopify.com/s/files/1/2660/5202/products/shopify-image_929edb42-990a-4904-bc1e-53c3e8385423_800x.jpg?v=1658441736" alt="mattress ENCHMTQM">
        <div class="homepage-cta red"><span>
          <span class="langEN">Shop Mattresses</span>
          <span class="langFR">Magasiner les matelas</span>
        </div></span>
      </div>      
    </a>
  </div>
  
  <div data-shopbycat="DINING" class="shopbycat-card">
    <a href="/collections/furniture-dining-room-promo-p">
      <div class="shopbycat-offer">
        <div class="langEN">
          <h2>up to <span class="red">20% off<sup>+</sup></span></h2>
          <p>Dining Furniture</p>        
        </div>
        <div class="langFR">
          <h2>JUSQU'À <span class="red">20 % DE RABAIS<sup>+</sup></span></h2>
          <p>sur les meubles de salle à manger</p>        
        </div>
      </div>
      <div class="shopbycat-img">
        <img loading="lazy" src="https://cdn.shopify.com/s/files/1/2660/5202/products/tatemdtl_l_22869a84-600f-4981-8f04-38d2845f1d35_800x.jpg?v=1661294978" alt="dining TATEMDP7">
        <div class="homepage-cta red"><span>
          <span class="langEN">Shop Dining</span>
          <span class="langFR">Magasiner de salle à manger</span>
        </div></span>
      </div>
    </a>
  </div>
  
  <div data-shopbycat="BEDROOM" class="shopbycat-card">
    <a href="/collections/furniture-bedroom-promo-p">
      <div class="shopbycat-offer">
        <div class="langEN">
          <h2>up to <span class="red">20% off<sup>+</sup></span></h2>
          <p>Bedroom Furniture</p>        
        </div>
        <div class="langFR">
          <h2>JUSQU'À <span class="red">20 % DE RABAIS<sup>+</sup></span></h2>
          <p>sur les meubles de chambre à coucher</p>        
        </div>
      </div>
      <div class="shopbycat-img">
        <img loading="lazy" src="https://cdn.shopify.com/s/files/1/2660/5202/products/tatemkp5_l_d662450d-6737-4845-bfb4-bc0cb7b13fc7_800x.jpg?v=1658960660" alt="bedroom GRACWQP5">
        <div class="homepage-cta red"><span>
          <span class="langEN">Shop Bedroom</span>
          <span class="langFR">Magasiner de chambre à coucher</span>
        </div></span>
      </div>      
    </a>
  </div>
  
  <div data-shopbycat="APPLIANCES" class="shopbycat-card">
    <a href="/collections/appliances-kitchen-major-kitchen-appliances-promo">
      <div class="shopbycat-offer">
        <div class="langEN">
          <h2><span class="red">Buy More, Save More!</span></h2>
          <p>Save up to $300 OFF Select Major Appliances</p>        
        </div>
        <div class="langFR">
          <h2><span class="red">Achetez plus, économisez plus!</span></h2>
          <p>JUSQU’À 300 $ DE RABAIS sur certains gros électroménagers</p>        
        </div>
      </div>
      <div class="shopbycat-img">
        <img loading="lazy" src="https://cdn.shopify.com/s/files/1/2660/5202/products/shopify-image_41f8e10a-6783-49ae-b172-4c1afb32c1ef_554x.jpg?v=1647442121" alt="appliance GRFN285F">
        <div class="homepage-cta red"><span>
          <span class="langEN">Shop Appliances</span>
          <span class="langFR">Magasiner les électroménagers</span>
        </div></span>
      </div>      
    </a>
  </div>
  
  <div data-shopbycat="ELECTRONICS" class="shopbycat-card">
    <a href="/collections/electronics-promo-select-tv-sale-1">
      <div class="shopbycat-offer">
        <div class="langEN">
          <h2>UP TO <span class="red">$900 OFF<sup>+</sup></span></h2>
          <p>Select Big Screen Televisions</p>        
        </div>
        <div class="langFR">
          <h2>JUSQU’À <span class="red">900 $ DE RABAIS<sup>+</sup></span></h2>
          <p>sur les téléviseurs à écran géant sélectionnés</p>        
        </div>
      </div>
      <div class="shopbycat-img">
        <img loading="lazy" src="https://cdn.shopify.com/s/files/1/2660/5202/products/shopify-image_0f1cd554-7464-406c-88b6-e6b1ddf8a28a_800x.jpg?v=1655739326" alt="big screen viewing KD75X85K">
        <div class="homepage-cta red"><span>
          <span class="langEN">Shop Televisions</span>
          <span class="langFR">Magasiner les téléviseurs</span>
        </div></span>
      </div>      
    </a>
  </div>

</div></div>
</div>