...
| Code Block |
|---|
<img src="/cgi-bin/UCGraphic?MERCHANTID=DEMO&FILENAME=FleaSoap.gif" /> |
Custom Yes/No buttons in the Upsell Offer
| Warning |
|---|
This setup is not valid for StoreFronts. |
Altering the appearance of the Yes No buttons
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!)
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<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:
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
.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;} |
Swapping the order of the Yes No button
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.
| Code Block | ||||
|---|---|---|---|---|
| ||||
.ucUpsellButtonTable { display:none; } |
In the footer section of your upsell html, add the following, styling them as you see fit.:
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<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.
Paths
To add a new Upsell Path, click on the "new" button underneath the Paths title. You will be taken to the Upsell Path Editor screen.
...