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:
Code:
<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> <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> <span class="actxxsmall">]</span> </actinic:block>
Code:
<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> <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> <span class="actxxsmall">]</span><br /> </actinic:block>
Code:
<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>
Code:
<actinic:variable name="AddToWishListPopup" />
Code:
/***** 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)
Code:
.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; }
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:
Code:
<actinic:variable name="SocialMediaFunctions" value="Facebook Pixel Code" />
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:
Code:
<tr> <td> <div id="used-coupons"> <!-- Placeholder for list of used coupons --> </div> </td> </tr>
Code:
#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; }
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:
Code:
<actinic:variable name="Schema" />
Feature added in v16. Changes applied automatically to the required layout in all versions:
Google Product Feed Layout