Skip to main content

What are the supported methods to update storefront images and styling (WYSIWYG, CSS Editor, and FTPS)?

Updated

This master overview explains the most common ways to customize your Pulse Commerce storefront’s images, buttons, and styling. It summarizes the supported customization methods, when to use each approach, and links to detailed step-by-step articles for implementation.

Scope: Storefront customization using (1) WYSIWYG source editing for HTML/image paths, (2) CSS editing for buttons and styling, and (3) FTPS image replacement for “system images” (e.g., Buy buttons).

Use the guide below to choose the safest and most effective customization method.

In https:// (SSL secure) mode, storefront pages may display broken images if your HTML contains absolute image URLs that begin with http://. Browsers often block these insecure requests on secure pages.

Best practice: For images hosted in your storefront’s images directory, use relative paths such as: <img src="/images/logo.gif">

Core workflow summary:

  1. Open the relevant WYSIWYG area (for example, global header content).
  2. Switch to View/Edit Source.
  3. Replace instances of http://<MyDomain>/images/... with /images/....
  4. Save and confirm the page loads correctly on HTTPS.

Full step-by-step and examples: 
Some of my images use absolute paths, how do I change these to relative paths? 

Buttons can be customized using CSS by targeting the element’s ID or Class. The recommended approach is to identify selectors using browser developer tools (for example, Chrome “Inspect”), test styles safely, then commit final styles to your storefront CSS.

Where styles are stored:

  • common-styles.min.css under /CustomPages/CSS/
  • Also available via Settings > CSS Editor

Example workflow highlights:

  1. Inspect the button element to find its ID/Class.
  2. Test CSS changes in the browser developer tools.
  3. Apply the final CSS using the ID selector (most precise) or Class selector (may affect multiple elements).

Screenshots (from the referenced article):

 

 

Full step-by-step, selectors, and examples: 
How do I edit the CSS of my site’s buttons? 

Many storefront UI elements (such as Buy buttons and other shared storefront graphics) are delivered as system images. You can replace these by logging in via FTPS and overwriting the files in the system image directory.

Critical requirement: The replacement image must use the exact same filename as the original system image. Always download and back up the original first.

Core workflow summary:

  1. Log in to your FTP/FTPS client using the host/username/password from your Welcome Kit.
  2. Navigate to: /images/Storefront_System_Images
  3. Replace the image (example: buy.gif) with your customized version using the same filename.

Example configuration screenshot (FileZilla):

 

Full step-by-step: 
How do I change the buy button and other system images? (FTPS) 

Recommended order of operations

  1. Fix SSL mixed content first (relative image paths), so pages load cleanly in HTTPS.
  2. Apply CSS styling second, after verifying markup/IDs/classes and testing in dev tools.
  3. Replace system images last, after confirming exact filenames and backup strategy.

Common pitfalls

  • Leaving http:// image paths in WYSIWYG content (results in broken images on HTTPS pages).
  • Using a Class selector for button styling and unintentionally affecting multiple buttons.
  • Replacing a system image but changing its filename (the storefront will continue looking for the original name).
  • Skipping backups before edits (harder to revert or troubleshoot).

Related articles