This setup is not valid for StoreFronts. |
You may use css to alter the appearance of the Yes No buttons.
The buttons are outputted within the following html block (which is subject to change; test your screens!)
<table class="ucUpsellButtonTable"> <tbody><tr> <td> <div id="ucUpsellYesButtonId" class="ucUpsellYesButton"> <input border="0" type="image" class="ucUpsellYesButtonOverlay" alt="Yes" src="/checkout/images/spacer.gif" name="yes"> </div> </td> <td> <div id="ucUpsellNoButtonId" class="ucUpsellNoButton"> <input border="0" type="image" class="ucUpsellNoButtonOverlay" alt="No" src="/checkout/images/spacer.gif" name="no"> </div> </td> </tr> </tbody></table> |
The buttons are input images pointing to spacers. They are surrounded by <div> blocks that use a background image to show the actual button. This allows for maximum browser compatibility.
Button | Attribute | CSS Class Name |
---|---|---|
Yes | background image | ucUpsellYesButton |
Yes | size (height and width) | ucUpsellYesButton and ucUpsellYesButtonOverlay |
No | background image | ucUpsellNoButton |
No | size (height and width) | ucUpsellNoButton and ucUpsellNoButtonOverlay |
Here's an example you could add to a style tag with the <before> section, placed in between opening and closing (<head> ...button code here... </head>) head tags as the first part of the of the HTML section of the upsell offer editor:
.ucUpsellNoButton { background-image: url(https://www.mysite.com/reallycoolbuttons/no.gif); background-repeat: no-repeat; height: 45px; width: 82px; } .ucUpsellNoButtonOverlay { height: 45px; width: 82px; } .ucUpsellYesButton { background-image: url(https://www.mysite.com/reallycoolbuttons/yes.gif); background-repeat: no-repeat; height: 45px; width: 82px; } .ucUpsellYesButtonOverlay { height: 45px; width: 82px;} |
Some merchants wish to make the No button appears before the Yes button on a page. This requires additional html code, but can be achieved.
First, hide the default buttons.
.ucUpsellButtonTable { display:none; } |
In the footer section of your upsell html, add the following, styling them as you see fit.:
<table> <tr> <td> <img src="/checkout/images/upsellNo.gif" onclick="ucSelectNo()" style="cursor:pointer"> </td> <td> <img src="/checkout/images/upsellYes.gif" onclick="ucSelectYes()" style="cursor:pointer"> </td> </tr> </table> |
This will display the two buttons, with the No button first. The onclick events will handle the form submission.