This is a guest blog post from Andrew Pinner at Frooition.

eBay announced in its Spring 2016 Seller Release that it will be putting a stop to the use of Active Content – JavaScript, Flash, Form Actions and plug-ins – within eBay listings.

The reason for this imminent ban being that active content inhibits purchases on mobile devices, and further poses potential security risks.

From Spring 2017, eBay will limit the use of this content in new listings and by Autumn 2017, eBay will block and remove new and existing listings. This means that sellers with active content will need to update their listings to become compliant with eBay’s new rules.

Ultimately, eBay has made these changes for the good of the buyer, making listings safer and more usable on mobile devices. And, if a change is good for buyers then ultimately it is great for sellers as they will continue to grow their business. 

See also: Selling On eBay – How To Grow A Successful eBay Business

Frooition, an eBay certified provider of design, has updated its services so that all of its eBay designs are now Active Content Compliant.

Below, the team has put together some best practice hints and tips to help sellers create an Active Content free design. Typical elements that utilize Active Content (such as flash or JavaScript) include:

• Videos in listings
• Image galleries
• Store categories in listings
• Tabs in listings

Videos in Listings.

The use of videos in your listings can really help to sell your items.

Typically, sellers use a video hosting service such as YouTube or Vimeo, however these services currently use Flash objects to display video in eBay listings (as the use of iFrames has already been stopped on eBay).

While Flash video will be banned in active content compliant designs, HTML5 video will be allowed. For most, this means uploading an MP4 video to some hosting space and pulling a very simple tag into your listing HTML:

<video width=””600”” height”400”=”” autoplay>        </video>

<source src=”http://pathtoyourvideo.com/video.mp4″ type=”video/mp4″>

HTML5 video is widely supported across most modern browsers, but crucially it is compatible with most smart phones, both in browser and on the eBay Apps.

At present, there is no solution for YouTube videos, although eBay expect to provide more information regarding this in the Autumn 2016 Seller Release.

Image Galleries.

eBay recommends using the built-in eBay gallery to display all of your images at the top of a listing on desktop. This also applies on mobile as they will display before the user clicks to view the product description.

Frooition’s designs replicate the eBay gallery into the description, bringing the images nearer to the description to save scrolling or the need to click back.

It is possible to build galleries in pure HTML and CSS, however we recommend leaving this to the professionals, as it creates a big opportunity to break your listings.

Instead, we recommend that you show your images in a list, with a maximum width of 100%. This way they will scale down nicely on smaller screens:

<img src=””path-to-image-1.jpg”” style=””max-width:100%””><br>

<img src=””path-to-image-2.jpg”” style=””max-width:100%””><br>

<img src=””path-to-image-3.jpg”” style=””max-width:100%””><br>

Store Categories in Listings.

As a certified provider, Frooition fetches categories from the eBay API, however we see many sellers coming to us with listings that pull in the category tree using AJAX and JavaScript.

This means that they are loading the eBay store, and pulling out the categories from that to display on each listing. This is a bad idea as it really slows down the listing’s loading time and does not comply with, and subsequently will not work with the new Active Content free listings.

Frooition has built unique technology to ensure that categories will still work in listings without the need for Active Content. What’s more, the company’s categories are dynamic, meaning that any changes made to the category tree will automatically update all live listings.

Without the use of a Frootion design, eBay recommends using the eBay listing frame around the design, to display all categories.

Tabs in Listings.

Many eBay sellers use tabs in their listings to cut down the size of the listing, without reducing content. While a lot of these tabs rely on JavaScript to function, Frooition’s tabs use HTML and CSS, and are therefore Active Content Compliant.

To create your own active content free tabs, use the following code:

<style></style>

.tabs{

font-family:Arial, Helvetica, sans-serif;

}

.tabs .tabcontent{

  display:none;

  padding:20px 0 0;

  border-top:1px solid #ddd;

}

.tabs input{

  display:none;

}

 

.tabs label{

  display:inline-block;

  margin:0 0 -1px;

  padding:15px 25px;

  font-weight:600;

  text-align:center;

  color:#bbb;

  border:1px solid transparent;

}

 

.tabs label:hover{

  color:#f00;

  cursor:pointer;

}

 

.tabs input:checked + label{

  color:#000;

  border:1px solid #ddd;

  border-radius:5px 5px 0px 0px;

  border-bottom:1px solid #fff;

}

.tabs #tab1:checked ~ #content1,

.tabs #tab2:checked ~ #content2,

.tabs #tab3:checked ~ #content3{display:block}

<div class=”tabs”></div>

  <input id=”tab1″ type=”radio” name=”tabs” checked>

  <label for=”tab1″>About</label>

  <input id=”tab2″ type=”radio” name=”tabs”>

  <label for=”tab2″>Shipping</label>

  <input id=”tab3″ type=”radio” name=”tabs”>

  <label for=”tab3″>Returns</label>

 

  <div id=”content1″ class=”tabcontent”></div>

     This is About Me content.

 

  <div id=”content2″ class=”tabcontent”></div>

     This is Shipping Content.

 

  <div id=”content3″ class=”tabcontent”></div>

     This is Returns Content.

 

Professional Active Content Compliant Design.

Are you looking for a more professional, Active Content Compliant eBay design? Speak to a Frooition design specialist and see what options are available for your business.