Component Platform: PanEmerson

PDP/Cart Half-width Banner eSpots

Note: The following eSpots are PanEmerson and can be used on all Emerson domains with the HCL Commerce online store enabled.


HCL eSpot Name: PDPPLP_TopBanner_Marketing or Cart_TopCenter_Marketing

banner espot icon short copy

PDP/PLP Half-width Banner eSpots

Half-width Banner eSpots are displayed on top of the PDP/PLP or Shopping Cart page’s main content area, directly below the Global Navigation Header. These eSpots have a flexible width allowing each of them to extend across half the width of the browser window (or device viewport) to create a full-width paired grouping.

PDP Half-width Banner — Text Only & Text with Image eSpot Variants

Usage

• Promotion Code
• Denote issues like shipping delays
• General announcements
• Demonstration of different products
• Installation information
• New product information
• Promotional marketing for products or specials
• Extra links
• News & Events
• Outside Portals
• Compliance

Code

eSpot Pair on White Background

                
                  <div class="header-banner-espot white-background-with-border"> 
	<div class="padded-container"> 
		<div class="content-wrapper"> 
			<img src="[HL]https://via.placeholder.com/40x40[/HL]" alt="[HL]icon[/HL]" /> 
			<div class="text-wrapper"> 
				<b>[HL]Sed do.[/HL] </b>[HL]Lorem ipsum dolor sit ame.[/HL] <a href="[HL]http://www.google.com[/HL]">[HL]Learn More[/HL]</a> 
			</div> 
		</div> 
	</div> 
</div> 
 
<div class="header-banner-espot white-background-with-border"> 
	<div class="padded-container"> 
		<div class="content-wrapper"> 
			<div class="text-wrapper"> 
				<b>[HL]Sed do elusmed.[/HL] </b>[HL]Lorem ipsum dolor sit ame, consectetur.[/HL] <a href="[HL]http://www.google.com[/HL]">[HL]Learn More[/HL]</a> 
			</div> 
		</div> 
	</div> 
</div>

eSpot Pair on Primary Brand Color Background

                
                  <div class="header-banner-espot brand-primary-background"> 
	<div class="padded-container"> 
		<div class="content-wrapper"> 
			<img src="[HL]https://via.placeholder.com/40x40[/HL]" alt="[HL]icon[/HL]" /> 
			<div class="text-wrapper"> 
				[HL]Lorem ipsum dolor sit amet, consectetur adipisicing[/HL] 
			</div> 
		</div> 
	</div> 
</div> 
 
<div class="header-banner-espot brand-primary-background"> 
	<div class="padded-container"> 
		<div class="content-wrapper"> 
			<div class="text-wrapper"> 
				[HL]Lorem ipsum dolor sit amet, consectetur adipisicing[/HL]
			</div> 
		</div> 
	</div> 
</div>

eSpot Pair on Blue-Grey Background

                
                  <div class="header-banner-espot blue-gray-background"> 
	<div class="padded-container"> 
		<div class="content-wrapper"> 
			<img src="[HL]https://via.placeholder.com/40x40[/HL]" alt="[HL]icon[/HL]" /> 
			<div class="text-wrapper"> 
				<b>[HL]Sed do.[/HL] </b>[HL]Lorem ipsum dolor sit ame.[/HL] <a href="[HL]http://www.google.com[/HL]">[HL]Learn More[/HL]</a> 
			</div> 
		</div> 
	</div> 
</div> 
 
<div class="header-banner-espot blue-gray-background"> 
	<div class="padded-container"> 
		<div class="content-wrapper"> 
			<div class="text-wrapper"> 
				<b>[HL]Sed do elusmed.[/HL] </b>[HL]Lorem ipsum dolor sit ame, consectetur.[/HL] <a href="[HL]http://www.google.com[/HL]">[HL]Learn More[/HL]</a> 
			</div> 
		</div> 
	</div> 
</div>

eSpot Pair on Grey Background

                
                  <div class="header-banner-espot gray-background"> 
	<div class="padded-container"> 
		<div class="content-wrapper"> 
			<img src="[HL]https://via.placeholder.com/40x40[/HL]" alt="[HL]icon[/HL]" /> 
			<div class="text-wrapper"> 
				<b>[HL]Sed do.[/HL] </b>[HL]Lorem ipsum dolor sit ame.[/HL] <a href="[HL]http://www.google.com[/HL]">[HL]Learn More[/HL]</a> 
			</div> 
		</div> 
	</div> 
</div> 
 
<div class="header-banner-espot gray-background"> 
	<div class="padded-container"> 
		<div class="content-wrapper"> 
			<div class="text-wrapper"> 
				<b>[HL]Sed do elusmed.[/HL] </b>[HL]Lorem ipsum dolor sit ame, consectetur.[/HL] <a href="[HL]http://www.google.com[/HL]">[HL]Learn More[/HL]</a> 
			</div> 
		</div> 
	</div> 
</div>

eSpot Pair on Rich Black Background

                
                  <div class="header-banner-espot rich-black-background"> 
	<div class="padded-container"> 
		<div class="content-wrapper"> 
			<img src="[HL]https://via.placeholder.com/40x40[/HL]" alt="[HL]icon[/HL]" /> 
			<div class="text-wrapper"> 
				<b>[HL]Sed do.[/HL] </b>[HL]Lorem ipsum dolor sit ame.[/HL] <a href="[HL]http://www.google.com[/HL]">[HL]Learn More[/HL]</a> 
			</div> 
		</div> 
	</div> 
</div> 
 
<div class="header-banner-espot rich-black-background"> 
	<div class="padded-container"> 
		<div class="content-wrapper"> 
			<div class="text-wrapper"> 
				<b>[HL]Sed do elusmed.[/HL] </b>[HL]Lorem ipsum dolor sit ame, consectetur.[/HL] <a href="[HL]http://www.google.com[/HL]">[HL]Learn More[/HL]</a> 
			</div> 
		</div> 
	</div> 
</div>

Specifications

Max Characters

Body Copy: 60

Image Dimensions

Width: 40px
Height: proportional (max 40px)
Margin-Right: 20px

eSpot Dimensions

Width: 50% (flexible)
Height: 50px (fixed)

Usage Guidelines

When To Use

Use when there’s a need to call out multiple pieces of content that are consistent with the usage guidelines on a PDP or landing page.

When To Avoid

Avoid using when the content does not meet the usage guidelines described above or when a only single piece of content needs to be displayed on the page (i.e.: Full-width Banner eSpot use cases).

Alternative Options

Full-Width PDP/PLP Banner eSpots

Share Your Feedback