Skip to main content

Edit, import, and create custom HTML/CSS Listing Designer templates for eBay

How to create and import custom design HTML, or edit the HTML code of a 3Dsellers design template.

Written by Karolina Santiago

3Dsellers gives you full control over your eBay listing descriptions with custom HTML templates. This article covers how to create, edit, and manage custom HTML templates — including the new template editor, the Advanced Editor, and how to edit descriptions directly from the Listings tab.

Pro Tip: Add your web designer as a Teammate to help create or install a design.


In this article:


How to create a Custom HTML Template

Go to Design → Listing Designer → Templates.

At the top of the page you'll see two special tiles:

  • Custom HTML Template — create, import, or edit your own listing template with HTML code

  • AI Template Converter — paste an eBay listing URL or item ID and AI converts it into a 3Dsellers template automatically

Click Custom HTML Template to open a blank Custom Template Editor.

You can also create a new template from Saved Designs by clicking the + Create new HTML template button.

👉 To convert an existing eBay listing into a template automatically: AI Template Converter


The Custom Template Editor

The Custom Template Editor is where you write or paste your HTML code. It includes the following tools:

  • Template Name — give your template a recognizable name

  • Placeholders — opens a full list of dynamic placeholders you can insert into your HTML (title, description, images, item specifics, and more)

  • My Images — browse and insert images from your 3Dsellers image library

  • Import HTML page — paste a URL and click Import to pull in HTML from any webpage as a starting point

  • Find / Replace — search for text in your HTML and replace it in bulk

  • Code editor — write or paste your HTML directly with line numbering

  • Preview panel — enter an eBay Item ID in the Screen field and click Refresh Preview to see how the template looks with real listing data on desktop, tablet, or mobile

  • Advanced Editor — switch to the visual WYSIWYG editor (see below)

  • Migrate from other platforms — a shortcut to import templates from InkFrog, CrazyLister, or other platforms

When you're done, click Save and close — the template will appear in your Saved Designs list.


The Advanced Editor

The Advanced Editor is a full WYSIWYG rich-text editor — no HTML knowledge required. Click the Advanced Editor button in the top-right corner of the Custom Template Editor to switch to it.

Inside the Advanced Editor you can:

  • Edit the template visually using a standard text editor toolbar (fonts, formatting, tables, images, links, etc.)

  • Insert dynamic placeholders from the Dynamic Placeholders panel on the right — organized into Content, Photos, Item Specifics, and more

  • Click the <> (Source Code) button in the toolbar to view and edit the raw HTML at any time

  • Preview the template with the Preview button

  • Save with Save or Save and Exit

💡 Use the Advanced Editor if you're not comfortable with HTML. Use the code editor if you need precise control over the markup.


Managing templates in Saved Designs

Go to Design → Listing Designer → Saved Designs to see all your custom HTML templates in a table with the following columns:

  • Design name — click to open and edit the template

  • Advanced Editor — indicates if the template was last edited in the Advanced Editor

  • Created at / Last design edit — timestamps

  • Template name — the name used when applying to listings

The Actions column on the right gives you:

  • 👁 Preview

  • ✏️ Rename

  • 📝 Edit (opens the Custom Template Editor)

  • 📋 Duplicate

  • </> HTML Code — view and copy the raw HTML of the template. Before copying, use the Choose your listing tool dropdown to format the HTML for compatibility with your preferred platform. Supported tools include: 3DSellers, Vendo, Volo, Selro, Neto, Ecomdash, SellBrite, ChannelAdvisor, Kyozou, InkFrog, Codisto, SaleFreaks, dShopt, ShopMaster, SixBit, and more.

  • 🗑 Delete

💡 The HTML Code option is useful if you want to use your 3Dsellers template with a third-party listing tool, or manually paste it into listing descriptions outside of 3Dsellers.

From the top of the Saved Designs page you can also:

  • Click + Create new HTML template to start a new one

  • Click Choose template to pick from 3Dsellers' pre-made visual templates

  • Click AI template converter to convert an eBay listing URL into a template


Editing a listing description directly

You can edit the description of any individual active listing without opening the full listing editor. In Listing Designer → Listings, click the Edit Description button (document icon) in the Actions column for any listing.

This opens a lightweight description editor with:

  • Search and replace text — find text in the description and replace it

  • Rich-text editor — edit the description visually

  • Source Code button (<>) — click to view and edit the raw HTML of the description directly

Changes are saved directly to the listing on eBay.


Dynamic placeholders reference

Use these placeholders in your HTML template to automatically pull in each listing's real data when the template is applied:

Content

  • {title} — listing title

  • {sku} — SKU

  • {description} — product description

  • {upc} — UPC barcode

  • {ean} — EAN barcode

  • {isbn} — ISBN

  • {mpn} — manufacturer part number

  • {brand} — brand name

  • {condition} — item condition

Photos

  • {image[0]} — primary photo URL

  • {image[1]} through {image[23]} — additional product photo URLs

Item Specifics

  • {itemspecific[0].key} — item specific label (e.g. "Brand")

  • {itemspecific[0].value} — item specific value (e.g. "Unbranded")

  • {itemspecific[Brand]} — value of a named item specific (replace "Brand" with the actual name)

Product Catalog Custom Attributes

  • {catalog-custom-attributes[attribute-name]} — replace "attribute-name" with your custom attribute name

Suggested Items

  • {suggested-items-columns[COLUMNS]-max[MAX_ITEMS]-TYPE} — cross-promotion grid

  • COLUMNS: 2, 3, 4, 6, 8, 12, 18 | MAX_ITEMS: 4, 6, 8, 12, 14, 16 | TYPE: ebay-categories, store-categories, random-categories

  • Example: {suggested-items-columns[6]-max[12]-ebay-categories}

Gallery

  • {product-gallery-layout-left-product-gallery} — gallery with controls on the left

  • {product-gallery-layout-right-product-gallery} — controls on the right

  • {product-gallery-layout-top-product-gallery} — controls on the top

  • {product-gallery-layout-bottom-product-gallery} — controls on the bottom

Gallery with Specifics

  • {product-gallery-layout-left-with-specifics-product-gallery} — gallery + item specifics on the left

  • {product-gallery-layout-right-with-specifics-product-gallery} — gallery + item specifics on the right


Avoiding duplicate descriptions

A common issue when using listing templates is duplicated descriptions. This happens when your template includes the {description} placeholder and the listing also has description text entered manually.

  • If your template includes {description} — do not add description text directly inside the template. The placeholder will pull in each listing's own description automatically.

  • If you prefer to write the description directly inside the template — remove the {description} placeholder to avoid duplication. Keep in mind that this description will be the same across all listings that use this template. This works well if you have a shared description that applies to all your products (e.g. store policies, brand story, disclaimers), but is not suitable if each listing needs its own unique description.


How to Insert Custom HTML/CSS into a 3Dsellers Pre-Made Template

If you're using one of the 3Dsellers pre-made visual templates and need to insert custom HTML/CSS into it, there are two ways to do it.

Option 1 — HTML Code view (from Saved Designs)

In Saved Designs, click the </> HTML Code button for any visual template. From this modal you can view, copy, and edit the full generated HTML of the template. You can then save it as a new Custom HTML Template to modify it at the code level.

⚠️ Editing a visual template's full HTML converts it into a Custom HTML Template — you will no longer be able to edit it in the visual drag-and-drop editor.


Option 2 — HTML Block

Drag an HTML block from the Content panel on the right side of the editor onto your canvas. Click the block to select it, and a code editor will appear in the right panel where you can write your HTML directly.

This is the recommended approach — it lets you place custom code exactly where you need it within the template layout, with separate Desktop and Mobile views.


Related articles

Did this answer your question?