Template Editing - ebay

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

Prerequisites

Templates are edited via the Shopify template editor. Shopify Lite doesn't support template editing at the time of writing this article, so customizing templates is not supported for merchants subscribed to Shopify Lite.

Template architecture explained

How to edit the ImageSmart eBay Listing Template

Previewing the eBay template

Preview Button

Preview Page / Open in new browser tab

Template File Location

CSS Files

Refreshing the Preview

Template Variables

Template Frameworks

The template automatically includes the following frameworks, which can be leveraged in your template design:

• Bootstrap v2.3.2 (CSS only)

CSS & JavaScript

Default CSS

Assets contains a file called ebay-styles.css, which contains all the CSS for the eBay templates. 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. The listing is 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 24 images per listing. When the template is executed, the data is injected as follows:

The Image URL

Default Product 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 Marketplace Connect 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 Product Images

Sets

• All of the images are available via the {images} set name.
• Shopify doesn't support tagging of images, so unlike on other platforms, no additional image sets are available
• Shopify doesn't support disabling images on a product, so the set {AllEnabledImages} and {AllImages} sets are the same as the {Images} set. 

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

Marketplace Connect 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.

Referencing additional template media

Place your additional media such as images in the Assets section of your Shopify theme and reference them via your site URL.

Additional template media

Additional template images can be added to the Assets section of the Shopify template. Prefix the filename with ebay- (e.g. ebay-highight.jpg). The ebay- prefix signals to Marketplace Connect to synchronize the file. The prefix is dropped. 

Referencing the image is done as follows:

{CDNURL}/ebay/highlight.jpg

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 publish to ebay button from the preview template area. 

New templates will not be available to select in single or bulk-edit mode 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.

Marketplace Connect 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>