Skip to main content

How do I change the buy button and other system images in my site? (FTPS)

Updated

Pulse Commerce storefronts use CSS-styled buttons by default. In some legacy or specialized scenarios, certain UI elements may still be delivered as system images. This article explains both supported approaches:

  • Replacing system images (such as legacy Buy buttons) via FTP/FTPS
  • Styling CSS buttons to use a background image instead of a purely CSS-rendered button
Important distinction: If your storefront uses a CSS-rendered Buy button (most modern sites), you do not need to replace a system image. Instead, use CSS customization.

Modern Pulse Commerce storefronts render buttons using HTML + CSS. This provides better accessibility, responsiveness, performance, and maintainability than image-based buttons.

However, some legacy templates and shared UI assets still reference system images stored on the server. These can be replaced via FTP/FTPS if (and only if) the storefront is actually referencing those files.

Rule of thumb:

  • If the button text is selectable → it is a CSS button
  • If the button is a fixed graphic → it may be a system image

If your storefront uses a true system image (for example buy.gif), you can replace it by overwriting the file via FTP/FTPS.

Applies To: Files stored in /images/Storefront_System_Images
Critical requirement: The replacement image must use the exact same filename. Do not rename the file.
  1. Connect to your site using FTP/FTPS
  2. Navigate to /images/Storefront_System_Images
  3. Download the original image as a backup
  4. Overwrite it with your custom image using the same filename
Security requirement: Always use FTPS (SSL FTP). 

How do I configure FileZilla to use SSL FTP (FTPS)? 

Since Pulse Commerce buttons are CSS-based, a merchant may choose to apply an image as a CSS background instead of using a fully CSS-styled button.

This approach does not replace a system image. It modifies the button’s appearance through CSS.

Example CSS (conceptual)

/* Example: Buy button with background image */
button.buy-button {
  background-image: url("/images/custom-buy-button.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;

  /* Hide text visually but keep it accessible */
  color: transparent;
  text-shadow: none;

  width: 200px;
  height: 50px;
}
Accessibility best practice: Do not remove the button text from the DOM. Visually hiding text (rather than deleting it) preserves screen reader support.

Drawbacks and risks of image-based CSS buttons:

  • Fragile selectors: If button classes or markup change, your CSS may stop applying.
  • Accessibility risk: Background images do not support alt text. Poor implementations can break screen readers.
  • Responsive issues: Image buttons may not scale cleanly across breakpoints.
  • Higher maintenance: Button states (hover, focus, disabled) must be manually handled.
  • Upgrade risk: Platform or theme updates may override or conflict with custom CSS.
Recommendation: Use image-based CSS buttons only when branding requirements cannot be met with standard CSS styling.

For broader customization using HTML, JavaScript, and CSS within WYSIWYG editors, see: 

How can I add custom HTML, JavaScript, and CSS to help my online store appear as part of my existing website? 

  • Pulse Commerce buttons are CSS-based by default
  • Replace system images via FTP/FTPS only if the storefront uses them
  • Prefer CSS styling over image buttons whenever possible
  • Use image-based CSS buttons only with full awareness of risks
  • Always back up files and test changes across devices
Bottom line: CSS-styled buttons are more stable, accessible, and upgrade-safe. Image-based buttons—whether via FTP or CSS—should be treated as advanced, exception-based customizations.

Related articles