Turning your own HTML design into a template

If you have created or bought your own eBay listing template design, it will just be HTML code but won't have any of the template tags which Xpress Lister will use to populate with dynamic data such as Title, Price, Description, etc. The purpose of this article is to give an overview

Preparation

To get started, you will need the following:

  • An editor suitable for editing web pages
  • Your listing design
  • The default Codisto template for reference

Replace Content with Template Tags

Your template design should have sections for content such as Title, Price and Description. So that Xpress Lister can put the appropriate content into those sections, the placeholder text in your design will need to be replaced with template tags.

Title

Replace the Title in your design with:

{Title}

Price

Replace Price in your design with:

{format eBayPrice, eBayCurrency}

Description

Replace Description in your design with:

{include field="EbayDescription"} 

Main Product Image

The main image is quite easy to do via WYSIWIG editor as you can just replace the image source with:

{CDNUrl}/productimages/{ProductID}.png?width=547&etag={etag}

Change the width in the QueryString to suit the image container width of your design.

Additional Images

Additional images are a little more difficult as it can only be implemented in source code and needs to take into account the HTML markup of the design. The following sample code is from our default template. The CSS classes in the example are for Bootstrap 2, which is what our default template is based on.

{for images}
<a href="#_" class="lightbox" id="img{position+1}">
<div class="close-img">&times</div>
<img src="{cdnurl}{images.src}?width=800&amp;height=600&amp;nostretch">
</a>
{/for}
<div class="clearfix"></div>
{if count(images) > 1}<hr/>{/if}
{for images step=4}
<div class="row image-row text-center">
{for Images count=4 start={position}}
<div class="span2"><a class="image fancybox" href="#img{position+1}"><img src="{cdnurl}{images.src}?width=200&amp;height=200"/></a></div>
{/for}
</div>
{/for}

References

Please see the Template Editing article for a more technical discussion including a full set of available template tags.