Component Platform: PanEmerson

Shopping Cart In-Cart eSpots

Note: This eSpot is PanEmerson and can be used on all Emerson domains with the HCL Commerce online store enabled.


HCL eSpot Name: Cart_BodyLeft_Marketing

espot short copy

In-Shopping Cart Marketing eSpot

The in-shopping cart allows for the display of an optional eSpot marketing content. When included, this item displays within the main Shopping Cart just below the contents of the cart, promo codes and financial stack. This section should appear to be “pinned” to the bottom left-hand corner of the Shopping Cart “card.”

Shopping Cart In-Cart Marketing Text with Image (Diagonal) Variant

Usage

• Purchaser license restrictions

• Promotional/Marketing messaging

• Shipping information/delays

• Order Processing information

• Cross-sell/Up-sell messaging / Awareness of Training

Code

Approved content authors can copy and paste the available code snippet. Highlighted sections are meant to be customized per the specific use case.

<div class="emr-cart-left-marketing-espot image-diagonal-based">
  <div class="image-container">
    <img src="https://www.emerson.com/resource/image/6157304/landscape_ratio16x9/600/338/d16820d0ebeab7c7f8fb53c19c358403/Mt/c005-professional-tools.jpg" />
  </div>
  <div class="text-container">
    <h3>Headline 40 Character Limit Lorem Ipsum</h3>
    <p>Body 165 Character Limit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva mi ex, volupat congue nisl egestas, vehicula pulvinar leo. Lorem ipsum dolor.</p>
    <a class="arrow-right-link animated-arrow-right-link" href="https://www.google.com">Read More</a>
  </div>
</div>
HTML
Copy Code

Specifications

Max Characters

Headline: 40

Body Copy: 165

Image Dimensions

Width: 264px

Height: 160px

eSpot Dimensions

Width: 800px

Height: 160px (fixed)

Shopping Cart In-Cart Marketing Text with Image Variant

Usage

• Purchaser license restrictions

• Promotional/Marketing messaging

• Shipping information/delays

• Order Processing information

• Cross-sell/Up-sell messaging / Awareness of Training

Code

Approved content authors can copy and paste the available code snippet. Highlighted sections are meant to be customized per the specific use case.

<div class="emr-cart-left-marketing-espot image-based">
  <div class="image-container">
    <img src="https://www.emerson.com/resource/image/6157304/landscape_ratio16x9/600/338/d16820d0ebeab7c7f8fb53c19c358403/Mt/c005-professional-tools.jpg" />
  </div>
  <div class="text-container">
    <h3>Headline 40 Character Limit Lorem Ipsum</h3>
    <p>Body 165 Character Limit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva mi ex, volupat congue nisl egestas, vehicula pulvinar leo. Lorem ipsum dolor.</p>
    <a class="arrow-right-link animated-arrow-right-link" href="https://www.google.com">Read More</a>
  </div>
</div>
HTML
Copy Code

Specifications

Max Characters

Headline: 40

Body Copy: 165

Image Dimensions

Width: 264px

Height: 160px

eSpot Dimensions

Width: 800px

Height: 160px (fixed)

Shopping Cart In-Cart Marketing Text Only (Grey, White) Variants

Usage

• Purchaser license restrictions

• Promotional/Marketing messaging

• Shipping information/delays

• Order Processing information

• Cross-sell/Up-sell messaging / Awareness of Training

Code

Text Block with Grey Background

<div
	class="emr-cart-left-marketing-espot text-based grey-background">
	<div class="text-container">
      <h3>Headline 45 Character Limit Lorem Ipsum Dolo</h3>
      <p>Body 180 Character Limit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva mus mi ex, volutpat congue nisl egestas, vehicula pulvinar leo. Lorem ipsum dolor sit amet.</p>
      <a class="arrow-right-link animated-arrow-right-link" href="https://www.google.com">Read More</a>
  </div>
</div>
HTML
Copy Code

Text Block with White Background

<div class="emr-cart-left-marketing-espot text-based">
  <div class="text-container">
    <h3>Headline 45 Character Limit Lorem Ipsum Dolo</h3>
    <p>Body 180 Character Limit. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Viva mus mi ex, volutpat congue
nisl egestas, vehicula pulvinar leo. Lorem ipsum dolor sit amet.</p>
    <a class="arrow-right-link animated-arrow-right-link" href="https://www.google.com">Read More</a>
  </div>
</div>
HTML
Copy Code

Specifications

Max Characters

Headline: 45

Body Copy: 180

Green CTA link can only be used on light grey and white background. When using the rich black background, only use white copy and CTA links.

eSpot Dimensions

Width: 800px

Height: 160px

Usage Guidelines

When to use

Use when there’s a need to call out content on the Shopping Cart that may or may not be directly related to the items currently within it. Only approved Commerce Management Center (CMC) uses have the ability to setup this marketing messaging.

When to Avoid

N/A

Alternative Options

Shopping Cart Below-Cart eSpot

Share Your Feedback