Sellerdeck Desktop v18 – Upgrading From v11 And Earlier

[G.W.Green]

IMPORTANT NOTE: If upgrading to v18.2.3. or later, it is essential that you process and complete any outstanding orders before upgrading. A number of payment methods have been removed in this version and will not be available to complete orders after upgrading.

Sellerdeck Desktop Version 18 includes a number of layout changes that are necessary for enabling the new features included in it.

The upgrader can apply all of these changes to version 12 sites and above, and some changes to version 11 sites and below, if you choose ‘Yes’ for the relevant option during the upgrade process:



In version 11 and earlier, some changes must be applied manually. This article outlines the changes that are required, feature by feature. It indicates which will be applied automatically by the upgrader, if you so choose; and provides details changes that must be applied by hand.

If you choose NOT to let the upgrader make changes, you will find full details of the additional changes required in the upgrader log.

A. Wish List

In version 11 and earlier, product layouts and themes with textual navigation bars can be supported as follows. Very old themes with image-based navigation are not friendly to search engines, and should no longer be used.

1. To include the ‘Wish List’ link in the Horizontal Nav Bar Text Links layout, add the following lines of code between two of the existing Links, wherever you want the ‘Wish List’ link to appear:

<actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsWishListEnabled%22%20%2f%3e%20%3d%3d%20true%29%20%26%26%20%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Wish%20List%20Page%22%29" >
              <span class="actxxsmall">[</span>&nbsp<a href="<actinic:variable name="WishListLinkText" />?ACTION=SHOWFORM<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e%20%3d%3d%20TRUE">&SHOP=<actinic:variable name="ShopID" /></actinic:block>"><span class="actxxsmall"><strong<actinic:variable name="WishListText" /></strong></span></a>&nbsp;<span class="actxxsmall">]</span>&nbsp;
</actinic:block>

2. To include the ‘Wish List’ link in the Vertical Nav Bar Text Links layout, add the following lines of code between two of the existing Links, wherever you want the ‘Wish List’ link to appear:

<actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsWishListEnabled%22%20%2f%3e%20%3d%3d%20true%29%20%26%26%20%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Wish%20List%20Page%22%29" >
              <span class="actxxsmall">[</span>&nbsp<a href="<actinic:variable name="WishListLinkText" />?ACTION=SHOWFORM<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e%20%3d%3d%20TRUE">&SHOP=<actinic:variable name="ShopID" /></actinic:block>"><span class="actxxsmall"><strong<actinic:variable name="WishListText" /></strong></span></a>&nbsp;<span class="actxxsmall">]</span><br />
</actinic:block>

3. To include the ‘Add to Wish List’ button and popup in any Product Layout, insert the following code. (You may have to experiment with the position; and you will need to modify the style to match the theme or design in use.)

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsWishListEnabled%22%20%2f%3e%20%3d%3d%20true" >
<p class="cart-button-placement set-below-right">
              <actinic:variable name="AddToWishListBtn" />
 </p>
</actinic:block>

And also add the following line of code at the very end of every layout that is valid for the MainArea and/or the ProductPageInnerLayout selector:

<actinic:variable name="AddToWishListPopup" />

4. For sites upgraded from pre-Sellerdeck versions (v11.0.2 and older) the following styles should be added to the Actinic Stylesheet layout. Some of them will need to be modified to match the theme or design in use:

/***** Wish list *****/

.wishlistmodal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 10px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.wishlistpop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  padding: 25px 25px 20px;
  margin: auto;
  text-align:center;
  width:194px;
  height:80px;
  z-index:50;
}
.wishlistpop p, .wishlistpop.div {
  border-bottom: 1px solid #EFEFEF;
  margin: 8px 0;
  padding-bottom: 8px;
}
.wishlist-required input[type="number"], .wishlist-add input[type="number"] {
       width: 40px;
}
a.wl_gotowishlist, a.gotocart {margin-left: 5px}
.wishlist-placement {clear: right; width: auto}
.wishlist-button-wrapper {
       display: block;
       width: auto;
       height: 3.5em;
       margin: 0;
       float: right;
       clear: both
}
.wish-list-button-popup input[type=submit], .wish-list-button-popup input[type=submit]:hover {
       margin: 0;
       width: auto;
       height: 3.5em
}
.singleAddToCart .wishlist-button-wrapper input[type=submit] {
       width: auto !important;
       height: 3.5em !important;
}
.wishlist-button-wrapper input[type="submit"], .wishlist-button-wrapper input[type="submit"]:hover {
       font-size: 1em;
}
.wishlist-share-label {display: block}
form.wishlist-share {padding: 0;}
form.wishlist-share input, form.wishlist-share input:hover {float: left; margin: 0}
form.wishlist-share input[type=text] {margin:8px 5px 0 0;}
span.wishlist-update input, span.wishlist-cart input, span.wishlist-required input, span.wishlist-remove input,
span.wishlist-update input:hover, span.wishlist-cart input:hover, span.wishlist-required input:hover, span.wishlist-remove input:hover {
              margin: 0 0 5px 0;
              }
.wishlist-image img {width: 75px; margin: 0;}
.wishlist-add input[type=number], .wishlist-required input[type=number] {margin: 0 8px 8px 0}
form.wishlist-share .fb-share-button {margin: 11px 5px 0 0;}
form.wishlist-share .twitter-share-button {float: left; margin: 11px 5px 0 0;}
form.wishlist-share span.wish-list-copy-caption {font-weight: bold; float: left; margin: 15px 5px 0 5px;}
form.wishlist-row label[for=idPass] {clear: left}
form.wishlist-row input#idUser {width: 90% !important}
.wish-list-button-popup {height: 3.5em !important;}

@media screen and (max-width:600px) {
       .wishlist-table {
              background-color: <actinic:variable name="BGColor" />;
              width: 100%;
              }
       .wishlist-headers {display: none}
       .wishlist-body {
              width: 100%;
              margin: 1% 0;
              text-align: center;
              border: 1px solid <actinic:variable name="Palette3" />;
              }
       .wishlist-body div {width: 95%}
       div.wishlist-required, div.wishlist-add, span.wishlist-pair {width: auto}
       .wishlist-image, .wishlist-name, .wishlist-price, .wishlist-remove, .wishlist-required, .wishlist-ordered, .wishlist-remaining,
       .wishlist-add, .wishlist-pair, .wishlist-quantity, .wishlist-cart {
              text-align: center;
              display: inline-block;
              margin: 1%;
              }
.wishlist-price, .wishlist-name {font-size: <actinic:variable name="LargerFontSize" />}
       .wishlist-remove {width: auto; clear: both}
       .wishlist-quantity {vertical-align: top}
       .wishlist-price, .wishlist-name {font-size: <actinic:variable name="LargeFontSize" />}
       .wishlist-label {font-weight: bold; padding-right: 5px; font-size: <actinic:variable name="LargerFontSize" />}
       .wishlist-required .wishlist-label {margin: 15px 0 0 0; float: left}
       .wishlist-required input[type="number"], .wishlist-add input[type="number"] {margin: 9px 5px 0 0}
       }

@media screen and (min-width:601px) and (max-width:1199px) {
       .wishlist-table {
              background-color: <actinic:variable name="BGColor" />;
              width: 100%;
              }
       .wishlist-headers {display: none}
       .wishlist-body {
              width: 100%;
              margin: 1% 0;
              float: left;
              border: 1px solid <actinic:variable name="Palette3" />;
              }
.wishlist-price, .wishlist-name {font-size: <actinic:variable name="LargerFontSize" />}
       .wishlist-image {width: 15%; min-width: 85px; float: left; height: 180px}
       .wishlist-name, .wishlist-price, .wishlist-price, .wishlist-add {width: 70%}
       .wishlist-required {width: 35%; text-align: center}
       .wishlist-ordered, .wishlist-remaining {width: 15%; text-align: center}
       .wishlist-image, .wishlist-name, .wishlist-price, .wishlist-required, .wishlist-ordered, .wishlist-remaining, .wishlist-add {
              display: inline-block;
              float: left;
              margin: 1%;
              vertical-align: top;
              }
       .wishlist-remove {float: right}
       .wishlist-label {font-weight: bold; display: block}
       .wishlist-required .wishlist-label {float: left; margin-bottom: 1%}
       .wishlist-required input[type="number"] {clear: left}
       .wishlist-qty {display: block; margin-top: 10px; font-size: <actinic:variable name="LargerFontSize" />}
}

@media screen and (min-width:1200px) {
       .wishlist-table {
              display: table;
              float: left;
              border-top: <actinic:variable name="Palette3" /> 1px solid;
              background-color: <actinic:variable name="BGColor" />;
              width: 100%;
              margin: 15px 0;
              padding 0;
              }
       .wishlist-headers, .wishlist-body {
              margin: 0;
              padding 0;
              width: 100%;
              }
       .wishlist-table form {
              padding: 0;
              margin: 0;
              width: 100%;
              }
       .wishlist-table .wishlist-row {width: 100%;}
       form.wishlist-row .checkoutCustomers fieldset input[type=email] {float:left; clear:both; width:90%;}
       .wishlist-image, .wishlist-name, .wishlist-required, .wishlist-ordered, .wishlist-remaining, .wishlist-price, .wishlist-add {
              display: table-cell;
              padding: 5px;
              vertical-align: top;
              height: 40px;
              border-bottom: 1px solid <actinic:variable name="Palette3" />;
              }
       .wishlist-image {width: 16%}
       .wishlist-name {width: 25%}
       .wishlist-required {width: 15%}
       .wishlist-ordered {width: 8%}
       .wishlist-remaining {width: 8%}
       .wishlist-price {width: 8%}
       .wishlist-add {width: 20%}
       .wishlist-headers {font-weight: bold}
       .wishlist-update, wishlist-add img {float: right}
       .wishlist-label {display: none}
       .wishlist-quantity {float: left}
       .wishlist-cart {float: right}
       .wishlist-remove {float: right; clear: both}
}

@media screen and (min-width:1200px) and (max-width:1499px) {
       .wishlist-update {float: left: clear: both}
}

@media screen and (min-width:1500px) {
       .wishlist-update {float: right}
}

fieldset.quantity-box {border: none}

5. And the following styles may need to be added to the end of the current stylesheet layout (Design Tab | Stylesheet button)

.content-area form .checkoutCustomers fieldset {
    float: left;
    margin: 2% 0 2% 1%;
    padding: 1%;
    width: 46%;
}
form.wishlist-row .checkoutCustomers fieldset label {float: left; clear: both; margin: 2% 1%}
form.wishlist-row .checkoutCustomers fieldset input[type=password], form.wishlist-row .checkoutCustomers fieldset input[type=text] {
   display: block;
   width: 90%;
   border: 1px solid <actinic:variable name="Palette1" />;
   font-family: Arial, Helvetica;
   font-size: 11px;
}
form.wishlist-row .checkoutCustomers fieldset input[type=submit] {
   font-family: Arial, Helvetica;
   font-size: 11px;
   font-weight: bold;
   height: 26px;
   border: none;
   margin: 5px 5px 0 0;
   width: auto;
   padding: 5px 10px;
   color: <actinic:variable name="BGColor" />;
   background-color: <actinic:variable name="Palette1" />
}
form.wishlist-row .checkoutCustomers fieldset input[type=checkbox] {
   float: left;
   margin: 5px;
}

B. Feefo V3

Changes applied automatically to all the required layouts for all versions:
Standard Product Feedback Table
Standard Product Rate Logo
Standard Product Rate Logo Template
Standard Site Feedback Table
Standard Site Rate Logo

C. ReCaptcha v2

Changes applied automatically to all the required layouts for all versions:
Contact Us Page Body
Contact Us Page Body RWD
ReCAPTCHA JS Options
ReCAPTCHA Layout

D. Facebook Pixel Code

In version 11 and earlier, add the following line of code to any Outer Layouts and Extended Info Layouts used in the site, immediately below the variable JavaScriptFunctions:

<actinic:variable name="SocialMediaFunctions" value="Facebook Pixel Code" />

E. PayPal Express Checkout

Changes applied automatically to all the required layouts, in all versions:
Receipt Delivery Address Details
Receipt Invoice Address Details
Standard Javascript Header Functions

F. Multiple Coupons

In version 11 and earlier, if ‘Allow Coupon Code Entry In Store Pages’ is enabled, add the following lines of code to the ‘Coupon Field In A Line’ and ‘Sidebar Coupon Field’ layouts, immediately above the closing </table> tag:

  <tr>
       <td>
              <div id="used-coupons">
                      <!-- Placeholder for list of used coupons -->
              </div>
       </td>
  </tr>

For pre-Sellerdeck versions (v11.0.2 and older) the following styles should be added to the Actinic Stylesheet layout, regardless of where coupon code entry is enabled:

#coupon-apply-btn {
       width: 12em;
       height: 3em;
       background: <actinic:variable name="Palette1" />;
       color: <actinic:variable name="BGColor" />;
       font-weight: bold;
       text-align: center;
       margin: 0 5px !important;
}
.remove-coupon-link {
       color: <actinic:variable name="LinkColor" />;
       cursor: pointer;
}
#used-coupons {
       display: inline-block;
       margin: 5px;
       width: 90%;
}
.coupon-list-line {
       width: 100%;
       max-width: 150px;
       clear: left;
       float: left;
       margin: 0 5px 5px 5px;
       font-size: <actinic:variable name="StandardFontSize" />;
}
.coupon-list-remove, .remove-coupon-link {
       float: right;
}

G. Security Fixes

Buyer password hashing, password reset email & insecure links in open graph tags
Changes applied automatically to all the required layouts for all versions:
Forgot Password Bulk Area
Forgot Password Bulk Area RWD
My Account Bulk Area
My Account Bulk Area RWD
Password HTML Email Inner Layout
Password Text Only Email
Scripts for Password Encryption
Standard Meta Tags

H. Schema Tags

In version 11 and earlier, add the following line of code to any Outer Layouts used in the site, immediately below the variable BaseHref:

<actinic:variable name="Schema" />

I. Google Product Feed

Feature added in v16. Changes applied automatically to the required layout in all versions:
Google Product Feed Layout