Note: The following eSpot and variants were designed and implemented for use within Commercial & Residential Solutions’ ecommerce stores.
HCL eSpot Name: PDP-Centered-Marketing
The PDP Enhanced Content eSpot allows editor to author up to 5 content rich eSpot variants designed to enhance the informational content value within the “Features” jump-nav section of Product Details Pages. Authors can combine or mix and match these eSpot variants in any order as needed to best suite their specific product and content needs, but a max of 5 eSpots per PDP is recommended.
The Full-width Image eSpot variant features relevant product or PDP marketing imagery used to break up copy on the page and visually engage users. Some full width images may need to be re-configured for tablet and mobile devices, requiring three versions of the image to be created.
**Note: As always, it is strongly recommended that images contain graphical content only and do not include embedded or flattened text.
<div class="pdp-jumpnav-features-espot">
<div class="padded-container">
<div class="row espot-pdp-padding">
<div class="image-container">
<img src="[HL]https://www.emerson.com/resource/image/44294/landscape_ratio4x1/1600/400/85537fe5f90d9553bf3e99feacd02d5a/yQ/ppl-tech-ext-measurement-instrumentation-banner.jpg[/HL]" alt="[HL]Alt Text here[/HL]" class="cm-media cm-media--responsive" title="[HL]Image Title here[/HL]"/>
</div>
</div>
</div>
</div>
Asset Size: 1920px x (variable)
Aspect Ratio: (variable)
Recommended File Weight: <125kb
Width: 1280px
Height: (variable)
Desktop: (variable)
Tablet: (variable)
Mobile: (variable)
The Rich Text eSpot variant is used to create rich, text-based informational experiences within the PDP Features section. Editors can use this eSpot to author headlines & subheadings, descriptive copy, bold text, italics, and bulleted/numbered lists to make content more digestible for the reader.
<div class="pdp-jumpnav-features-espot C034-rich-copy-area" style="padding-bottom: 10px">
<div class="padded-container">
<div class="row c034-width">
<div class="col-xs-12 col-sm-10 col-md-12">
<span class="rte-label--eyebrow">[HL]Eyebrow (Optional)[/HL]</span>
<h2>[HL]H2-H5 Heading (Optional)[/HL]</h2>
<h3 style="text-align:left; margin:16px 0">[HL]H3-H5 Subhead (Optional)[/HL]</h3>
<span>[HL]Body Copy lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec dui metus. Etiam neque odio, euismod sit amet tempus at, imperdiet in odio. Donec egestas laoreet scelerisque. Quisque ac rutrum lorem. Curabitur egestas lorem quam, a varius leo tristique porttitor. Duis dapibus ligula id tincidunt accumsan. Aliquam erat volutpat. Duis urna tellus, rutrum ut risus at, euismod condimentum est.[/HL]</span>
</div>
</div>
</div>
</div>
Headlines: 40-75 (optional)
Subheadings: 40-75 (optional)
Body Copy: Unlimited
The Offset Text Navigation Tiles eSpot variant features a content grid displaying up to three tiles, each including an engaging image, title, description text and Text CTA used for featuring and linking to other product-relevant content pages. There is no minimum number of tiles required, and tiles will flow from left to right.
<div class="VN019-navigation-tiles-with-offset-text pdp-jumpnav-features-espot">
<div class="padded-container">
<div class="col-xs-12 col-sm-10 col-md-12 espot-pdp-padding">
<h2>[HL]H2 Heading[/HL]</h2>
</div>
<div class="tiles row">
<div class="col-xs-12 col-sm-6 col-md-4">
<a href="[HL]https://d1-live.emerson.com/en-us/esg/sustainability[/HL]" class="tile">
<div class="background-image">
<div class="image-container">
<img src="[HL]https://d1-live.emerson.com/resource/image/7791992/landscape_ratio5x3/400/240/20aa3d4d241c19192d848c5887fbba40/TV/v019-environmental-sustainability-image.jpg[/HL]" alt="[HL]Alt Text here[/HL]" class="cm-media cm-media--responsive cm-teasable__picture" title="[HL]Image Title here[/HL]" >
</div>
</div>
<div class="content features-espot-text">
<div class="body-text-espot-pdp-vn019" style="padding-bottom: 50px">[HL]Easy Swap Installation[/HL]</div>
<span class="body-text">[HL]It's fast and easy to replace one InSinkErator garbage disposal with another thanks to our patented Quick Lock mount. Quick Lock is compatible with all InSinkErator models, from standard to premium Evolution Series models. Simply twist off the old one and twist on the new.[/HL]</span>
<div class="cta-buttons _vn019-cta-buttons">
<div class="cta-text cta--primary cta--internal" href="[HL]https://d1-live.emerson.com/en-us/esg/sustainability[/HL]">[HL]OPTIONAL TEXT CTA[/HL]<span class="cta-icon"></span></div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<a href="[HL]https://d1-live.emerson.com/en-us/careers/diversity-and-inclusion[/HL]" class="tile">
<div class="background-image">
<div class="image-container">
<img src="[HL]https://d1-live.emerson.com/resource/image/7791994/landscape_ratio5x3/400/240/828f4a88efbaca5399be0eab3c847369/ew/v019-de-i-image.jpg[/HL]" alt="[HL]Diverse group of employees interacting and smiling[/HL]" class="cm-media cm-media--responsive cm-teasable__picture" title="[HL]Image Title here[/HL]" >
</div>
</div>
<div class="content features-espot-text">
<div class="body-text-espot-pdp-vn019" style="padding-bottom: 50px">[HL]Affordable Performance[/HL]</div>
<span class="body-text">[HL]When affordability is on you mind, there's no better choice than the functional performance of Badger food waste disposals. Reliability begins and ends with the rugged galvanized steel construction and long-lasting dependability of their Dura-Drive induction motors.[/HL]</span>
<div class="cta-buttons _vn019-cta-buttons">
<div class="cta-text cta--primary cta--internal" href="[HL]https://d1-live.emerson.com/en-us/careers/diversity-and-inclusion[/HL]">[HL]OPTIONAL TEXT CTA[/HL]<span class="cta-icon"></span></div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<a href="[HL]https://d1-live.emerson.com/en-us/esg[/HL]" class="tile">
<div class="background-image">
<div class="image-container">
<img src="[HL]https://d1-live.emerson.com/resource/image/7792032/landscape_ratio5x3/400/240/cb60c1658bac19d1d5a7f33d67cea175/EA/v019-esg-image.jpg[/HL]" alt="[HL]Emerson employee inspecting solar panels in factory[/HL]" class="cm-media cm-media--responsive cm-teasable__picture" title="[HL]Image Title here[/HL]">
</div>
</div>
<div class="content features-espot-text">
<div class="body-text-espot-pdp-vn019" style="padding-bottom: 50px">[HL]Grind for Good[/HL]</div>
<span class="body-text">[HL]Even the simple things we do make an impact on the environment. Using an InSinkErator disposal diverts food waste from landfills, and serveral waste water treatment plants can even turn your food into renewable energy and fertilizer.[/HL]</span>
<div class="cta-buttons _vn019-cta-buttons">
<div class="cta-text cta--primary cta--internal" href="[HL]https://d1-live.emerson.com/en-us/esg[/HL]">[HL]OPTIONAL TEXT CTA[/HL]<span class="cta-icon"></span></div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
Headline: 70
Tile Title: 40
Tile Body Copy: 125 (3 line max)
CTA: 12 (bottom-aligned to the content row)
Asset Size: 960px x 576px
Aspect Ratio: 5:3
Recommended File Weight: <50kb
Width: 748px
Height: 448px
Desktop: 5:3
Tablet: 5:3
Mobile: 5:3
The 2-Column with Image Right eSpot variant is used to highlight a key value proposition and/or speak to the general purpose of the product or service offered. The eSpot includes two product feature callouts or proof points each featuring relevant iconography, concise subheading text and brief description illustrating the value of the product or service offering and a relevant, visually engaging imagery on the right.
This eSpot also allows up to 2 optional CTAs driving users to associated product or service child pages as needed.
<div class="C068-two-column-text-with-image pdp-jumpnav-features-espot" style="padding-top:0px;padding-bottom:0px">
<div class="padded-container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-8">
<div class="image-container" >
<img src="[HL]https://d1-auth.emerson.com/resource/image/7901128/portrait_ratio1x1/555/555/e07ac6c87434cd7aa9655d0eadde1e30/uB/iphone.png[/HL]" alt="[HL]Alt Text here[/HL]" class="cm-media cm-media--responsive" title="[HL]Image Title here[/HL]">
</div>
</div>
<div class="col-xs-12 col-sm-8 col-sm-pull-4">
<div class="main-content">
<h2>[HL]The Reliable Choice When Affordability & Space are Prime Considerations[/HL]</h2>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="C071-mega-blurb">
<div class="icon" >
<img src="[HL]https://d1-auth.emerson.com/resource/blob/puzzle-data-7901152.png[/HL]" alt="[HL]New Content Item (4)[/HL]" class="cm-media" title="[HL]Icon Title here[/HL]" >
</div>
<div class="content">
<h4>[HL]Reliable & Easy Install[/HL]</h4>
<div class="text">
<p>[HL]Features a compact, space-saving design that fits existing InSinkErator hardware for a quick and easy install.[/HL]</p>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="C071-mega-blurb">
<div class="icon" >
<img src="[HL]https://d1-auth.emerson.com/resource/blob/thermostat-data-7901166.png[/HL]" alt="[HL]New Content Item (1)[/HL]" class="cm-media" title="[HL]Icon Title here[/HL]" >
</div>
<div class="content">
<h4>[HL]Durable Components[/HL]</h4>
<div class="text">
<p>[HL]Features our exclusive 1/2 hp Dura-Drive Induction Motor and long lasting galvanized steel components to ensure a dependable grind for everyday food scraps.[/HL]</p>
</div>
</div>
</div>
</div>
</div>
<div class="cta-buttons _c068-cta-buttons">
<a class="cta-btn cta--primary cta--external" target="_blank" href="[HL]https://www.google.com[/HL]">[HL]Optional CTA[/HL]
<span class="cta-icon"></span>
</a>
<a class="cta-btn cta--secondary cta--internal " href="[HL]https://www.google.com[/HL]">[HL]Optional CTA[/HL]
<span class="cta-icon"></span>
</a>
</div>
</div>
<div class="C072-mega-footnote" >
<p>[HL]Optional footer content lorem ipsum dolor sit amet consectetur adipscing elit.[/HL]</p>
</div>
</div>
</div>
</div>
</div>
Headline: 70
Proof Point Title: 25
Proof Point Body: 125
CTA: 25
Asset Size: 64px x 64px
Aspect Ratio: 1:1
Recommended File Weight: <2kb
Width: 32px
Height: 32px
Asset Size: 960px x 960px
Aspect Ratio: 1:1
Recommended File Weight: <55kb
Width: 728px
Height: 728px
Desktop: 1:1
Tablet: 1:1
Mobile: 1:1
The Flexible Column with Icons & Image Right eSpot is ideal for highlighting a digital product or service feature as well as any key points with supporting visuals. The eSpot expands vertically to accommodate multiple proof points for a right-aligned product or service feature image and includes an optional CTA center-aligned at the bottom to drive to relevant associated content pages as needed.
<div class="pdp-jumpnav-features-espot">
<div class="mega-flexible-component C069-mega-flexible-column-with-image-on-right padded-container">
<div class="col-xs-12 col-sm-10 col-md-12 espot-pdp-padding features-espot-text" style="text-align: center">
<h2>[HL]More Horsepower, Advanced Performance.[/HL]</h2>
<span class="body-text">[HL]InSinkErator® Power Series garbage disposals will handle whatever's leftover on your dishes.[/HL]</span>
</div>
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-push-1">
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-8">
<div class="image-container">
<img src="[HL]https://d1-live.emerson.com/resource/image/7275798/portrait_ratio1x2/400/800/1356eb8f4004f34d7571f8b35b2cdb55/Rv/enhance-operational-performance-with-a-proactive-reliability-strategy.jpg[/HL]" alt="[HL]Alt Text here[/HL]" class="cm-media cm-media--responsive" title="[HL]Image Title here[/HL]">
</div>
</div>
<div class="col-xs-12 col-sm-8 col-sm-pull-4">
<div class="C071-mega-blurb">
<div class="icon">
<img src="[HL]https://d1-live.emerson.com/resource/blob/filler-data-7265294.png[/HL]" alt="[HL]filler[/HL]" class="cm-media" title="[HL]filler[/HL]">
</div>
<div class="content">
<h4>[HL]Rugged Construction[/HL]</h4>
<div class="text">
<p>[HL]Galvanized steel grind elements provide better corrosion resistance to add longevity to your garbage disposal.[/HL]</p>
</div>
</div>
</div>
<div class="C071-mega-blurb">
<div class="icon">
<img src="[HL]https://d1-live.emerson.com/resource/blob/filler-data-7265294.png[/HL]" alt="[HL]filler[/HL]" class="cm-media" title="[HL]filler[/HL]">
</div>
<div class="content">
<h4>[HL]Making Install a Snap[/HL]</h4>
<div class="text">
<p>[HL]Everything you need to install a new model comes in the box.[/HL]</p>
</div>
</div>
</div>
<div class="C071-mega-blurb">
<div class="icon">
<img src="[HL]https://d1-live.emerson.com/resource/blob/filler-data-7265294.png[/HL]" alt="[HL]filler[/HL]" class="cm-media" title="[HL]filler[/HL]">
</div>
<div class="content">
<h4>[HL]Long-Lasting Power[/HL]</h4>
<div class="text">
<p>[HL]¾ and 1 HP motors with jam-preventing torque keep your garbage disposals grinding.[/HL]</p>
</div>
</div>
</div>
<div class="C071-mega-blurb">
<div class="icon">
<img src="[HL]https://d1-live.emerson.com/resource/blob/filler-data-7265294.png[/HL]" alt="[HL]filler[/HL]" class="cm-media" title="[HL]filler[/HL]">
</div>
<div class="content">
<h4>[HL]We Come To You® Limited Warranty[/HL]</h4>
<div class="text">
<p>[HL]If your InSinkErator needs service while under our 6 -7 year warranty, we'll send an authorized service representative to you.[/HL]</p>
</div>
</div>
</div>
</div>
</div>
<div class="cta-buttons _c069-cta-buttons">
<a class="cta-btn cta--primary cta--internal" href="[HL][/HL]">[HL]Optional CTA[/HL]<span class="cta-icon"></span></a>
<a class="cta-btn cta--primary cta--internal" href="[HL][/HL]">[HL]Optional CTA[/HL]<span class="cta-icon"></span></a>
</div>
</div>
</div>
<div class="text" style="font-size:0.75rem">
<p>[HL]Optional footer content lorem ipsum dolor sit amet consectetur adipscing elit[/HL].</p>
</div>
</div>
</div>
Headline: 50
Subheading: 125
Proof Point Title: 25
Proof Point Body: 125
Asset Size: 64px x 64px
Aspect Ratio: 1:1
Recommended File Weight: <2kb
Width: 32px
Height: 32px
Asset Size: 840px x 1680px
Aspect Ratio: 1:2
Recommended File Weight: <75kb
Width: 648px
Height: 1296px
Desktop: 1:2
Tablet: 1:2
Mobile: 1:2