Note: The following eSpots were designed and implemented for use within Commercial & Residential Solutions’ ecommerce stores.
HCL eSpot Name: QuickOrderImage_Espot
Quick Order Entry eSpots are displayed in the right rail next to the Quick Order Entry form. While their width is fixed, their height is flexible and can expand to fit their body copy content.
• Specials for specific products
Description or Instructions text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel ante quam.
<div class="quick-order-espot image-based">
<div class="badge">[HL]Special Offer[/HL]</div>
<img src="[HL]https://d1-auth.insinkerator.emerson.com/resource/image/3999070/portrait_ratio3x4/414/552/6746185200d5941db958b503f7f95a21/fw/hot-tap-c011.jpg[/HL]" />
<div class="text-container">
<h3>[HL]Headline lorem ipsum dolor[/HL]</h3>
<p>[HL]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva mus mi em, volutpat congue nisl egestas, vehicula pulvinar leo. Cras tellus purus, lacinia sit amet orci at, vehicula.[/HL]</p>
<a class="arrow-right-link animated-arrow-right-link" href="[HL]https://www.google.com[/HL]">[HL]Learn More[/HL]</a>
</div>
</div>
Headline: 45
Body Copy: 150
Label: 20
Width: 344px
Height: 200px (fixed)
Width: 344px
Height: 450px (flexible)
• Instructional Copy
Text Block with Grey Background
<div class="quick-order-espot text-block gray-background">
<h3>[HL]Headline lorem ipsum dolor[/HL]</h3>
<p>[HL]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva mus mi em, volutpat congue nisl egestas, vehicula pulvinar leo. Cras tellus purus, lacinia sit amet orci at, vehicula.[/HL]</p>
<ul>
<li>[HL]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva mus mi ex, volutpa.[/HL]</li>
<li>[HL]Vehicula pulvinar leo. Cras tellus purus, lacinia sit amet orci at, vehicula Viva mus.[/HL]</li>
</ul>
<a class="arrow-right-link animated-arrow-right-link" href="[HL]https://www.google.com[/HL]">[HL]Learn More[/HL]</a>
</div>
Text Block with White Background
<div class="quick-order-espot text-block">
<h3>[HL]Headline lorem ipsum dolor[/HL]</h3>
<p>[HL]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva mus mi em, volutpat congue nisl egestas, vehicula pulvinar leo. Cras tellus purus, lacinia sit amet orci at, vehicula.[/HL]</p>
<a class="arrow-right-link animated-arrow-right-link" href="[HL]https://www.google.com[/HL]">[HL]Learn More[/HL]</a>
</div>
Headline: 45
Body Copy: 135
Width: 344px
Height: 450px (flexible)