Template Editing - Shopify

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

Template architecture explained

The Codisto Marketplaces 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:

  • Product 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

How to edit the ImageSmart eBay Listing Template

The powerful live preview of the Marketplace Connect 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. 

Screenshot_2017-06-24_23.03.41.png

Preview Tab / Open in new browser tab

Click the Screenshot_2017-06-24_23.04.20.pngbutton to open the preview and the template code in two new browser tabs. You can bookmark the Preview URL to return to the preview in the future. The Preview Tab is the most convenient way of reviewing your edits.

Note: You may need to set your browser to allow the new tabs if it is blocking popups.

Screenshot_2017-06-24_23.05.25.png

Editing the listing templates

Template File Location

The template files are located in your Shopify theme, which can be accessed as follows:

  1. Click Online Store under Sales Channels
    Screenshot_2017-06-24_22.54.28.png
  2. Click Themes
    Screenshot_2017-06-24_22.56.30.png
  3. Click Customize Theme
    Screenshot_2017-06-24_22.55.43.png
  4. Click the More Actions drop-down under the theme name
    Screenshot_2017-06-24_22.57.35.png
  5. Click Edit Code

You can also access the editor via the Preview panel.

Screenshot_2017-06-24_22.59.08.png

You will find the default eBay template under Snippets named ebay-default.liquid.

Screenshot_2017-06-24_23.10.21.png

Additional eBay Listing Templates

Any file with a name starting with ebay- and .liquid extension placed into Snippets will be available as a template choice.

CSS Files

The /Assets section contains the following files:

  • ebay-styles.css
  • ebay-bootstrap.css

It is possible to make extra assets available to the template. For example to create a custom style sheet called my-style.css just add an Asset called ebay-my-style.css. It can then be accessed in the template as {CDNURL}/ebay/css/my-style.css?noless. The asset needs the ebay- prefix so it is synchronized. The ebay- prefix isn't used when referencing the file.

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

Screenshot_2017-06-24_23.06.33.png
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

Screenshot_2017-06-24_23.07.36.png

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.

Navigating to the template editor

Screenshot_2017-06-24_23.08.12.png

 

Template Variables

Variable Purpose
ProductID The Unique MarketPlace Connect Product ID. Not to be confused with the Listing ID or any identifier in WooCommerce. 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
  • Freight
  • Calculated
FlatFlat rate shipping as defined via XpressGrid. The rate is in the FlatRateShipping variable. The default template displays Flat with FlatRateShipping of 0 as Free.

Freight

Uses shipping rates defined in WooCommerce. The default template shows a freight calculator widget, which calls back to WooCommerce when a buyer enters their post code in the listing.

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:
  • Days_3
  • Days_7
  • Days_14
  • Days_30
  • Days_60
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:
  • MoneyBack
  • Exchange
  • MerchandiseCredit
EbayShippingCostPaidByOption Refers who pays return shipping according to the Seller's return policy for the product. Possible values are:
  • Buyer
  • Seller
EbayReturnPolicyDescription Contains the return policy HTML for the product
EbayUserID Contains the Seller's eBay ID
MerchantName Name of the merchant as registered with MarketPlace Connect
EbayItemID Contains the eBay Item ID 
MerchantURL Contains the URL to the WooCommerce website
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 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. 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 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

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

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.

<a href="http://codisto.com/" rel="eBay integration" target="_blank"><span> eBay integration</span></a> by
<br><a href="http://codisto.com/" rel="eBay integration" target="_blank"><img src="{CDNUrl}/images/codisto-connect.png?width=200&nostretch&v=1" /></a><br>