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 Codisto LINQ ImageSmart template system is architected differently to some other template systems (including M2Epro).

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 in fully compliant with eBay listing policies. 
• All listing template assets can be loaded into the Magento design folder.  This removes dependency on template design companies to maintain asset hosting for continued listing fidelity after the one off design work has been completed.  Some design companies charge ongoing fees for this which is unnecessary when using Codisto LINQ.

How to edit the ImageSmart eBay Listing Template

The powerful live preview of the Codisto LINQ 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. 

Preview Tab / Open in new browser tab

Click the  button to open the preview in a new browser tab. You can bookmark this URL to return to the preview in the future. The Preview Tab is the most convenient way of reviewing your edits.

Editing the listing templates

Template File Location

The template files are located in: <MAGENTO_BASE_DIR>/app/design/ebay

Any file with a .html extension placed into that directory will be available as a template choice.

CSS Files

The /css directory contains the following files:

• bootstrap.css
• styles.css

Refreshing the Preview

When changes are made to the template files, click the Refresh Button in the Preview Tab to see the effect of the changes.

Previewing Multiple Listings

Click the + button in the toolbar of the Preview Tab to add extra listings to the Preview. This makes it possible to see the effect of template changes on various settings without the need to switch between products or change settings. 

Committing your edits

Click the publish 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

{format eBayPrice, eBayCurrency}
			

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

<MAGENTO_BASE_DIR>/app/design/ebay/css 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 Codisto LINQ 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

• Any Images that do not contain any Magento Image labels are contained in a set that is referenced via the {images} set name.
• Any images that do contain labels (such as testimages) can be referenced by the equivalent set name. e.g {testimages}.
• To include images that are not excluded, use the set name {AllEnabledImages}
• To include all images, use the set name {AllImages}
• To include all Enabled images that have been specifically labelled as 'gallery', use the set name EbayImages. e.g {EbayImages}. 

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

Publishing your template

It is important to commit your template (either for adding new templates or changing existing templates).  You do this by clicking the white eBay button from with the preview template area. 

New templates will not be available to select in XpressGrid until committed.  Changes to existing templates will not take effect until committed.

It is this way, to allow previewing significant template changes without impacting listings.  This way you have control over when to apply the changes.

If you have blank descriptions, please see " I have created a new template but my listings have blank descriptions", which goes into more detail of what happens if you don't.

Codisto Attribution

Per our Terms & Conditions, it is a requirement to have the following attribution in the footer of your custom template.

<div class="pull-right logo">
 <span class="muted"> eBay integration</span> by
 <img class="baseline" src="{CDNUrl}/images/codisto-connect.png?width=200&amp;nostretch&amp;v=1" />
</div>