Promo Banner (Drawer Banners)

• Basic drawer banners
  • Basic drawer banner
  • Buy the matching
  • Buy more save more
  • Free local delivery
  • Mix & Match
• Timed banners
  • Basic timed banner (eastern)
  • Timed banner with message
  • Staggered timed banner (timezone)

Flyout Code

<div class="utility flyout">
  This is a banner without any styles
  <div class="hidden">
	<a class="promo-link" href="/collections/home-decor-accent-furniture-rugs-accessories-promo-p"></a>
	<div class="disclaimer-text">
	  <h3>
	    Buy any sofa, loveseat, chair, or sectional and get 10% off 1 regular priced home accent or 15% off 2 or more regular priced home accents
	  </h3>
	  <p class="disclaimerText">
	    Includes occasional tables, lighting, home entertainment, accent furniture, wall art and area rugs. Excludes online only, discounted, clearance and Buyer’s Best items.
	  </p>
	</div>
  </div>
</div>

Flyout for any div

Base code

Basic

<li class="banner-wrapper banner-wrapper-list ">
  <a href="/collections/mattresses-on-sale" class="promo-link">
	<div data-message>
		<div data-lang="en">40% Select Mattresses</div>
		<div data-lang="fr">40 % de rabais sur les matelas sélectionnés</div>
	</div>
  </a>
  <div class="promo-details-label">
	  <span data-lang="en">Promotion Details</span>
	  <span data-lang="fr">Détails de la promotion</span>
  </div>
  <div class="disclaimer-text hidden">
	<h3>
	  <span data-lang="en">40% Select Mattresses</span>
	  <span data-lang="fr">40 % de rabais sur les matelas sélectionnés</span>
	</h3>pr
	<p class="disclaimerText">
	  <span data-lang="en">Exclusions if applicable - can leave empty</span>
	  <span data-lang="fr">Exclusions if applicable - can leave empty</span>
	</p>
  </div>
</li>

Basic Banner Example
Highlighted areas are what is required / needs updating

Buy the matching

<li class="banner-wrapper banner-wrapper-list" data-btm-category="sofas" data-btm-promo="60" data-btm-promo2="15">
  <a href="/collections/btm-sofas-canadian-made" class="promo-link" data-sale="btm">
	<div class="promo-cta">
		<div data-lang="en"><b>BUY THE MATCHING</b></div>
		<div data-lang="fr"><b>ACHETEZ <br>L'ARTICLE ASSORTI</b></div>
	</div>
	<div data-message>
		<div data-lang="en">60% off Canadian Made sofas when you buy the matching loveseat or chair at our ticket price</div>
		<div data-lang="fr">60 % de rabais sur les sofas fabriqués au Canada lorsque vous achetez la causeuse ou le fauteuil assortis à notre prix étiqueté</div>
	</div>
  </a>
  <div class="promo-details-label">
	  <span data-lang="en">Promotion Details</span>
	  <span data-lang="fr">Détails de la promotion</span>
  </div>
  <div class="disclaimer-text hidden">
	<h3>
	  <span data-lang="en">60% off Canadian Made sofas when you buy the matching loveseat or chair at our ticket price</span>
	  <span data-lang="fr">60 % de rabais sur les sofas fabriqués au Canada lorsque vous achetez la causeuse ou le fauteuil assortis à notre prix étiqueté</span>
	</h3>
	<p class="disclaimerText">
	  <span data-lang="en">Excludes discounted, clearance, outdoor, Sofa Lab<sup>TM</sup>, Hot Buy deals, and Buyer’s Best items.</span>
	  <span data-lang="fr">Exclut les offres de rabais et de liquidation, les articles pour l'extérieur, les articles Sofa Lab<sup>MC</sup>, les superbes achats et les articles Valeur sûre.</span>
	</p>
  </div>
</li>

Sofa Matching Sale Example
Highlighted areas are what is required / needs updating

<li class="banner-wrapper banner-wrapper-list" data-btm-category="sofas" data-btm-promo="60" data-btm-promo2="15">
  <a href="/collections/furniture-living-room-btm-sofas-on-now" class="promo-link" data-sale="btm">
	<div class="promo-cta">
		<div data-lang="en"><b>BUY THE MATCHING</b></div>
		<div data-lang="fr"><b>ACHETEZ <br>L'ARTICLE ASSORTI</b></div>
	</div>
	<div data-message>
		<div data-lang="en">
			60% off Canadian Made sofas when you buy the matching loveseat or chair at our ticket price
			<span class="subheader">Kort & Co., Cindy Crawford Home, and Chateau D'Ax Italia</span>
		</div>
		<div data-lang="fr">
			60 % de rabais sur les sofas de marques sélectionnées vous achetez la causeuse ou le fauteuil assortis à notre prix étiqueté
			<span class="subheader">Kort & Co., Cindy Crawford Home et Chateau D'Ax Italia</span>
		</div>
	</div>
  </a>
  <div class="promo-details-label">
	  <span data-lang="en">Promotion Details</span>
	  <span data-lang="fr">Détails de la promotion</span>
  </div>
  <div class="disclaimer-text hidden">
	<h3>
	  <span data-lang="en">
		60% off Canadian Made sofas when you buy the matching loveseat or chair at our ticket price
		<span class="subheader">Kort & Co., Cindy Crawford Home, and Chateau D'Ax Italia</span>
	  </span>
	  <span data-lang="fr">
		60 % de rabais sur les sofas fabriqués au Canada lorsque vous achetez la causeuse ou le fauteuil assortis à notre prix étiqueté
		<span class="subheader">Kort & Co., Cindy Crawford Home et Chateau D'Ax Italia</span>
	  </span>
	</h3>
	<p class="disclaimerText">
	  <span data-lang="en">Excludes discounted, clearance, outdoor, Sofa Lab<sup>TM</sup>, Hot Buy deals, and Buyer’s Best items.</span>
	  <span data-lang="fr">Exclut les offres de rabais et de liquidation, les articles pour l'extérieur, les articles Sofa Lab<sup>MC</sup>, les superbes achats et les articles Valeur sûre.</span>
	</p>
  </div>
</li>

Sofa Matching Sale Example (with multiple brands)
Highlighted areas are what is required / needs updating

Buy more save more

<li class="banner-wrapper banner-wrapper-list ">
  <a href="/collections/whirlpool-maytag-and-kitchenaid-major-kitchen-appliances" class="promo-link" data-sale="buy more">
	<div class="promo-cta">
		<div data-lang="en">BUY MORE <br><b>SAVE MORE</b></div>
		<div data-lang="fr">ACHETEZ PLUS <br><b>ÉCONOMISEZ PLUS</b></div>
	</div>
	<div data-message>
		<div data-lang="en">Up To $300 Off Whirlpool, Maytag, and KitchenAid Major Kitchen Appliances</div>
		<div data-lang="fr">Jusquà 300 $ de rabais sur les électroménagers Whirlpool, Maytag ou KitchenAid pour la cuisine</div>
	</div>
  </a>
  <div class="promo-details-label">
	  <span data-lang="en">Promotion Details</span>
	  <span data-lang="fr">Détails de la promotion</span>
  </div>
  <div class="disclaimer-text hidden">
	<h3>
		<span data-lang="en">Up to $300 off Samsung Major Kitchen Appliances</span>
		<span data-lang="fr">Jusquà 300 $ de rabais sur les électroménagers Samsung pour la cuisine</span>
	</h3>
	<div class="contentText grid">
		<p>
		  <span data-lang="en">Buy 2 and get an extra <strong>$150 off</strong></span>
		  <span data-lang="fr">Achetez n'importe quels 2 et obtenez <strong>150 $ de rabais</strong></span>
		</p>
		<p>
		  <span data-lang="en">Buy 3 or more and get an extra <strong>$300 off</strong></span>
		  <span data-lang="fr">Achetez n'importe quels 3 ou plus et obtenez <strong>300 $ de rabais</strong></span>
		</p>
	</div>	
	<p class="disclaimerText">
		<span data-lang="en">Excludes clearance, Samsung Bespoke, built-in appliances, microwaves, accessories, and commercial or builder products.;</span>
		<span data-lang="fr">Exclut les offres de liquidation, les électroménagers Samsung Bespoke, les électroménagers encastrés, les micro-ondes, les accessoires et les articles offerts aux ventes commerciales et aux constructeurs.;</span>
	</p>
 </div>
</li>

Buy more save more example
Highlighted areas are what is required / needs updating

Free local delivery

<li class="banner-wrapper banner-wrapper-list  ROC">
  <a href="/collections/appliances-major-promo-w-samsung" class="promo-link" data-sale="delivery">
	<div class="promo-cta">
		<div data-lang="en"><i class="fa fa-truck"></i> <b>FREE</b> <br data-mobile>LOCAL DELIVERY</div>
		<div data-lang="fr"><i class="fa fa-truck"></i> LIVRAISON <br data-mobile>LOCALE <b>GRATUITE</b></div>
	</div>
	<div data-message>
		<div data-lang="en">When you buy any 2 or more Samsung Major Appliances</div>
		<div data-lang="fr">Lorsque vous achetez n'importe quels 2 gros électroménagers Samsung ou plus</div>
	</div>
  </a>
  <div class="promo-details-label">
	  <span data-lang="en">Promotion Details</span>
	  <span data-lang="fr">Détails de la promotion</span>
  </div>
  <div class="disclaimer-text hidden">
	<h3>
	  <span data-lang="en">Free local delivery when you buy any 2 or more Samsung Major Appliances</span>
	  <span data-lang="fr">Livraison locale gratuite lorsque vous achetez n'importe quels 2 gros électroménagers Samsung ou plus</span>
	</h3>
	<p class="disclaimerText">
	  <span data-lang="en">Available in local markets. See in store and online at thebrick.com for complete details. Excludes clearance, microwaves, accessories and commercial or builder products.</span>
	  <span data-lang="fr">Offerte dans les marchés locaux. Rendez-vous en magasin ou visitez le brickenligne.com pour les détails complets. Exclut les offres de liquidation, les micro-ondes, les accessoires et les articles offerts aux ventes commerciales et aux constructeurs.</span>
	</p>
  </div>
</li>

Free Shipping Example
Highlighted areas are what is required / needs updating

Mix & Match

<li class="banner-wrapper banner-wrapper-list">
  <a href="/collections/furniture-dining-room-hot-buy-dining-table-promo-p" class="promo-link" data-sale="mix match">
	<div class="promo-cta">
		<div data-lang="en"><b>MIX & MATCH</b></div>
		<div data-lang="fr"><b>COMBINEZ <br>ET AGENCEZ</b></div>
	</div>
	<div data-message>
		<div data-lang="en">15% off Hot Buy Tables when you buy 4 matching chairs or those of equal or greater value</div>
		<div data-lang="fr">15 % de rabais sur les table de salle à manger avec la mention « Superbe achat » Lorsque vous achetez 4 chaises assorties ou celles de valeur égale ou supérieure</div>
	</div>
  </a>
  <div class="promo-details-label">
	  <span data-lang="en">Promotion Details</span>
	  <span data-lang="fr">Détails de la promotion</span>
  </div>
  <div class="disclaimer-text hidden">
	<h3>
	  <div data-lang="en">15% off Hot Buy Tables when you buy 4 matching chairs or those of equal or greater value</div>
	  <div data-lang="fr">15 % de rabais sur les table de salle à manger avec la mention « Superbe achat » Lorsque vous achetez 4 chaises assorties ou celles de valeur égale ou supérieure</div>
	</h3>
	<p class="disclaimerText">
	  <span data-lang="en">Excludes clearance.</span>
	  <span data-lang="fr">Exclut les offres de liquidation.</span>
	</p>
  </div>
</li>
</li>

Mix & Match Example
Highlighted areas are what is required / needs updating

Timed banners

Base code (timed)

<li class="banner-wrapper banner-wrapper-list" data-timed-type="default" data-timed-start="Aug 10, 2023" data-timed-end="Aug 12, 2023">
  <a href="/collections/mattresses-on-sale" class="promo-link">
	<div data-message>
		<div data-lang="en">40% Select Mattresses</div>
		<div data-lang="fr">40 % de rabais sur les matelas sélectionnés</div>
	</div>
  </a>
  <div class="promo-details-label">
	  <span data-lang="en">Promotion Details</span>
	  <span data-lang="fr">Détails de la promotion</span>
  </div>
  <div class="disclaimer-text hidden">
	<h3>
	  <span data-lang="en">40% Select Mattresses</span>
	  <span data-lang="fr">40 % de rabais sur les matelas sélectionnés</span>
	</h3>pr
	<p class="disclaimerText">
	  <span data-lang="en">Exclusions if applicable - can leave empty</span>
	  <span data-lang="fr">Exclusions if applicable - can leave empty</span>
	</p>
  </div>
</li>

Basic Banner Example
Highlighted areas are what is required / needs updating

<li class="banner-wrapper banner-wrapper-list" data-timed-type="default" data-timed-start="Aug 10, 2023" data-timed-end="Aug 12, 2023">

Default sets the time to 3:00AM eastern (same as server time)

<li class="banner-wrapper banner-wrapper-list" data-timed-type="default" data-timed-start="Aug 10, 2023 5:00PM" data-timed-end="Aug 12, 2023 12:00PM">

Add the time AFTER the date if you want it outside of the usual 3:00AM time

<li class="banner-wrapper banner-wrapper-list" data-timed-type="staggered" data-timed-start="Aug 10, 2023 5:00PM" data-timed-end="Aug 12, 2023 12:00PM">

Change the timed-type to STAGGERED if you want the time to relate to the timezone and NOT server time

<li class="banner-wrapper banner-wrapper-list" data-timed-type="staggered" data-timed-start="Aug 10, 2023 7:00AM" data-timed-end="Aug 12, 2023 12:00PM" data-timed-start_QC="Aug 10, 2023 12:00PM" data-timed-end_QC="Aug 12, 2023 5:00PM">

Add different start/end times via data-timed-start_<prov>. For maritimes (PE, NB, NS, NL) you can use data-timed-start_MAR.

<li class="banner-wrapper banner-wrapper-list" data-timed-msgEN="1 day only" data-timed-msgFR="1 jour seulement">

Custom Callout Example
Add different calls to action via data-timed-msgEN_<prov>. For maritimes (PE, NB, NS, NL) you can use data-timed-msgEN_MAR.