This guide assumes knowledge of HTML and CSS and is written for web developers. If you are not familiar with these concepts please refer your web developer to this guide.
We do not recommend merchants edit their own templates. We do not provide HTML or CSS support. However, we will provide support for tag specific questions.
Index
- How to edit the ImageSmart eBay Listing Template
- Previewing the eBay Listing
- Editing the Listing Templates
- Template Variables
- Template Frameworks
Template architecture explained
The Xpress Lister ImageSmart template system is architected differently to some other template systems.
Please take a moment to understand the Codisto architecture and the benefits of our approach:
- Images are hosted on CDN (Content Delivery Network) which speeds up the loading of listing templates regardless of eBay buyer geography.
- CSS is embedded which makes it fully compliant with eBay listing policies.
How to edit the ImageSmart eBay Listing Template
The powerful live preview of the Xpress Lister plugin accessible via XpressGrid makes template editing simple. Just edit the template files as outlined in this article to see the effect in the preview.
Previewing the eBay Listing
Preview Button
When any product is selected a Preview button will appear from the right of the grid.
Preview Panel
Click the Preview button to display the Preview Panel. The Preview Panel shows the currently selected product rendered with the selected template. Any changes made to the product will be updated automatically.
Editing the listing templates
Open the Template Editor
Click the eBay Avatar at the top right of your Xpress Lister screen, then lick the Template menu item.
Editing the template files
When you first open the template editor, you will see the template source code for the default template.
Other template files
Other files are accessible via the template tree on the right of the template editor page. Click a file top view it in the editor.
Committing your edits
Click the Save button to commit your template changes. All eBay enabled products with the edited template selected will automatically have their listings updated with the changes.
Template Variables
| Variable | Purpose |
| ProductID | The Unique Xpress Lister Product ID. Not to be confused with the Listing ID. It is used together with CDNURL to access product images. |
| Title | The Title of the Listing as set via the eBay Title column in XpressGrid. |
| EbayDescription | The product description |
| EbayShippingType |
The shipping type selected. Possible values are:
Flat Flat rate shipping as defined via XpressGrid. The rate is in the FlatRateSHipping variable. The default template displays Flat with FlatRateShipping of 0 as Free.
Calculated Uses eBay’s Australia Post calculated rates. The default template refers the buyer to the shipping tab in the listing. |
| FlatRateShipping | If EbayShippingType is Flat, this variable contains the flat rate shipping amount |
| ExpressShipping | Whether or not Express Shipping is enabled. The value will be 0 if off or a non 0 number if on. Using an {if ExpressShipping}{/if} condition caters for these possible values. |
| ExpressShippingCost | The cost for Express Shipping. May contain a value even if ExpressShipping is disabled, so it should only be conditionally displayed. |
| ReturnsAccepted | Whether or not returns are accepted. The value will be 0 if off or a non 0 number if on. Using an {if ReturnsAccepted}{/if} condition caters for these possible values. |
| ReturnsWithin |
Contains the returns days constant. Can be one of the following values:
May contain a value even if ReturnsAccepted is disabled, so it should be conditionally displayed. |
| RefundOption |
Contains the refund option constant. Can be one of the following values:
|
| EbayShippingCostPaidByOption |
Refers who pays return shipping according to the Seller’s return policy for the product. Possible values are:
|
| EbayReturnPolicyDescription | Contains the return policy HTML for the product |
| EbayUserID | Contains the Seller’s eBay ID |
| MerchantName | Name of the merchant as registered with Xpress Lister |
| EbayItemID | Contains the eBay Item ID |
| MoneyOrderAccepted | Whether or not Money Order is accepted for payment. The value will be 0 if off or a non 0 number if on. Using an {if MoneyOrderAccepted}{/if} condition caters for these possible values. |
| DirectDepositAccepted | Whether or not Direct Deposit is accepted for payment. The value will be 0 if off or a non 0 number if on. Using an {if DirectDepositAccepted}{/if} condition caters for these possible values. |
| PickupOption | Whether or not pick up in store is offered. The value will be 0 if off or a non 0 number if on. Using an {if PickupOption}{/if} condition caters for these possible values. |
| ProductCode | Contains the code of the product |
| CDNURL | The CDN (Content Delivery Network) URL for the account. All media is served via this URL. |
| eBaySiteID | The eBay Site ID of the listing. Use this to show content conditionally based on which eBay site the listing is published on. See eBay Site ID to Global ID Mapping for a list of eBay Site IDs |
| BundleQuantity | For listings where a purchase is for multiple items such as a case of wine, this contains the quantity the buyer will receive for each one purchased. |
| eBayPrice | The price from the eBay Price column of the XpressGrid Note: When rendering this value in the template it should be formatted using the eBayCurrency like: {format eBayPrice, eBayCurrency}
This will ensure the appropriate currency symbol and number of decimal places is displayed. |
| eBayCurrency | The currency of the listing |
Template Frameworks
The template automatically includes the following frameworks, which can be leveraged in your template design:
- Bootstrap v2.3.2
CSS & JavaScript
Default CSS
The css folder in the file browser of the template editor contains a file called styles.css, which contains all the CSS for the default template. It can be modified to suit your requirements. If you are not using the default template, you can replace the existing styles with your own.
Referencing hosted CSS
It is possible but not recommended to reference externally hosted CSS. eBay have strict policies against external links. Even though externally referenced CSS isn’t included for the purpose of driving traffic off eBay, the listing is still at risk of being ended for violating the policy.
JavaScript
From June 2017 eBay is blocking Active Content, which rules out the use of JavaScript. Our default template is fully active content compliant and makes no use of JavaScript.
Images
eBay allow up to 12 images per listing. When the template is executed, the data is injected as follows:
The Image URL
Default Image
{CDNUrl}/productimages/{ProductID}.png?width=800&etag={etag}
{CDNURL}
All images are hosted on CDN (Content Delivery Network) to ensure fast, reliable serving. The {CDNURL} tag injects the specific URL for the Xpress Lister account.
{ProductID}
The ID of the product
{etag}
To ensure that caching is bypassed if the image changes, the {etag} tag is added to the Query String.
Additional Images
Sets support if and for operations.
{if count(images) > 1}<hr/>{/if}
In the default template, a horizontal line is added if there is more than 1 image.
{for images step=4}
<div class="row">
... inner loop ...<br></div>
{/for}
The outer for loop iterates over the images 4 at a time, to display 4 per row.
{for Images count=4 start={position}}
<div class="span2"><a class="image fancybox" href="{cdnurl}{images.src}&width=200&height=200&nostretch"><img src="{cdnurl}{images.src}&width=200&height=200"/></a></div>
{/for}
The inner loop iterates over 4 images in the {images} set, starting at {position}, which is the current position in the outer loop.
{images.src}
The {images} set has a src property, which is the preassembled source of additional (non default) images. It contains a reference to the image sequence.
{AllEnabledImages.Tag} {AllImages.Tag}
The AllEnabledImages and AllImages sets have a ‘Tag’ column which will contain the value of the label (which can also be used as template conditions).
width, height & nostretch Query String parameters
The Codisto CDN automatically resizes images based on the width and height passed in pixels. Pass nostretch if you want to maintain the image aspect ratio within the bounds of the width and height specified.