Using CSS to apply custom button image in place of the default image

You may find a situation where you would like to replace the defaulted image for a button with your own custom image. For example, you may wish to replace the default image for the Amazon Pay button. To do this all you need to do is upload the image to a secured URL. Typically you'll upload the image to the storefront file manager, but it could be located outside of UltraCart so long as the URL can load using the secured https:// prefix to the URL.

The CSS to accomplish applying your own image to the button looks like this:

#payWithAmazonDiv > img {
  content:url("http://imgur.com/SZ8Cm.jpg");
}


In the storefront themes using the Visual Builder (*recommended), you will:

  1. Navigate to edit the page.
  2. Highlight and select the button.
  3. Click the settings button to open the settings panel, then scroll down to the "Scoped CSS".
  4. Click to edit CSS and paste the CSS there.
  5. Save the changes.

FYI

This technique applies to any button images within the storefront.