Skip to main content

Some of my images use absolute paths, how do I change these to relative paths? (WYSIWYG)

Updated

In https:// (SSL secure) mode, storefront pages may display broken images if your HTML contains absolute image URLs that begin with http://. This is commonly called mixed content (an HTTPS page attempting to load insecure HTTP resources). The most reliable fix is to update image references to relative paths (example: <img src="/images/logo.gif">) within the applicable WYSIWYG Source Editor.

Rule of thumb: For images stored on your Pulse Commerce storefront (FTP / images folder), use relative paths like /images/.... Avoid hardcoding your domain and avoid http://.

An absolute path includes the full protocol and domain name. A relative path references a resource from the storefront root without specifying protocol/domain.

Absolute path (INCORRECT in SSL mode if it begins with http://):

<img src="http://<MyDomainName.com>/images/logo.gif">

Relative path (CORRECT):

<img src="/images/logo.gif">

Important: Even if the image “exists,” browsers may block http:// images on an https:// page which results in missing or broken images.

Absolute paths typically appear when HTML was copied from an external site, generated by a third-party editor, or added as sample code. Common storefront locations include:

  • Header / custom header HTML
  • Footer HTML blocks
  • Home page content blocks
  • Static content pages (About, Contact, Policies)
  • Marketing blocks or banners built in WYSIWYG
Tip: If the broken image appears on every page, start with global areas like the Logo and Custom Header Editor or footer content.
  1. Log in and locate the WYSIWYG Editor that corresponds to the site area you suspect is using an absolute path. For example: Content Manager > Logo and Custom Header Editor.
  2. Click the View/Edit Source tab to open the Source Editor.
  3. Back up the current HTML before editing (copy/paste into a local text file).
  4. Find image tags (and any CSS background-image rules) that reference http:// or your domain, and convert them to relative paths. Use the examples below as your guide: 

    IMG tag (Absolute - INCORRECT):
    <img src="http://<MyDomainName.com>/images/logo.gif">

    IMG tag (Relative - CORRECT):
    <img src="/images/logo.gif">

    CSS background (Absolute - INCORRECT):
    background-image: url("http://<MyDomainName.com>/images/banner.jpg");

    CSS background (Relative - CORRECT):
    background-image: url("/images/banner.jpg");
  5. Click Apply (if present), then OK, then Update to save.
  6. Refresh the storefront page in a new browser tab (ideally in a private/incognito window) and confirm the images load correctly on HTTPS.
Do not change links or image paths unless you are certain the image is stored in your storefront /images/ directory. If the image is hosted externally, convert it to https:// (if supported) or re-host it in your storefront images directory.

If you have many instances, a careful find-and-replace can speed up remediation. Use this approach only after you have a backup copy of the HTML.

  • Common conversion:
    Replace:
    http://<MyDomainName.com>/images/
    With:
    /images/
  • Also check for:
    http://www.<MyDomainName.com>/images/
    http://<MyDomainName.com>/images/
    http://<MyDomainName.com>/store/images/ (if your legacy HTML includes extra path segments)
Best Practice: Replace in small batches and re-test. Avoid bulk replacements that might alter non-image URLs.
  • Confirm the storefront page URL begins with https://.
  • Right-click the broken image area and open the image in a new tab (if possible) to see the attempted URL.
  • Search your HTML source for http:// and for your domain name.
  • Check both <img> tags and CSS url(...) references.
  • After changes, refresh in an incognito/private window to avoid cached results.

Related articles