All Collections
LISTING DESIGNER
Customizing & Designing Templates
Edit, import, and create custom HTML/CSS Listing Designer templates for eBay
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.

Lisa Adams avatar
Written by Lisa Adams
Updated over a week ago

In this article:

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


New vs. Classic Templates

New:

  • eBay Listing Designer templates that are not labeled "(Classic)" allow for many advanced features (such as automatic cross-promotion).

  • One of these features is the ability to insert custom code into the template.

Classic:

  • (Classic) templates are "out-of-the-box ready" with simplified editing features.


How to install custom code into New Listing Designer templates

Option 1 - Code View

  • Add custom code to the content blocks with Code View.

  • Note: code view automatically formats HTML and CSS.

Option 2 - Header/footer

  • In the top-left corner of the template editor, click the Settings button.

  • Select the HTML/CSS tab.

Option 3 - Individual Blocks

  • Many content blocks include a custom code setting to place code where you need:


How to create custom CSS style code for a listing design.

Whether you are a master at HTML/CSS or just starting, we have you covered.

Both of these options will require you to create, copy, and ^paste your custom code into the template editor.

Before continuing, you may consider:

  • Pro Tip: set the listing to zero quantity to prevent searching buyers from seeing the listing while you edit.

Option 1 - Use dev tools

  • Download an extension such as this one so you can write live CSS.

  • Use dev tools (Ctrl+Shift+i) to collect class names and test CSS.

Option 2 - Have a plugin write the code for you

  • When satisfied with your edits, click the Code button at the bottom of the plugin to select and copy your code:


How to edit 3Dsellers' classic design template code

Please note that this method will remove the ability to edit the template in the visual editor. After editing a "classic" template's code, you can only use the HTML editor to make changes.

  • After saving a design, visit your Saved Designs and click on the code (</>) button:

  • In the pop-up window, click "Edit":

  • When you are finished editing, copy the code and paste it into a new Custom HTML Template.


Create and import custom HTML listing design templates

  • In the Listing Designer's Create Design tab, click the "Custom template" tile:

  • Delete, edit or paste HTML code in the editor.

  • Use the Refresh Design button to view your changes.

  • To display the description and product data for the listing, use these dynamic fields accordingly:

    • {title} - the listing's title

    • {description} - the listing's description

    • {image[0]} {image[1]} {image[2]} and so on for featured image URLs

Did this answer your question?