/
Using CSS to apply custom button image in place of the default image
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:
- Navigate to edit the page.
- Highlight and select the button.
- Click the settings button to open the settings panel, then scroll down to the "Scoped CSS".
- Click to edit CSS and paste the CSS there.
- Save the changes.
FYI
This technique applies to any button images within the storefront.
, multiple selections available,
Related content
Customize the Yes No buttons on an Upsell After screen
Customize the Yes No buttons on an Upsell After screen
More like this
Upload a Store Logo
Upload a Store Logo
More like this
Screen Branding Themes
Screen Branding Themes
More like this
Replacing legacy screen branding with StoreFronts Checkout
Replacing legacy screen branding with StoreFronts Checkout
More like this
Screen Branding Tutorials
Screen Branding Tutorials
More like this
How to Remove the Update Button and Continue Shopping Button
How to Remove the Update Button and Continue Shopping Button
More like this