Skip to main content

Can I use VS Code to edit the HTML for my Pulse Commerce site? (WYSIWYG)

Updated

Pulse Commerce includes built-in WYSIWYG and Source Code Editors that allow you to update most storefront content directly within the platform. For merchants or developers who prefer working in a full-featured code editor, a very popular option is: Visual Studio Code (VS Code).

VS Code is a modern, free, cross-platform editor that supports HTML, CSS, JavaScript, extensions, syntax highlighting, auto-complete, and optional live preview tools—making it ideal for editing custom HTML before pasting it into Pulse Commerce.

Why Use Visual Studio Code Instead of Dreamweaver?

  • Free and fully supported (Windows, macOS, Linux)
  • Lightweight and fast compared to Dreamweaver
  • Excellent HTML/CSS/JS editing features
  • Optional add-ons for FTP/SFTP, live preview, version control, etc.
  • No legacy Adobe dependencies

How to Create or Edit HTML Using Visual Studio Code

  1. Install Visual Studio Code
    Download from: https://code.visualstudio.com/ 

    VS-Code-download.png
     
  2. Create a new HTML file in VS Code and add your custom content, such as headers, banners, menus, or custom layout elements. 

    VSCode-with-New-HTMLFile-Open.png
     
  3. Use relative paths for all images and links.
    For example:
    <img src="/images/imagename.png">

    Do not use absolute URLs (such as https://www.yoursite.com/images/file.png) because they can create SSL warnings or break when domains change.
  4. When your content is ready, switch to VS Code’s HTML view and select the code you want to move into Pulse Commerce. 
     

Adding Your HTML into Pulse Commerce

  1. In the Pulse Commerce Admin Panel, go to:
    Content > Logo and Custom Header Editor 
     
  2. Click the View/Edit Source tab to open the Source Editor. 

    Pulse Commerce Source Editor
  3. Remove the old code by selecting and deleting it.
  4. Paste your HTML code from Visual Studio Code into the now empty Source Editor window. 

    Pasting code into Pulse Commerce Source Editor
  5. When finished, click Apply and then OK.
  6. Click Update to save your changes.

Best Practices

  • Use relative paths for images and links.
  • Validate your HTML using tools such as W3C Validator.
  • Avoid inline scripts unless necessary—use HTML/CSS where possible.
  • Test your HTML layout on staging before applying to production.
  • Keep a local backup of your custom header/footer code.

Using VS Code provides a clean, modern development workflow without requiring legacy software like Dreamweaver. If you need help, ensure someone familiar with HTML/CSS reviews your updates before publishing them.

For merchants who still prefer to use  third-party tools such Adobe Dreamweaver, you copy and paste the generated HTML into the applicable WYSIWYG editor windows in Pulse Commerce. 

Important: It is strongly recommended that someone on your staff who is familiar with Dreamweaver, HTML, and web development is called on to accomplish this task.  

The following example provides some general guidelines as to how you can create a custom header using Dreamweaver.  

  1. Open Dreamweaver and create your custom header, inserting your content, images, and links. 

    Important: Be sure to use only relative paths for your images and links. In other words., do not use your domain name in your image and link URLs. If you use absolute paths for images, you will receive security error messages once the SSL is installed. 
     
  2. When finished, go to Dreamweaver's Code view, and copy the HTML in between the <body></body> tags.
     
  3. In Pulse Commerce, go to Content > Logo and Custom Header Editor. 
     

  4. Click the View/Edit Source tab to open the Source Editor.
    226837167-3.png

     

  5. To replace what is in the editor, select the existing code and delete it.
     

  6. Paste the text copied from Dreamweaver in the now empty editor window.

    226837167-4.png

     

  7. When finished making changes, click Apply and then Ok.
     
  8.  To save changes click Update.

Related articles