To add this wishlist capability to your custom template you would want to add [-- IF WishList --][-- WishList --][-- END_IF --] to your product template (outside your add to cart form) where you want the "add to wishlist" link to appear, and [-- IF WishList --][-- WishListLink --][-- END_IF --] in all your store templates where you want the "view my wishlist" link to appear.
You can add the CSS below to your CSS file used in your custom template. Make sure your CSS file with this CSS is being called/used on all pages where you have "Add To Wish List" buttons as well as on your Wish List pages themselves.
div.ss_wl_Box {text-align:left; white-space: nowrap; padding: 0px; margin: 5px 0px; width: 200px; max-width: 250px; position: relative; outline: none; cursor: pointer; clear: both; display: none; z-index: 200;}
div.ss_wl_Lists {overflow: hidden; clear: both; cursor: default; position: absolute; display: none;}
span.ss_wl_List {display: block;}
span.ss_wl_Label {display: inline-block; clear: none; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; padding: 8px 14px; text-align: left; color: #FFFFFF; background: #[-- STORE.VisitedLinkColor --]; overflow: hidden; font-size: 86%;}
span.ss_wl_Button img, span.ss_wl_Button {z-index: 2;}
div.ss_wl_Box div.ss_wl_Lists {top: 28px; left: 0px; width: 100%; overflow: visible;}
span.ss_wl_List {padding: 4px 8px; margin: 0px; font-size: 90%; text-align: left; background: #FEFEFE; border-top: 1px solid #CCC; border-left: 1px solid #CCC; border-right: 1px solid #CCC;}
span.wl_priv {margin-left: 4px; padding-right: 8px; font-size: 70%; opacity:0.8; filter:alpha(opacity=80);}
span.ss_wl_List:hover {background: #EFEFEF;}
div.ss_wl_Lists span.ss_wl_List:last-child {border-bottom: 1px solid #CCC; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; -moz-border-bottom-left-radius: 8px; -moz-border-bottom-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px;}
div.ss_wl_Lists span.ss_wl_List:first-child {border-top-right-radius: 8px; -moz-border-top-right-radius: 8px; -webkit-border-top-right-radius: 8px;}
If you are also using a custom customer registration template, your customer registration template should include the ShopSite tag [-- BUTTON ViewMyWishLists --] in the [-- DEFINE View_Edit --][-- END_DEFINE View_Edit --] screen. If you are using a built in template for your customer registration screens, you can skip this step.
Go to Merchandising > Wish List, and in the template pull down menu, select the wl_DefaultWishlist.sst template as the one to use in your store. Also make sure you have both the wish list feature enabled, and customer registration enabled (Commerce Setup > Customer Registration > Configure).
Go to Utilities > Publish > Regenerate, to recreate all your store pages with the updated template files
Save yourself some work, don't reinvent the wheel if you don't have to. What we recommend is to take the existing template that has all the necessary tags, and add your own custom code to it. The best way to do that is by adding coding into the wlHeader.sst and wlFooter.sst include files.
Download the wish list ZIP file, then upload both include files in that ZIP in your ShopSite store under Merchandising > Custom Templates > Includes > Upload Include File. Now you can go into each include file and make your edits. As you make edits, you can simply save changes and refresh your wish list screen to view your changes; no need to publish or regenerate as wish list pages are dynamic and the changes you make in the include files will be automatically used once you save.
Remember, the wish list pages are part of your customer registration, so they should be secure pages. Any images or external files used or referenced on those pages should be using secure URLs.