| 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 |
|---|
theme | DJango |
|---|
| language | html/xml |
|---|
| theme | DJango |
|---|
| linenumbers | true |
|---|
|
<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> |
...
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 |
|---|
| language | css |
|---|
| theme | DJango | language | css |
|---|
| linenumbers | true |
|---|
|
.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.
| Code Block |
|---|
| language | css |
|---|
| theme | DJango |
|---|
| language | css |
|---|
|
.ucUpsellButtonTable { display:none; } |
In the footer section of your upsell html, add the following, styling them as you see fit.:
| Code Block |
|---|
theme | DJango |
|---|
| language | html/xml |
|---|
| theme | DJango |
|---|
| linenumbers | true |
|---|
|
<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> |
...