In this article:

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

New vs. Classic Templates

Listing Design 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.

In the screenshot below, the Shoes Catalog is a new template, where Electronics is "classic".

How to create custom CSS style code for a listing design

Note: Templates labeled "Classic" do not support the following feature.

Whether you are a master at HTML/CSS or don't know what that means, we have you covered. If you don't know how to code, just follow this first part and skip to Option 2.

First, view only the listing description

  • Apply the design to an active listing.

  • Paste the URL below into a new browser tab to view only the listing description.

Replace "ITEM_ID" with your Item ID:

Option 1 - Use dev tools

If you are comfortable using a browser dev tool's "inspect" feature and writing CSS,

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

  • Plugins such as this one can assist with live custom CSS.

Option 2 - Have a plugin write the code for you


  • Install this plugin.

  • Open it (while viewing the listing description URL from above) and design until your heart's content:

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

  • Proceed to Option 2 and in the "How to install custom code" section below.

How to install custom code into new Listing Designer templates

Note: Templates labeled "Classic" do not support the following feature.

Option 1 - Code View

Add custom code to the content blocks with Code View.

Option 2 - Install code into a template's header/footer

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

  • Select the HTML/CSS tab.

  • Paste the code in the appropriate field.

If pasting custom CSS style code

  • Type the following in the Start of Template input:



  • Then, paste your CSS style code between the <style> tags.

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":

  • Proceed to the next section for a quick overview of the HTML editor.

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?