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:
applying the design to an active listing,
then view only the eBay description in your browser for easier editing.
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.
Open the template preview, or view only the eBay description.
Use dev tools (Ctrl+Shift+i) to collect class names and test CSS.
Option 2 - Have a plugin write the code for you
Install this extension.
Open it while viewing only the listing description:
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
