Best practices for replacing active content

In 2017, eBay will limit the use of active content in all new listings. Here's how to prepare for this change

Overview

As described in the 2016 Spring Seller Update, the use of active content in listings, including JavaScript, Flash, plug-ins and form actions, inhibits purchases on mobile devices and can lead to abuse in the marketplace.

Beginning with the 2017 Spring Seller Update, eBay will limit the use of active content in all new listings across all devices, and it will not be rendered as default. By the 2017 Fall Seller Update, we plan to remove or block new and existing listings (e.g. Good 'Til Cancelled listings) and eBay Store pages with active content.

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'll provide more information in the 2016 Fall Seller Update about when each type of functionality will be limited or blocked, and provide the specific timing by early 2017. We're also working closely with our third-party partners in cases where they use active content on your item descriptions or in stores.

Active content preview feature

Later in April, eBay will provide a feature that allows a seller to toggle between previewing their listing with and without active content enabled in their listing description. This will allow sellers to see the difference between the two (active vs. no active content) and will assist the seller in optimizing the listing across all devices. The screenshot below demonstrates this new feature:

Alternatives to using active content

This best practice guide covers the most common use cases where a seller might use active content in their listings, and follows up with recommended best practices to replace the use of active content for each use case. In all cases, by removing active content, sellers will get the benefits of faster-loaded listings that are enhanced for viewing on mobile devices.

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

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

Best practice for cross-merchandising

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:

eBay recommends using the upcoming merchandising widget that will allow sellers to cross-sell related items without tying them to a discount. The availability for this widget will be announced in the Fall 2016 Seller Update.

Another alternative for sellers—with or without eBay Stores—is to create a static widget in the listing that contains links to related items (fixed price or Good 'Til Cancelled only), search queries, or Store categories.

Best practice for implementing newsletters

Some sellers embed company or Store newsletters, product coupons, discounts, or sales events in their listings. eBay recommends mentioning that sellers mention that a newsletter is available in their eBay Store, and include a link to the Store.

Best practice for implementing eBay Store search

Sellers will often include a search box in their listings, so buyers can search their eBay Store. eBay recommends that 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. An example of the resulting search box is below:

Another option for sellers is to suggest that buyers browse or search their Store, and create a link to their Store where searches for the seller's items can be performed.

Best practice for creating tabbed panes in listings

Some sellers currently use active content to create their own tabbed panes to allow buyers to toggle between shipping details, acceptable payment methods, return policy, and so on. An example is shown below:

eBay recommends that sellers use the standard 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, and so on.

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 HTML and CSS being used to create a four-tab pane. This code is input into the item description at listing time.


  • Expand to view code

    <! -- 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.

Best practice for creating image galleries

Some sellers create their own image gallery or carousel in the listing for their product, like the ones shown below for both desktop and mobile:



eBay recommends that sellers use eBay's robust picture and gallery features. Sellers can include up to 12 pictures (up to 24 for eBay Motors listings) in their listing for no extra charge.

For sellers who want to create their own image carousel in their listing, it's possible to do this using HTML and CSS. Below is one example of how HTML and CSS code can be used to achieve this. This code is placed in the Item Description. Please note that including a custom image carousel in the listing is not recommended.


  • Expand to view code

    <!-- HTML Code -->
    
    <header>
    <div><img src="https://ir.ebaystatic.com/pictures/aw/pics/s.gif" alt></div>
    <div><img src="https://ir.ebaystatic.com/pictures/aw/pics/s.gif" alt></div>
    <div><img src="https://ir.ebaystatic.com/pictures/aw/pics/s.gif" alt></div>
    <div><img src="https://ir.ebaystatic.com/pictures/aw/pics/s.gif" alt></div>
    <div><img src="https://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 <div> tags above.

Best practice for including a product video

Some sellers embed product videos in their listing. eBay recommends the following alternatives for sellers:

  • 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 the 2016 Fall Seller Update.

It's also a good idea for sellers to read eBay's Links Policy document for more information on restrictions and requirements for videos in listings.

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

Best practices for specifying freight shipping rates

The seller does 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, and whether the seller needs special help to prepare the item for shipping.

Best practice for implementing responsive design

eBay recommends using HTML and CSS to detect browser and device type in order to customize design and layout. Below is one example of how HTML and CSS can be used to control column width and behaviour based on browser and device type. This code is placed in the Item Description.


  • Expand to view code

    <!-- 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 code 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.

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

  • W3 Schools: Responsive Web Design Introduction
  • Google Developers: Responsive Web Design Basics
  • Best practice for using page visit counters

    eBay recommends that sellers rely on the page views count that is shown in the seller view of the View Item page, as seen below:

    Features and elements that should not be embedded in listing descriptions

    The Item Description of a listing is designed to provide the buyer with information about the item listed which will help them complete the transaction. eBay recommends that sellers discontinue the use of active content in Item Descriptions to implement the following features or elements in listings:

    • 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 need only click the sellers feedback score to load the Feedback Profile page.
    • Currency conversion widgets: 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 not allowed by eBay. Fortunately, eBay provides Facebook, Twitter, and Pinterest sharing icons at the top of all eBay listings. See eBay's Links Policy for more information.
    • iFrames: As 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 externally-hosted CSS will be allowed. However, if the external CSS contains any script tags or active content, it will be blocked. For page performance reasons, we do not recommend externally-hosted CSS.

  • Will I still be able to brand or personalize my Store or 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 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. We will provide more specific guidance for Stores in the 2016 Fall Seller Update.

  • 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, and the timing is yet to be determined.

  • Will eBay provide guidance on what HTML is supported or allowed?

    Yes, eBay 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 that sellers 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 the allowance of active content in Item Descriptions. More information on timing will be shared starting with the 2017 Spring Seller Update.