How to replace "active content" in eBay listings using HTML and CSS.

Overview

The use of active content in listings, including JavaScript, Flash, plug-ins and form actions, can negatively impact the user experience by inhibiting mobile purchasing, increasing page load times, and increasing security vulnerabilities.

To prepare for these changes, we encourage you to limit or eliminate your use of active content in eBay listings and Stores as soon as possible. We also strongly suggest you do not make any more financial investments in creating or augmenting a custom stores experience since this capability will retired at a later date.

We are working closely with our third-party partners in cases where they use active content on your item descriptions or stores.

Active content preview feature

eBay provides a feature that allows you to view your listing with and without active content enabled in their listing description. This will allow you to see the difference between the two (active vs. no active content). The screen shot below demonstrates this new feature/check box at the top of the Description on an item page.

Active Content Check

Advanced users and 3rd party partners can also try the following url: http://www.i-ways.net/mobile-friendly/en-us/, which provides additional details regarding the type of active content in the listing and other recommendations to make the listing more mobile friendly.

Alternatives to using active content

This guide covers the most common use cases where you might use active content in your listings, and then follows up with recommendations to replace the use of active content for each use case. In all use cases, by removing active content, you will get the benefits of faster-loading listings that are enhanced for viewing on mobile devices.

In some cases, the alternative(s) may be a feature/setting/option that is already built into the listing flow (seller tools, MyeBay selling form, and APIs) and/or built into the standard View Item page. In other cases, we provide example code demonstrating how to incorporate CSS/HTML to accomplish a similar task without using active content (e.g. JavaScript).

Mobile devices

Although all of this content is relevant for listings on mobile devices, it is not specifically targeted at improving listings for viewing on mobile devices. For more information on customizing listings for the best mobile viewing experience, see the following guides:

How to guide: Cross merchandising

As a means to cross-promote related items, sellers will often use active content to display thumbnails of related products with links to live eBay listings. An example is shown below:

Cross Merchandise Example 3

For sellers with an eBay Store subscription

eBay recommends using Promotions Manager to merchandise relevant items. See the Build your business seller page for more information on Promotions Manager. The screenshot below demonstrates how a Promotions Manager promotion appears on the View Item page:

Promotions Manager Cross Sell Example

eBay is a competitive marketplace where your items compete against items from other sellers. Promotions help your items standout, and drive traffic to your offer page exposing more of your relevant inventory, helping you sell more per visit.

APIs for 3rd party partners will be coming later this fall. The promotions manager team is also exploring the concept of non-discounted events as another merchandising lever. Stay tuned on this, more to come in early 2017.

For sellers without eBay Stores

eBay is planning to launch a new merchandising widget that will automatically display relevant items from the same seller. This new widget will appear on the VI page when the seller has additional items relevant to that primary item. Sellers will not need to do anything to enable this widget. Launch is planned for early 2017.

How to guide: Implementing newsletters, coupons, and discounts

eBay recommends the following when offering company/store newsletters, product coupons, discounts, sales events:

Note: To be eligible to use Promotions Manager, you must have an active eBay Store with a store subscription. See the Build your business seller page for more information on Promotions Manager.

How to guide: Implementing eBay Store search

Some sellers include a search box in their item description, so buyers can search their eBay Store. An example is shown below:

Search Store Search Box 1

eBay recommends sellers enable a Store Search box within the Item Description section of the listing by enabling the Listing Frame feature. Setting up an eBay Store's listing frame is discussed in the Customizing your store's appearance Help topic. The image below shows a search box enabled in the listing frame.

Built-In Search Store

In addition to searching for items in the store, the listing frame feature also allows sellers to enable store category links, subscribe to newsletters, and display their store logo. This feature is planned to be refreshed in early 2017.

How to guide: Creating tabbed panes in listings

eBay recommends sellers use the standard eBay listing fields to create the most complete and optimal listings across all devices.

Sellers should input acceptable payment methods in the payment fields, available shipping options in the shipping information fields, the return policy in the return policy fields, item specifics in item specifics fields, etc.

Sellers should avoid creating tab panes which repeat content included in the standard eBay listing fields and should think very carefully about the buyer experience before adding a tab – the tab should help the buyer purchase. Buyer testing has confirmed that tabs get a very low amount of clicks. Below is an example of what seller should avoid doing:

Tabbed Panes Example 3

Exception:

For sellers who still have reason to create custom tabbed panes, eBay recommends that these tabbed panes be created using only HTML and CSS. Below is an example of how HTML and CSS code can be used to create a four-tabbed pane. This HTML and CSS is input into the item description at listing time.

<! -- HTML code -->

<main>
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Tab 1</label>
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Tab 2</label>
  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Tab 3</label>
  <input id="tab4" type="radio" name="tabs">
  <label for="tab4">Tab 4</label>
  <section id="content1">
	Tab 1 Content
  </section>
  <section id="content2">
	Tab 2 Content
  </section>
  <section id="content3">
	Tab 3 Content
  </section>
  <section id="content4">
	Tab 4 Content
  </section>
</main>


<! -- CSS code -->

main {
  min-width: 320px;
  max-width: 400px;
  padding: 50px;
  margin: 0 auto;
  background: #fff;
}
section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}
input {
  display: none;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

label:hover {
  color: #888;
  cursor: pointer;
}

input:checked + label {
  color: #555;
  border: 1px solid #ddd;
  border-top: 2px solid orange;
  border-bottom: 1px solid #fff;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}

@media screen and (max-width: 650px) {
  label {
	font-size: 0;
  }
  label:before {
	margin: 0;
	font-size: 18px;
  }
}

@media screen and (max-width: 400px) {
  label {
	padding: 15px;
  }
}

The result of this HTML and CSS is the tabbed pane shown below. The name of each tab label can be configured by editing the text between the <label> tags. So, instead of <label for="tab1">Tab 1</label>, you might have <label for="tab1">Description</label>. The content under each tab is input between the <section> tags. The tab dimensions, text font size, colors, behavior, and other look-and-feel elements are controlled through the CSS.

HTML/CSS Tabbed Pane

How to guide: Creating image galleries

eBay recommends sellers use eBay's robust picture/gallery features.

Benefits include:

eBay Image Gallery With Zoom

An example of a mobile image gallery is shown below:

Mobile Image Gallery

Embedded Image Carousel NOT RECOMMENDED: creating your own image gallery/carousel in the listing for their product, like the one shown to the right – buyers on mobile devices don't know the images are in the description, pages may take longer to load and it's not consistent with how buyers look for images on eBay.

Exception:

For sellers who do want to create their own image carousel in their listing, it is possible to do this using HTML and CSS. Below is one example of how HTML and CSS code can be used to implement an image carousel. This HTML and CSS is input into the item description. Please note that including a custom image carousel in the listing is not recommended. Buyers on mobile devices will be unaware you included the images in the description and over 50% of traffic is now coming through mobile devices.

<!-- HTML Code -->

<header>
<div><img src="http://ir.ebaystatic.com/pictures/aw/pics/s.gif" alt></div>
<div><img src="http://ir.ebaystatic.com/pictures/aw/pics/s.gif" alt></div>
<div><img src="http://ir.ebaystatic.com/pictures/aw/pics/s.gif" alt></div>
<div><img src="http://ir.ebaystatic.com/pictures/aw/pics/s.gif" alt></div>
<div><img src="http://ir.ebaystatic.com/pictures/aw/pics/s.gif" alt></div>
</header>

<!-- CSS -->

body { margin: 0; background: #333; }
header {
  padding: .5rem;
  font-size: 0;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  display: -webkit-box;
  display: flex;
}
header div {
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto;
  margin: .5rem;

}
header div img {
  width: 100%;
  height: auto;
  border: 1px solid #fff;
}
@media screen and (max-width: 400px) {
  header div { margin: 0; }
  header { padding: 0; }

}

The result of this HTML and CSS is the image gallery shown below. All that remains to complete the image gallery is for the seller to include the actual paths to the image files in between the tags above.

HTML/CSS Image Gallery

While image galleries are discouraged, adding contextual images a long with content for story telling aspects is perfectly reasonable. These contextual images should also be included in the eBay hosted image gallery.

How to guide: Including a product video

eBay recommends the following for sellers who wish to include video in their listings:

  • Use an HTML5 <video> tag to play a video in the listing. An example of code for video is shown below:
    	<video width="320" height="240" autoplay>
    	  <source src="movie.mp4" type="video/mp4">
    	  <p>Here is a video of the product</p>
    	</video>
  • eBay is working on providing compatibility for popular video hosting sites. More information about this solution will be provided in early 2017.

Sellers should read and understand eBay's Links policy for more information on restrictions/requirements for videos in listings.

Note: Currently, some video hosting sites do not directly support the HTML5 <video> tag.

Some sellers embed product videos in their listing, similar to what is shown below and is not recommended unless it follows the guidelines above:

Embedded Product Video

How to guide: Specifying freight shipping rates

As a seller, you do not have to embed any information regarding freight shipping charges through third parties such as FreightQuote, as FreightQuote will automatically calculate these charges after the seller inputs the logistics of the pickup, including the type of item and its condition, the pickup location (residence, commercial, construction site), and whether the seller needs special help to prepare the item for shipping.

How to guide: Implementing tracking/analytics

If you use eBay Seller Hub, embedding JavaScript code to enable listing tracking/analytics will no longer be necessary. For more information on Seller Hub, see the Growing your business Help topic. Seller Hub-related APIs will become available in late 2016.

How to guide: Specifying parts compatibility

The Parts Compatibility feature (in the listing flow and API) generally does a great job of matching up motor vehicle parts to compatible vehicles, so sellers are encouraged to use this feature wherever possible at listing time. However, if the seller discovers that eBay Parts Compatibility feature is showing incomplete or slightly inaccurate information, the seller can alternatively embed a simple HTML table to give the complete list of compatible vehicles. For more information about Parts Compatibility, see the Parts Compatibility Help topic.

How to guide: Implementing responsive design

eBay recommends using HTML and CSS to detect browser/device type in order to customize design/layout. Below is one example of how HTML and CSS code can be used to control column width and behavior based on browser/device type. This HTML and CSS is input into the item description.

<!-- HTML code -->

<div id="pagewrap">

  <header>
	<h1>3 Column Responsive Layout</h1>
  </header>

  <section id="content">
	<h2>Column 1</h2>
  </section>

  <section id="middle">
	<h2>Column 2</h2>

  </section>

  <aside id="sidebar">
	<h2>Column 3</h2>

  </aside>

  <footer>
	<h4>Footer</h4>
	<p>Footer text</p>
  </footer>

</div>


<!-- CSS -->

#pagewrap {
  padding: 5px;
  width: 960px;
  margin: 20px auto;
}

header {
  height: 100px;
  padding: 0 15px;
}

#content {
  width: 290px;
  float: left;
  padding: 5px 15px;
}

#middle {
  width: 294px;
  float: left;
  padding: 5px 15px;
  margin: 0px 5px 5px 5px;
}

#sidebar {
  width: 270px;
  padding: 5px 15px;
  float: left;
}

footer {
  clear: both;
  padding: 0 15px;
}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/


/* for 980px or less */

@media screen and (max-width: 980px) {
  #pagewrap {
	width: 94%;
  }
  #content {
	width: 41%;
	padding: 1% 4%;
  }
  #middle {
	width: 41%;
	padding: 1% 4%;
	margin: 0px 0px 5px 5px;
	float: right;
  }
  #sidebar {
	clear: both;
	padding: 1% 4%;
	width: auto;
	float: none;
  }
  header,
  footer {
	padding: 1% 4%;
  }
}


/* for 700px or less */

@media screen and (max-width: 600px) {
  #content {
	width: auto;
	float: none;
  }
  #middle {
	width: auto;
	float: none;
	margin-left: 0px;
  }
  #sidebar {
	width: auto;
	float: none;
  }
}


/* for 480px or less */

@media screen and (max-width: 480px) {
  header {
	height: auto;
  }
  h1 {
	font-size: 2em;
  }
  #sidebar {
	display: none;
  }
}

#content {
  background: #f8f8f8;
}

#sidebar {
  background: #f0efef;
}

header,
#content,
#middle,
#sidebar {
  margin-bottom: 5px;
}

#pagewrap,
header,
#content,
#middle,
#sidebar,
footer {
  border: solid 1px #ccc;
}

The result of this HTML and CSS is the responsive column layout shown below. As you can see in the "MEDIA QUERIES" section, column width, font size, and other page attributes are adjusted based on the size of the screen that is rendering the page.

Responsive Layout Columns

For more information on best practices for media queries, sellers might find the following sites helpful:

How to guide: Using page visit counters

eBay recommends sellers rely on the page views count that is shown in the seller view of the View Item page. An example of this page is shown below:

Page Views Counter

Features/elements that should not be embedded in listing descriptions

The item description of the listing is designed to provide the buyer information about the item listed, and information which will help the buyer complete the transaction.

eBay recommends sellers not include information not directly related to the item in the item description. Unrelated. The following are some examples of unrelated information and if you are using active content to display this information you should discontinue its use:

  • Embedded buyer feedback: some sellers embed buyer feedback for recent transactions, like below:
    Embedded Buyer Feedback

  • Embedding feedback in the listing is not necessary, as feedback on the seller is already easily accessible from the Seller information box of the eBay listing. Buyers only need to click on the seller's Feedback Score in that box, and the following Feedback Profile page will load:

  • Feedback Profile Page
  • Other examples of unrelated content that should not be included:
    • Currency conversion widgets: some sellers embed currency converters widgets in their listings. This is no longer necessary as eBay will always perform currency conversion for buyers and sellers when necessary.
    • Social sharing icons: including links in your listing to social media sites is actually not allowed by eBay. See eBay's Links policy document for more information. Fortunately, eBay already has Facebook, Twitter, and Pinterest sharing icons at the top of all eBay listings.
    • iframes: per eBay's HTML and JavaScript policy, iframes in any form are not allowed in eBay listings.

Frequently Asked Questions

Will eBay support externally-hosted CSS?
Links to external CSS will be allowed. However, if the external CSS contains any script tags or active content, that would be blocked. For page performance reasons, we do not recommend externally-hosted CSS.
Will I still be able to brand/personalize my store/listing?
Sellers will still be able to brand and customize their storefront and listings, but they will have to do so without active content. With the help of HTML and CSS, many of the same branding elements can be incorporated without using active content.
What kind of active content will be blocked?
JavaScript, Flash, Plug-ins and form actions will be blocked.
Will eBay Stores be affected by this change?
Yes, eBay will restrict active content for Stores along with listings in 2017.
Will links to YouTube videos in listings and stores be allowed?
Currently, links to YouTube and other externally hosted video sites is not allowed. We are working on a solution though the timing on this is yet to be determined.
For sellers looking to customize their item description and overall View Item page, will eBay provide guidance on what HTML is supported/allowed?
We will publish best practice guidelines for creating item description content. For certain capabilities, we will share best practice code for how to achieve that experience. In other cases, we will recommend seller to use certain features.
When can we expect more details?
In the 2016 Fall Seller Update, we will be discussing the launch schedules of specific product features that will be used to raise awareness to impacted sellers through listing guidance tools. This best practice guide will also be periodically updated with additional resources and details.
Will there be any exceptions where active content will be allowed in item descriptions?
No. There will be no exceptions regarding allowance of active content in item descriptions. More information on timing will be shared starting with the 2017 Spring Seller Update.