Skip to main content

What should I know before starting to add custom HTML, JavaScript, and CSS to help my online store appear as part of my existing website? (WYSIWYG)

Updated

This article explains how to get started with adding custom HTML, JavaScript, and CSS to further customization your customers' Storefront Shopping Experience in Pulse Commerce using WYSIWYG editors. It provides guidance on adding custom HTML, CSS, and JavaScript, using Visual Studio Code (VS Code) (or other editors) to prepare code safely, and best practices to follow before pasting raw HTML into your site.

Applies To: Any Pulse Commerce WYSIWYG (What You See Is What You Get) editor, including the source editors of the Logo and Custom Header editor, Homepage editors, Widget editors, Footer editor, Custom Content Page editors, and any other Pulse Commerce WYSIWYG editor.
ALWAYS BACKUP - save and keep a local backup of the raw HTML code BEFORE your changes, and AFTER your changes.

Yes. You can use your own HTML, JavaScript, and embedded CSS tags inside Pulse Commerce WYSIWYG editors. This makes it possible to align storefront content with the look and behavior of an existing website (for example, custom banners, headers, layout blocks, and embedded widgets).

Important: JavaScript or CSS options will not work if they are placed as the first or last elements in a WYSIWYG editor. There must be some content above and below these tags for the editor to accept them. If needed, nest script/style tags within other tags or add dummy tags above and below for padding.

For merchants with advanced HTML skill sets, Pulse Commerce may provide HTML code examples. You may also use sample code found on the web or code you write yourself. See the “Before You Paste Example HTML Code” section in this article for requirements and risks.

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 popular option is Visual Studio Code (VS Code).

VS Code is a 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 VS Code instead of Dreamweaver?

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

Step 1: Install Visual Studio Code

  1. Download VS Code from: https://code.visualstudio.com/

    VS-Code-download.png
     

Step 2: Create or edit your HTML in VS Code

  1. Create a new HTML file in VS Code and add your custom content (for example: headers, banners, menus, or layout elements).

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

    Do not use absolute URLs (for example: https://www.yoursite.com/images/file.png) because they can cause SSL warnings or break when domains change.
  3. When your content is ready, select the code you want to move into Pulse Commerce.

Step 3: Add your HTML into Pulse Commerce (Source Editor)

  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 VS 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 site before applying to production.
  • ALWAYS BACKUP - save and keep a local backup of the raw HTML code BEFORE your changes, and AFTER your changes.

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

If you prefer third-party tools such as Adobe Dreamweaver, you can 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 performs this work.
  1. Open Dreamweaver and create your custom header, inserting content, images, and links.

    Important: Use relative paths for all images and links. Do not use your domain name in image/link URLs. If you use absolute paths, you may receive security errors after 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 HTML copied from Dreamweaver into the now empty editor window.
    226837167-4.png 

     

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

Pulse Commerce may provide example HTML code for merchants with advanced HTML skill sets. Some merchants may also find HTML sample code on the web or write their own HTML. When using any code examples, you may need to modify the HTML to work with your site.

Best Practice: Save a backup of the existing HTML from your WYSIWYG editor before making changes.

Please be aware that future versions of Pulse Commerce may change or disable some of the functionality provided in code examples. In this event, you will be responsible for creating, removing, or updating your own HTML code and/or making changes to your site.

Support Scope: support@pulse-commerce.com is not trained in HTML and can provide limited assistance for creating, editing, or troubleshooting custom code. If you need assistance, your Pulse Commerce Account Manager can help you order Professional Services.

What this article covers

  • Where custom HTML/CSS/JS can be used in Pulse Commerce WYSIWYG editors
  • Recommended workflow using VS Code (and optional Dreamweaver workflow)
  • How to paste code into the Source Editor for the Logo and Custom Header Editor
  • Best practices and risks of using example HTML code
Summary: For best results, develop and validate code in VS Code, use relative paths, back up existing content, and paste changes into Pulse Commerce using the Source Editor. Custom code is merchant-owned and may require ongoing maintenance as the platform evolves.
 
ALWAYS BACKUP - save and keep a local backup of the raw HTML code BEFORE your changes, and AFTER your changes.

Related articles