>
>

Template Tags By Version

Each new release of ShopSite brings new template tags for new features and enhanced functionality. All older template tags will still work, but new ones can be added to custom templates to support new template functionality as ShopSite gets even more feature-rich.

Version 12 sp2 Added Template Tags

New AJAX Functions

AJAX Add To Cart Pop Up

Start by creating a new include file. Go to Merchandising > Custom Templates > Includes > New Include. Name your new include file "AjaxAddToCart.sst".

After saving your new include file, click "Edit" to edit your include file and paste the following code into your AjaxAddToCart.sst include file:









Last, add the following line to your custom page and custom product templates just above the </body> tag.

[-- INCLUDE AjaxAddToCart.sst PROCESS --]

Automatic Coupons In Emails

Thank you email receipt coupon. These tags would be added in the shopping cart template within the DEFINE THANKYOU_EMAIL section
[-- IF THANKYOU_EMAIL_COUPON --]
   [-- THANKYOU_EMAIL_COUPON --]
[-- END_IF --]

Abandon Cart Email 1 coupon. These tags would be added in the shopping cart template within the DEFINE Abandon_Cart_email section
[-- IF ABANDON_EMAIL_COUPON_1 --]
   [-- ABANDON_EMAIL_COUPON_1 --]
[-- END_IF --]

Abandon Cart Email 2 coupon. These tags would be added in the shopping cart template within the DEFINE Abandon_Cart_2nd_email section
[-- IF ABANDON_EMAIL_COUPON_2 --]
   [-- ABANDON_EMAIL_COUPON_2 --]
[-- END_IF --]

Improved Product Tags

[-- Product.QuantityPricing VERTICAL --] - new vertical parameter for vertical table
[-- Product.OrderCheckout VERTICAL --] - new vertical parameter for vertical table

Cart Tags

The tags listed below are available for the Confirmation, Thankyou, Thankyou Email and Thankyou Merchant Email sections of the shopping cart template.

[-- CART.EMAIL--]
[-- CART.NAME--]
[-- CART.Title--]
[-- CART.FirstName--]
[-- CART.MiddleName--]
[-- CART.LastName--]
[-- CART.Suffix--]
[-- CART.Company--]
[-- CART.Address--]
[-- CART.Address2--]
[-- CART.City--]
[-- CART.State--]
[-- CART.PostalCode--]
[-- CART.Country--]
[-- CART.Phone--]
[-- CART.SHIPNAME--]
[-- CART.ShipTitle--]
[-- CART.ShipFirstName--]
[-- CART.ShipMiddleName--]
[-- CART.ShipLastName--]
[-- CART.ShipSuffix--]
[-- CART.ShipCompany--]
[-- CART.ShipAddress--]
[-- CART.ShipAddress2--]
[-- CART.ShipCity--]
[-- CART.ShipState--]
[-- CART.ShipPostalCode--]
[-- CART.ShipCountry--]
[-- CART.CUSTOMFIELDn --]

These tags can all be used as displayed below, or with the NO_SYMBOL parameter to remove the currency symbol.
[-- CART.SubTotal --]
[-- CART.SubTotal NO_SYMBOL --]
[-- CART.Total --]
[-- CART.Total NO_SYMBOL --]
[-- CART.ShippingAmount --]
[-- CART.TaxAmount --]
[-- CART.Associate --]

[-- FOR VAR.I 1 10 --]
   [-- IF CART.CUSTOMFIELD[VAR.I] --]
   <br>CART.CUSTOMFIELD[-- VAR.I --]: [-- CART.CUSTOMFIELD[VAR.I] --]
   [-- END_IF --]
[-- END_FOR --]

Customer Registration Tags

[-- CR_FORGOT_PASSWORD_URL --]
[-- CR_CART_V2 --]
[-- CR_TOTALS_V2 --]

These customer registration tags have a new "DIV" parameter which replaces the regular table format with a div format.
[-- CR_COMPANY div --]
[-- CR_EMAIL div --]
[-- CR_SIGNIN_EMAIL_PASSWORD div --]
[-- CR_EMAIL_TYPE div --]
[-- CR_SHOPSITEMESSAGES div --]
[-- CR_SAVE_PAYMENT div --]
[-- CR_EMAIL_PASSWORD div --]
[-- CR_CHALLENGE div --]
[-- CR_CHALLENGEQUESTION div --]
[-- CR_PASSWORD div --]
[-- CR_EDIT_PASSWORD div --]
[-- CR_EDIT_CHALLENGE div --]
[-- CR_REWARD_PROGRAM_INFO div --]
[-- CR_SHIPTO_ADDR div --]
[-- CR_BILLTO_ADDR div --]
[-- CR_ORDERINGINSTRUCTIONS div --]
[-- CR_COMMENTS div --]
[-- CR_DELETE_ORDER_LIST div --]
[-- CR_EDIT_SHIPPING_ADDRESS div --]
[-- CR_DELETE_SHIPPING div --]

Global Store Tags

[-- STORE.Total --]
[-- STORE.or --]
[-- STORE.RequiredMenuSelection --]
[-- STORE.ContinueShoppingText --]
[-- STORE.SignInButtonText --]

Version 12 sp1 Added Template Tags

Every new version of ShopSite comes with new features, many of which have new template tags to go along with them. ShopSite version 12 sp1 has a home page carousel, a more information image zoom feature, and a handful of new product fields to use throughout product more information pages.

Home Page Carousel

Merchants can configure up to 8 slides for a home page carousel. Each slide can contain multiple elements including an image, title, description, and call-to-action button. Using FOR and VAR tags, designers can loop through all the slides and only add those slides that the merchant has configured. Merchants and designers can read through the Do's and Don'ts of creating a slideshow on your website home page.

To quickly add the carousel feature to your custom page template, all you need to do is use an Include File. Add the code below into your custom page template where you would like the carousel to appear.

[-- INCLUDE Carousel.sst PROCESS --]

For designers who wish to have more control over the carousel feature, you can use the example code below and modify it to fit your needs.

[-- IF Store.SlideHomePage EQ PAGE.RecordNumber --]
   <div id="carousel">
      <div id="carouselinner" class="[-- STORE.SlidePager --]">
        <ul class="bxslider">
[-- FOR VAR.I 1 8 --]
  [-- IF STORE.SlideDisabled[VAR.I] --][-- ELSE_IF STORE.SlideImage[VAR.I] --]
<li><div class="slidesizedimage">[-- IF Store.SlideURL?[VAR.I] NE no_link --]<a href="[-- IF STORE.SlideURL?[VAR.I] store_page --][-- STORE.SlidePageURL[VAR.I] --][-- ELSE --][-- STORE.SlideURL[VAR.I] --][-- END_IF --]" title="[-- Store.SlideTitleText[VAR.I] --]"><img src=[-- Store.SlideImage[VAR.I] --]></a>[-- ELSE --]<span><img src=[-- Store.SlideImage[VAR.I] --]></span>[-- END_IF --]</div>
<div class="slide[-- Store.SlideTextAlignment[VAR.I] --]" style="color: #[-- Store.SlideDescColor[VAR.I] --];"><div class="slidecontents">
[-- IF STORE.SlideTitleText[VAR.I] --]<span class="slidetitle" style="color: #[-- Store.SlideTitleColor[VAR.I] --];">[-- Store.SlideTitleText[VAR.I] --]</span>[-- END_IF --]
[-- IF STORE.SlideDescText[VAR.I] --]<div class="slidedesc">[-- Store.SlideDescText[VAR.I] --]</div>[-- END_IF --]
[-- IF STORE.SlideButtonText[VAR.I] --]<a href="[-- IF STORE.SlideURL?[VAR.I] store_page --][-- STORE.SlidePageURL[VAR.I] --][-- ELSE --][-- STORE.SlideURL[VAR.I] --][-- END_IF --]" title="[-- STORE.SlideButtonText[VAR.I] --]" class="abutton" style="background: [-- IF STORE.SlideButtonBkgrdColor[VAR.I] EQ "000001" --]transparent[-- ELSE --]#[-- STORE.SlideButtonBkgrdColor[VAR.I] --][-- END_IF --]; color: #[-- STORE.SlideButtonColor[VAR.I] --];[-- IF STORE.SlideButtonBkgrdColor[VAR.I] EQ "000001" --] border: 4px solid #[-- STORE.SlideButtonColor[VAR.I] --];[-- END_IF --]">[-- STORE.SlideButtonText[VAR.I] --]</a>[-- END_IF --]
</div></div>
</li>
  [-- END_IF --]
[-- END_FOR --]
        </ul>
        
[-- IF STORE.SlidePager "text_overlay" --]<div id="bx-pager">[-- FOR VAR.I 1 8 --][-- IF STORE.SlideDisabled[VAR.I] --][-- ELSE_IF STORE.SlideImage[VAR.I] --]<a data-slide-index="[-- VAR.I DEC --][-- VAR.I --][-- VAR.I INC --]" href="">[-- IF STORE.SlideLinkText[VAR.I] --][-- STORE.SlideLinkText[VAR.I] --][-- ELSE --][-- VAR.I --][-- END_IF --]</a>[-- END_IF --][-- END_FOR --]</div>
[-- ELSE_IF STORE.SlidePager "text_below" --]<div id="bx-pager">[-- FOR VAR.I 1 8 --][-- IF STORE.SlideDisabled[VAR.I] --][-- ELSE_IF STORE.SlideImage[VAR.I] --]<a data-slide-index="[-- VAR.I DEC --][-- VAR.I --][-- VAR.I INC --]" href="">[-- IF STORE.SlideLinkText[VAR.I] --][-- STORE.SlideLinkText[VAR.I] --][-- ELSE --][-- VAR.I --][-- END_IF --]</a>[-- END_IF --][-- END_FOR --]</div>
[-- END_IF --]
        <div class="clear"></div>
      </div>
   </div>
<script type="text/javascript">var $ = ss_jQuery, jQuery = ss_jQuery;</script>
<script src="[-- OUTPUT_DIRECTORY_URL --]/publish/bb-bxslider.js"></script>
<script type="text/javascript">$(document).ready(function(){$('.bxslider').bxSlider({[-- IF STORE.SlidePager "text_overlay" --]pagerCustom: '#bx-pager',[-- ELSE_IF STORE.SlidePager "text_below" --]pagerCustom: '#bx-pager',[-- ELSE_IF STORE.SlidePager "no-pager" --]pager: false,[-- END_IF --] mode: "fade", [-- IF STORE.SlideAutoStart? "on" --]auto: true, pause: [-- Store.SlideFrequency --],[-- END_IF --] tickerHover: true, autoHover: true});});
[-- END_IF --]

Here is the basic CSS that goes with the carousel feature above. Make sure to include this CSS in your custom template CSS file found within the Merchandising > Custom Templates > Includes > Publish files section of ShopSite.

/** BxSlider v4.1.2 - Fully loaded, responsive content slider - http://bxslider.com Written by: Steven Wanderski, 2014 - http://bxcreative.com */
ul.bxslider li div img {
	max-width: 100%;
}
ul.bxslider {
    padding: 0px;
    margin: 0px;
}
a.abutton {
    display: inline-block;
    zoom: 1;
    *display: inline;
    padding: 3px 6px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    text-decoration: none;
    margin-top: 14px;
}
.bx-wrapper {
    position: relative;
    margin: 0px auto 10px auto;
    padding: 0;
    *zoom: 1;
}
.bx-wrapper .bx-viewport {
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}
[-- IF STORE.SlidePager "text_overlay" --]
div.text_overlay div#bx-pager {
    position: absolute;
    bottom: 6px;
    width: 100%;
    text-align: center;
}
div#bx-pager a {
    display: inline-block;
    zoom: 1;
    *display: inline;
    padding: 8px 14px;
    font-size: 90%;
    background: #[-- STORE.SlidePagerColor --];
    color: #FFFFFF;
    margin: 0px 1px 0px 0px;
}
[-- ELSE_IF STORE.SlidePager "text_below" --]
div.text_below div#bx-pager {
    position: relative;
    background: #[-- STORE.SlidePagerColor --];
    text-align: center;
}
div#bx-pager a {
    display: inline-block;
    zoom: 1;
    *display: inline;
    padding: 8px 14px;
    font-size: 90%;
    background: #[-- STORE.SlidePagerColor --];
    color: #FFFFFF;
    margin: 0px 1px 0px 0px;
}
[-- ELSE_IF STORE.SlidePager "dot_center" --]
div.dot_center .bx-wrapper .bx-pager {
    position: absolute;
    bottom: 9px;
    width: 100%;
    text-align: center;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    display: block;
    text-align: left;
    text-indent: -9999px;
    white-space: nowrap;
    width: 11px;
    height: 11px;
    margin: 0 3px;
    outline: 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
[-- ELSE_IF STORE.SlidePager "dot_top_right" --]
div.dot_top_right .bx-wrapper .bx-pager {
    position: absolute;
    top: 9px;
    right: 14px;
    width: 50%;
    text-align: right;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    display: block;
    text-align: left;
    text-indent: -9999px;
    white-space: nowrap;
    width: 11px;
    height: 11px;
    margin: 0 3px;
    outline: 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
[-- ELSE_IF STORE.SlidePager "dot_bottom_right" --]
div.dot_bottom_right .bx-wrapper .bx-pager {
    position: absolute;
    bottom: 9px;
    right: 44px;
    width: 50%;
    text-align: right;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    display: block;
    text-align: left;
    text-indent: -9999px;
    white-space: nowrap;
    width: 11px;
    height: 11px;
    margin: 0 3px;
    outline: 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
[-- ELSE_IF STORE.SlidePager "line_center" --]
div.dot_bottom_right .bx-wrapper .bx-pager {
    position: relative;
    width: 100%;
    text-align: center;
}
.bx-wrapper .bx-pager .bx-pager-item {
	width: 12%;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    display: block;
    text-align: left;
    text-indent: -9999px;
    white-space: nowrap;
    width: 100%;
    height: 8px;
    margin: 0px;
    outline: 0;
}
[-- END_IF --]
.bx-wrapper .bx-pager .bx-pager-item {
    display: inline-block;
    zoom: 1;
    *display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a, div#bx-pager a {
	background: #[-- STORE.SlidePagerColor --];
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, div#bx-pager a:hover {
	background: #[-- STORE.SlidePagerHoverColor --];
}
.bx-wrapper .bx-pager.bx-default-pager a.active, div#bx-pager a.active {
	background: #[-- STORE.SlidePagerActiveColor --];
}
.bx-wrapper .bx-loading {
    min-height: 50px;
    background: url([-- ShopSite_Images --]/backgrounds/shared/bx_loader.gif) center center no-repeat #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}
html.no-touch div#carouselinner .bx-wrapper:hover .bx-prev, html.no-touch div#carouselinner .bx-wrapper:hover .bx-next {
	display: block;
}
div.bx-controls, div.bx-has-controls-direction, div.bx-controls-direction {
	height: 100%;
	width: 100%;
}
div#carouselinner .bx-wrapper .bx-next, div#carouselinner .bx-wrapper .bx-prev, .bx-wrapper .bx-controls-direction a.disabled, html.touch .bx-wrapper .bx-controls-direction a {
	display: none;
}
.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    left: 0px;
    outline: 0;
    width: 40px;
    margin-top: -20px;
    background-image: url([-- ShopSite_Images --]/backgrounds/shared/bb-prevnext.gif);
    background-repeat: no-repeat;
    background-position: center left;
    height: 40px;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 400px;
}
.bx-wrapper .bx-controls-direction a.bx-next {
	left: 100%;
	background-position: center right;
	margin-left: -40px;
}
div#carousel {
    display: block;
    max-width: 100%;
    overflow: hidden;
}
div#carouselinner {
    position: relative;
    display: block;
    max-width: 100%;
    overflow: hidden;
}
div#carouselinner .bx-wrapper li {
    min-width: 100%;
    width: 100%;
}
.bx-wrapper li {
    max-width: 100%;
    overflow: visible;
    padding: 0px;
    margin: 0px;
    text-align: left;
}
.bx-wrapper li > div, .bx-wrapper li div {
	display: inline-block;
	vertical-align: middle;
}
.bx-wrapper li > div {
	height: 100%;
	text-align: left;
}
.bx-wrapper li > div.slideright::before, .bx-wrapper li > div.slideleft::before, .bx-wrapper li > div.slidecenter::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
div.slideright {
    width: 40%;
    text-align: left;
    z-index: 5;
    position: absolute;
    margin: 0px;
    top: 0px;
    left: 50%;
}
div.slideleft {
    width: 40%;
    text-align: left;
    z-index: 5;
    position: absolute;
    margin: 0px;
    top: 0px;
    left: 10%;
}
div.slidecenter {
    width: 88%;
    text-align: center;
    z-index: 5;
    position: absolute;
    margin: 0px;
    top: 0px;
    left: 6%;
}
.bx-wrapper li div.slidesizedimage {
    width: 100%;
    overflow: visible;
    max-width: 100%;
    padding: 0px;
    margin: 0px;
}
.bx-wrapper li div.slidesizedimage a, .bx-wrapper li div.slidesizedimage span {
    display: block;
    padding: 0px;
    margin: 0px;
}
.bx-wrapper li div.slidesizedimage img {
    width: 100%;
    max-width: 100%;
    position: relative;
    padding: 0px;
    margin: 0px;
    display: block;
}
span.slidetitle {
	display: block;
}
div.slideright span.slidetitle, div.slideleft span.slidetitle {
	font-size: 140%;
}
div.slidecenter span.slidetitle {
	font-size: 200%;
}
div.slidecontents {
    padding: 40px 0px;
    margin: 0px;
}
.bx-wrapper li div.slidedesc {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: wrap;
    margin: 0px;
    padding: 10px 0px 20px 0px;
    font-size: 100%;
}
.bx-wrapper a.abutton {
    text-transform: uppercase;
    padding: 12px 16px;
    font-size: 100%;
}
.bx-wrapper a.abutton:hover {
	opacity: 0.8;
	filter: opacity(80);
}

More Information Zoom

The new product image zoom feature works with the existing product multi image feature on the more information page. As long as your MORE_INFO_PAGE section of your product template contains the [-- MoreInfoImageRow --] tag, then your template will support the new image zoom feature.

If you would like more control over the zoom feature, or even implement your own image display feature using ShopSite's image fields, you can start with the product image zoom HTML code below and modify it to fit your needs. Much like the carousel feature, the product zoom feature uses FOR and VAR tags to loop through all extra product image fields.

[-- IF Store.ImageZoom --]
<script type="text/javascript">$(document).ready(function() {$('.jqzoom').jqzoom({zoomType: 'standard', lens:true, preloadImages: false, zoomType: 'innerzoom', alwaysOn:false, title:false});});</script>
     <div class="clearfix" id="bb-zoomcontain">
         <div class="clearfix" id="bb-mizoom">
             <a href="[-- Product.MoreInformationGraphic SS_SIZE0 URL_ONLY --]" class="jqzoom" rel='bb-zoom'  title="[-- IF Product.MoreInformationGraphicDesc --][-- Product.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]"><img src="[-- Product.MoreInformationGraphic SS_SIZE1 URL_ONLY --]"  title="[-- IF Product.MoreInformationGraphicDesc --][-- Product.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]" alt="[-- IF Product.MoreInformationGraphicDesc --][-- Product.MoreInformationGraphicDesc --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]" id="bb-miimage"></a>
         </div>
[-- VAR.AdditionalImages "0" --][-- FOR VAR.I 1 20 --][-- IF PRODUCT.MoreInfoImage[VAR.I] --][-- VAR.AdditionalImages INC --][-- END_IF --][-- END_FOR --]
[-- IF VAR.AdditionalImages GT "0" --]
        <div class="clearfix">
          <ul class="clearfix" id="bb-zoomthumb">
         <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'bb-zoom', smallimage: '[-- PRODUCT.MoreInformationGraphic SS_SIZE1 URL_ONLY --]',largeimage:'[-- PRODUCT.MoreInformationGraphic SS_SIZE0 URL_ONLY --]'}">[-- Product.MoreInformationGraphic SS_SIZE3 ONLY_ALT_TAG --]</a></li>
   [-- FOR VAR.I 1 20 --]
     [-- IF PRODUCT.MoreInfoImage[VAR.I] --]
    <li><a href='javascript:void(0);' rel="{gallery: 'bb-zoom', smallimage: '[-- Product.MoreInfoImage[VAR.I] SS_SIZE1 URL_ONLY --]',largeimage:'[-- Product.MoreInfoImage[VAR.I] SS_SIZE0 URL_ONLY --]'}">[-- Product.MoreInfoImage[VAR.I] SS_SIZE3 ONLY_ALT_TAG --]</a></li>
     [-- END_IF --]
   [-- END_FOR --]
        </ul>
       </div>
[-- END_IF --]
      </div>
[-- ELSE --]
  [-- MoreInfoImageRow --]
[-- END_IF --]

New Product Tags

[-- PRODUCT.Video --]
[-- PRODUCT.ShippingDetails --]
[-- PRODUCT.Returns --]
[-- PRODUCT.Warranty --]
[-- PRODUCT.Specifications --]
[-- PRODUCT.Materials --]
[-- PRODUCT.OneLineAd --]
[-- PRODUCT.HowToUse --]
[-- IF PRODUCT.SizeFitRadio EQ I or T --][-- END_IF --]
[-- PRODUCT.SizeFitImage --]
[-- PRODUCT.SizeFitText --]
[-- PRODUCT.AsSeenInImage --]
[-- Product.SavedAmount --] - will give you the difference between the product price and the sale amount

New Store Text Fields

[-- STORE.Video --]
[-- STORE.ShippingDetails --]
[-- STORE.Returns --]
[-- STORE.Warranty --]
[-- STORE.Specifications --]
[-- STORE.Materials --]
[-- STORE.OneLineAd --]
[-- STORE.HowToUse --]
[-- STORE.SizeFitGuide --]
[-- STORE.AsSeenIn --]

[-- STORE.LoveThis --]
[-- STORE.PaymentMethodsAccepted --]
[-- STORE.Newsletter --]
[-- STORE.OopsOptions --]

Store Wide Tags

[-- STORE.OutputSecureURL --] - does the same thing as [-- STORE.SC_Secure_Image_URL --]

Abandon Cart Pop Up

To quickly add the new Abandon Cart feature to a custom shopping cart template, just add [-- SC_EMAIL_LIGHTBOX --] within the body of the shopping cart screen.

Ajax Sign In

To allow customers to sign into their account without leaving the page they are on you can implement the Ajax sign in feature on your store pages.

Version 12 Added Template Tags


Important For Custom Cart Templates

New Define - Merchant_Thankyou_Email
With Version 12 came the ability to create custom merchant emails when an order is completed. Because of this new ability, all custom shopping cart templates must include a new DEFINE section called Merchant_Thankyou_Email. If you want to use the default merchant email, you can add the following to the bottom of your custom shopping cart template:
[-- DEFINE Merchant_ThankYou_Email --][-- INCLUDE MerchantEmail.sst PROCESS --][-- END_DEFINE Merchant_ThankYou_Email --]

Other Cart Template Tags

    [-- SC_Cart_V2 --] - same information as [-- SC_Cart --] but uses DIVs and SPANs instead of tables
    [-- SC_Totals_V2 --] - same information as [-- SC_Totals --] but uses DIVs and SPANs instead of tables
    [-- SC_Address_V2 --] - same information as [-- SC_Address --] but uses DIVs and SPANs instead of tables

Wish List Template

ShopSite v12 has a built in wishlist feature. In order to use this feature with custom templates you would need to (1) add the [-- IF WishList --][-- WishList --][-- END_IF --] tags into your product template where you want the "Add To Wishlist" link to appear (this cannot be inside the product add to cart <form>. (2) Add the wish list CSS (provided at the link below) to your custom template CSS file. Last, (3) create your own custom wish list template wish all necessary defines. The link below provides more detailed information about all three of these steps.
Wishlist Enhancement tied to Customer Registration

Packing Slip Template

ShopSite V12 now gives merchants/designers the ability to fully customize the packing slip viewable in the back office of ShopSite by the merchant. You can copy, create or upload your custom packing slip template by going to Merchandising > Custom Templates > Advanced, and using the "Order Templates" section.

The packing slip template is comprised of 4 DEFINEs. The first is [-- DEFINE OM_SHIPPACK_VIEW --], which is what is displayed when you go to the "Orders" screen in the back office of ShopSite, then click on "View Packing Slip." The second DEFINE is [-- DEFINE OM_ORDER_PRODUCT --] which lets you control what the products that were ordered loop like. These products will be looped in the first define and displayed on your "View Packing Slip" screen. The third DEFINE is [-- DEFINE OM_ORDER_COUPON --], which controls the look of coupons that are part of an order. Coupons and products will be looped in the same area, so you will likely want them formatted similarly. The fourth DEFINE section is the [-- DEFINE OM_ORDER_MERCHANT_PRODUCT --], which is what a product, and the product notes will look like IF you are using merchants notes on a per product basis.

If you are ready to create your custom packing slip template, go to the custom packing slip template cookbook page to view a complete list of new available and required tags.

Product Tags

    [-- PRODUCT.DisplayAddtoCart --] - pull down menu for merchants to select where the add to cart button should appear
    ONLY_ALT_TAG - parameter for PRODUCT.Graphic and PRODUCT.MoreInformationGraphic tags (i.e. [-- PRODUCT.Graphic ONLY_ALT_TAG --]). This parameter outputs the full <img> tag for an image but only includes the src= and alt=.
    SRC_ONLY - parameter for PRODUCT.Graphic and PRODUCT.MoreInformationGraphic tags (i.e. [-- PRODUCT.Graphic SRC_ONLY --]). This parameter outputs the full <img> tag for an image but only includes the src=.

Store Wide Tags And Text Fields

    [-- IF SearchOnStorePages --][-- END_IF --] - checkbox to display search field throughout site
    [-- STORE.YouSave --] - "You Save" text field
    [-- STORE.RegPrice --] - "Reg Price" text field
    [-- STORE.ViewProductByImage --] - "View Products By Image" text field
    [-- STORE.ViewProductByDetail --] - "View Products By Detail List" text field

Misc. Tags & Tag Enhancements

Tag Enhancement - IF/END_IF Tag For Product Reviews
A new template tag was added for v12 to check if there are any reviews for the product. The basic format of the template tag is [-- IF REVIEWS_COUNT_NUMBER operator number --] where operator is one of EQ,NE,LT, LE, GT, GE (as in other IF statements) and number is some numeric value. This tag can also be used as an [-- ELSE_IF ... --] type statement like [-- ELSE_IF REVIEWS_COUNT_NUMBER --]. An example of this would be [-- IF REVIEWS_COUNT_NUMBER EQ 0 --][-- ELSE --][-- END_IF --]. The tag cannot be used like a few other template tags without an operator or number such as [-- IF REVIEWS_COUNT_NUMBER --] since that will always be true since there is something in the field even if it is a 0 (zero).


    [-- PrevNext --] - can now be used in the mobile page templates.

Version 11 sp2 Added Template Tags

There are three main features in ShopSite Version 11 SP2 that should be added to your custom templates.

Product Reviews
The Product Reviews feature allows customers to place reviews for products they have purchased in your store. The product review star summary can be displayed anywhere the product is displayed, on category pages, search results screens, as a cross sell product, and in mobile. On the product more information page customers can see the list of top reviews as well as see the link to "view all reviews." Below are the new tags for this feature.
Here are step-by-step instructions on how to add the product reviews feature in your custom templates.

    [-- IF REVIEWS --][-- END_IF --]
    [-- STORE.Reviews_Header --] - text: Reviews
    [-- REVIEWS_STARS --] - star images
    [-- REVIEWS_COUNT --] - indicates number of reviews
    [-- REVIEWS_COUNT_NUMBER --] - number of reviews only
    [-- REVIEWS_STARS_NUMBER --] - number for star rank only
    [-- REVIEWS_WRITE_REVIEW_LINK --] - link to "write a review" pop up
    [-- REVIEWS_READ_REVIEWS_LINK --] - link to "read all reviews" pop up
    [-- REVIEWS_FEATURED --]list of reviews displayed on more info page
    [-- REVIEWS_MAIN --] - needed in reviews product template

Real-Time Inventory Display
Merchants can choose to display the actual inventory of a product or simply just "In stock" or "Out of stock," for products in their store.

    [-- MOREINFOINVENTORYACTUAL --]

Suggested CSS for this feature:

    span#ss_inv {display: block; font-weight: bold; line-height: 26px;}
    span.ss_in_stock {color: green;}
    span.ss_out_of_stock, span.ss_low_stock {color: red;}

Pinterest Share & Pinterest Follow

    [-- PINTEREST_SHARE --]
    [-- PINTEREST_FOLLOW --]

Misc. Tags & Tag Enhancements

    [-- IF MOREINFOINVENTORY --][-- END_IF --] - IF/END_IF statement for Real-Time Inventory
    [-- STORE.ReorderText --] - customer registration "View Order" screen "Reorder" text
    [-- BUTTON Reorder --] - customer registration "View Order" screen "Reorder" button
    [-- CR_Tax_Exempt --] - customer registration "Preferences" screen tax exempt information
    [-- SOCIAL_SHARE --] - displays all social share options that are enabled. Has tag and script parameters
    [-- SOCIAL_FOLLOW --] - displays all the social follow options that are enabled

Version 11 sp1 Added Template Tags

There are two main new features in ShopSite Version 11 SP1 that should be added to your custom templates. Other tags listed on this page are modifications to existing tags and do not need to be changed or added to custom templates.

Mobile Device Support
To enable ShopSite's new Mobile Device Support feature there are only 2 steps required. First go to Preferences > Mobile, and turn on the mobile option. Second, if you are using custom page and product more information page templates, make sure that you have the following tags in your page template(s) and your product more information page template(s).

    [-- MOBILE_JAVASCRIPT --] - goes within the <head></head> tags.
    [-- SS_MOBILE_REDIRECT --] - goes just after the <body> tag.


Mobile Template Tags
If you would like to customize the mobile pages further than what the default mobile templates allow, I would suggest copying and modifying the mobile templates. With mobile templates, many of the regular template tags will work, but there are some new tags that are specific to the mobile configuration features. Below are the new tags for mobile templates.

    [-- IF SS_MOBILE --] - if mobile feature is turned on
    [-- IF MOBILE --] - if mobile device (real time only)

    [-- SS_MOBILE_PC --] - outputs "View HTML Site" or "View Mobile SIte" links

    [-- STORE.MB_HEADER --]
    [-- STORE.MB_FOOTER --]

    [-- STORE.MB_BACKGROUNDCOLOR --]
    [-- STORE.MB_TEXTCOLOR --]
    [-- STORE.MB_LINKCOLOR --]
    [-- STORE.MB_VISITEDLINKCOLOR --]
    [-- STORE.MB_ACTIVELINKCOLOR --]

    [-- STORE.MB_LINK1 --]
    [-- STORE.MB_LINK2 --]
    [-- STORE.MB_LINK3 --]
    [-- STORE.MB_LINK4 --]

    [-- IF STORE.MB_UseCompanyLogo --]
    [-- STORE.MB_CompanyLogo --]
    [-- END_IF --]
    [-- STORE.MB_CompanyURL --]
    [-- STORE.MB_CompanyLINK --]
    [-- STORE.MB_AddToCart --] - add to cart text

    [-- MB_PageMenu --] - will either do Menu or on of the Page Links depending on configuration

    [-- PRODUCT.MOREINFOURL --] - outputs the link for the associated dynamic more info page
    [-- PAGE.PAGEURL --] - replaces [--OUTPUT_DIRECTORY_URL--]/[--Page.FileName--] in the LINK_TO_PAGE define section


Google +1

    [-- IF Google_PlusOne --]
    [-- GOOGLE_PLUSONE script --] - only JavaScript within <head>
    [-- GOOGLE_PLUSONE tag --] - only Google +1 tag
    [-- GOOGLE_PLUSONE --] - both JavaScript and Google +1 tag
    [-- END_IF --]


New Parameters for Existing Tags

    [-- PAGEMENU no_jscript --] - removes the inline JavaScript
    [-- CR_Name column --] - displays registration name fields in a column rather than a line.

Version 11 Added Template Tags

There are many new features in ShopSite Version 11; most of them are within the ShopSite back office so no template changes are needed. The tags below are tags for some of the new features in version 11 as well as a few enhancement tags that you can use in your custom templates.

Left, Right and Footer Navigation
You can configure a global left, right and footer navigation in Manager and Pro by going to Preferences > Navigation. These tags can go in any template.

    [-- IF PageLinks.Left --][-- PageLinks.Left --][-- END_IF --]
    [-- IF PageLinks.Right --][-- PageLinks.Right --][-- END_IF --]
    [-- IF PageLinks.Footer --][-- PageLinks.Footer --][-- END_IF --]


Facebook Connect for Customer Registration
You can turn on the option for customers to register using Facebook by going to Commerce Setup > Customer Registration > Configure. This is a Pro only feature and these tags can only be used on the sign in screen in the customer registration template.

    [-- IF CR_FACEBOOK_CONNECT --][-- CR_FACEBOOK_CONNECT --][-- END_IF --]
    [-- Store.Email_SignUp_Or --]
      (text field "or")


Constant Contact Newsletter Sign Up
ShopSite version 11 integrates with Constant Contact. If you have a Constant Contact account you can choose if you would like to include the email sign up field on your store pages. To turn this on you would go to Merchandising > Constant Contact. This is available in ShopSite Manager and ShopSite Pro. The template tags can be used in page and product more information page templates.

    [-- IF Email_Signup --]
    [-- STORE.Email_SignUp_Text --]
    [-- Email_SignUp --]
    [-- END_IF --]


New Pagination Tags
Pagination is a ShopSite Pro only feature. You can configure pagination by going to Pages > Edit Page Layout, and specifying the number of products you want per page. Below are some tags to enhance that feature. Pagination tags can only be used in page templates.

    [-- IF PAGE.PaginatedPageNum NE 0 --]
    Page[-- PAGE.PaginatedPageNum --] of [-- PAGE.PaginatedPageNumMax --]
    [-- IF PAGE.PaginatedPageNum EQ PAGE.PaginatedPageNumMax --]
    LAST PAGE
    [-- ELSE_IF PAGE.PaginatedPageNum EQ 1 --]
    FIRST PAGE
    [-- END_IF --]
    [-- END_IF --]


New Google Product Search Tags
The Google Product Search information is passed to Google when you submit your products to be listed in the Google Product Search. Some merchants choose to display this information on their store pages. Below are the tags for the two new Google Product Search fields.

    [-- Product.GoogleGTIN --]   (ISBN or UPC)
    [-- Product.GoogleMPN --]   (Manufacturer Part Number)


New IF Tag Parameters
ShopSite has had IF/END_IF tag functionality for years but now there are new parameters that you can use.

    [-- IF parm1 EQ parm2 --]   (equals)
    [-- IF parm1 NE parm2 --]   (does not equal)
    [-- IF parm1 LT parm2 --]   (less than)
    [-- IF parm1 LE parm2 --]   (less than or equal to)
    [-- IF parm1 GT parm2 --]   (greater than)
    [-- IF parm1 GE parm2 --]   (greater than or equal to)

Version 10 sp2 Added Template Tags

There are many new features in ShopSite Version 10 sp2, however most of them are within the ShopSite back office so no template changes are needed. Three of the new features, follow for Facebook/Twitter, share for Facebook/Twitter, and the new cascading ordering options will require that you add new tags to your custom templates.

Follow On Facebook/Twitter
These tags can go in all types of templates.

    [-- IF TWITTER_FOLLOW --][-- TWITTER_FOLLOW --][-- END_IF --]
    [-- IF FACEBOOK_FOLLOW --][-- FACEBOOK_FOLLOW --][-- END_IF --]

Share On Facebook/Twitter
These tags should be placed in page and product templates.

    [-- IF TWITTER_SHARE --][-- TWITTER_SHARE --][-- END_IF --]
    [-- IF FACEBOOK_SHARE --][-- FACEBOOK_SHARE --][-- END_IF --]

Inventory Tracking for Ordering Options
This feature will automatically work with the regular [-- Order_Option_Menu Column --]. However, if the merchant has configured this feature to use the cascading pull down menus for options, those menus will ONLY be displayed on the product more information pages. Because of this, you will want to add in new tags to the [-- DEFINE PRODUCT --][-- DEFINE SUBPRODUCT --] and [-- DEFINE PRODUCT_CROSS_SELL --] so that in all those locations, none of the product add to cart information will show up. Instead, a link to the more information page will be displayed. The IF/END_IF statement would look like this:

    [-- IF PRODUCT.UseMultiMenus checked --]
    link to more info
    [-- ELSE --]
    display add to cart options
    [-- END_IF --]