Listing Themes are product page templates which can be used to layout a page on the marketplace to describe your product (primarily for eBay).
This article describes the various features provided in Listing Themes.
How to create a listing theme
In your ChannelUnity account click on Setup > Listing Themes. You can create a theme based on one of our templates, or create a theme from scratch. Click Create New Theme to create a blank theme, or click on Select Theme From Unity Store to create a theme based on our template.
Active content
ChannelUnity has updated its default listing theme to comply with eBay’s requirements to remove active content such as Javascript, and to also provide a more mobile friendly format.
This is now available in Setup > Listing Themes > Select Theme from Unity Store. It is free to add and can be modified to suit your requirements.
There is an option for a logo of your company, which you can modify by right-clicking on it, then select image properties. The URL of your hosted logo image can then be pasted in. This will not show on mobile devices to cut down on space and speed up loading.
If you do not wish to use a logo you can left click and delete it.
The various policies are taken from the listing setting of your item by default, but you can type in your own data onto the template instead if you wish. The default Shipping policy is purely the shipping method only so it is recommended to change this to be more customer friendly.
To apply the theme to your listings
Once it has been added to your account you can then apply it to your listings by clicking Listings > Manage Listings. Then click Select All, then Actions > Apply Listing Setting/Theme.
After applying, you can then click Select All, then on Actions > Reupload products. This will update your existing listings to the new theme.
Your existing themes will not be affected by our change to our standard template, meaning if no action is taken to replace your existing themes, then they may not comply with eBay’s regulations.
Inserting Product data from your cart into your listing theme
It’s possible to add any product data field as part of your listing theme on eBay. In this example we’ll assume you want to add the Condition of the item.
First edit the listing theme by clicking on Setup > Listing Themes > Pencil icon (edit theme).
Click the cursor on the template where you wish to add the field, when you press enter a new red dashed box will be created.
The most common fields have their own button on the right, but if you select the blue ‘Insert Custom Field’ button you will then be presented with a dropdown of all possible fields:
Select the field you want, Insert the field, and you’ll see it added to the template. Save changes.
If you view the source code (Circled above) and search for your field, you’ll see there is more going on:
The full HTML code for adding the condition field is:
<span data-field="z_condition" data-remove="true" data-type="product" title="Product Condition">{Product Condition}</span> </div>
The {Product Condition} is simply a label and is not enough to add a field.
If you know the name of your field and are confident with HTML, you can use the following code template if you wish, but it is best to add the field through the method detailed above.
Code Template:
<span data-field="z_FIELDNAME" data-remove="true" data-type="product" title="FIELDNAME">{Product FIELDNAME}</span> </div>
Simply replace all instances of FIELDNAME with the attribute name in your cart, and add this code in the Source view.
A cart can have a friendly name, which can use upper case and spaces eg. Special Price. But the name you’d want to use is more of an identifying internal name like special_price
All custom fields in CU use a prefix of z_
The only exceptions to this are SKU, title, description, qty, price, image. In which case where you see z_FIELDNAME in the code template above, you won’t need z_
If you have any questions about the eBay listing theme, please email support@channelunity.com
HTML code elements for Listing Themes
This section describes the code elements which can be added to the HTML of the Listing Theme.
Example
<div data-type="product" data-field="title">{Preview Text}</div>
|
This includes the “title” attribute from the current product. Multiple data-types are available and multiple data-fields are too. All default HTML attributes are supported. Other HTML tags also can be used as placeholders (not only <div> tag):
<h1 data-type="product" data-field="title">{Product Title}</h1>
<span data-type="product" data-field="description">{Product Description}</span>
|
General Attributes
data-type: Type of the data field (product | setting) *required
data-field: Field name of the data type (i.e. title, description, colour) *required
data-remove: Removes tag if value is empty (true | false)
data-remove-parent: Removes parent tag if value is empty (true | false)
data-remove-element: Removes tag by specified id if value is empty (tag id)
data-remove-elements: Removes tags by specified class if value is empty (tags class) – slower than data-remove-element
Specific Attributes
Single Image
data-img: Tag is an image or holds an image (true | false) *required
data-img-link: Displays image as link, works only on image holder tag (true | false)
data-img-link-rel: Sets rel attribute for image link, works only if data-img-link is true
Images Gallery
data-img-gallery: Images gallery holder (true | false) *required
data-img-link: Displays images as links (true | false)
data-img-max: Maximum number of gallery images (int)
data-img-main: Specifies main image field name, compares each gallery image against it (in order not to duplicate it)
data-img-type: Describes images value type (serialized | json)
Setting image sizes
Product image sizes can be set using a CSS rule.
<style type="text/css">
img[alt="image"] { width: 500px }
</style>
This CSS sets the image sizes to 500px in width. The height is automatically set in order to preserve the aspect ratio.
Note that this CSS rule must be set within its own style element.
Example Listing Theme
The following code snippet illustrates what a basic listing theme looks like. This is based on one of the sample listing themes that are provided for free in the Unity Store.
<div class="container">
<div class="header">
<div class="pull-left">
<h1 class="company-name">Your Company</h1>
</div>
<div class="pull-right">
<div class="logo-holder">
<img alt="logo" src="https://s3-eu-west-1.amazonaws.com/listings.channelunity.com/lib/img/logo-placeholder-64.png" />
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="well well-small">
<div class="row-fluid">
<div class="span8">
<h2><span data-field="title" data-type="product" title="Product Title">{Product Title}</span></h2>
<div>
<p data-field="description" data-type="product" title="Product Description">{Product description here.}</p>
</div>
</div>
<div class="span4">
<div class="product-image-holder fancybox" data-field="image" data-img="true" data-img-link="true"
data-img-link-rel="image-gallery-z_media_gallery" data-type="product">
<a href="https://s3-eu-west-1.amazonaws.com/listings.channelunity.com/lib/img/image-square.jpg"
rel="image-gallery"><img alt="logo" src="https://s3-eu-west-1.amazonaws.com/listings.channelunity.com/lib/img/image-square.jpg" /> </a>
</div>
<div class="product-image-gallery-holder fancybox" data-field="z_media_gallery" data-img-gallery="true"
data-img-link="true" data-img-main="image" data-img-max="3" data-type="product">
<a href="https://s3-eu-west-1.amazonaws.com/listings.channelunity.com/lib/img/image-square.jpg" rel="image-gallery">
<img alt="gallery image" src="https://s3-eu-west-1.amazonaws.com/listings.channelunity.com/lib/img/image-square.jpg" />
</a>
<a href="https://s3-eu-west-1.amazonaws.com/listings.channelunity.com/lib/img/image-square.jpg" rel="image-gallery">
<img alt="gallery image" src="https://s3-eu-west-1.amazonaws.com/listings.channelunity.com/lib/img/image-square.jpg" />
</a>
<a href="https://s3-eu-west-1.amazonaws.com/listings.channelunity.com/lib/img/image-square.jpg" rel="image-gallery">
<img alt="gallery image" src="https://s3-eu-west-1.amazonaws.com/listings.channelunity.com/lib/img/image-square.jpg" />
</a>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4" id="return-policy-tab">
<h2>Return Policy</h2>
<div class="well well-small">Return Policy here.</div>
</div>
<div class="span4" id="shipping-policy-tab">
<h2>Shipping Policy</h2>
<div class="well well-small">Shipping Policy here.</div>
</div>
<div class="span4" id="payment-policy-tab">
<h2>Payment Policy</h2>
<div class="well well-small">Payment Policy.</div>
</div>
</div>
<hr />