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.
Previous to version 14, if you wanted to use different sizes images in a custom zoom feature, you would need to specify those image sizes in the template. Now you can use the merchant defined fields under Preferences > More Info Pages. The three new tags are [-- STORE.ImageZoomThumbSize --][-- STORE.ImageZoomProductSize --][-- STORE.ImageZoomZoomSize --]. Each tag is replaced by the number of the resized image. Below is an example of how they might be used.
There are inventory tracking tags to display real-time inventory for products on both category and more information pages. These tags were ignored if inventory wasn't enabled. Now there is an IF tag to check if inventory tracking is enabled.
In addition to NO_SYMBOL the RAW_NUMBER parameter can now be used in PRODUCT.Price and PRODUCT.SaleAmount. This parameter is especially useful in JavaScript coding and special coding enhancements such as structured data.
For example, if you have a product with the price "$1,040.00", the...
[-- PRODUCT.Price --] tag would return "$1,040.00"
[-- PRODUCT.Price NO_SYMBOL --] would return "1,040.00"
[-- PRODUCT.Price RAW_NUMBER --] would return "1040.00"
The template tags below are used with the new custom shopping cart fields. These tags should be added between the [-- SC_FORM --] tag and </form> tags within the [-- DEFINE ShoppingCart --] section of your cart template.
The tag below should be added to the Shipping, Confirmation, ThankYou, and ThankYou_Email defines to optionally show the values provided in the custom fields on the cart screen:
[-- IF WishList_Share_Img_URL --]
<meta property="og:image" content="[-- WishList_Share_Img_URL --]">
[-- END_IF --] [-- IF WishList_Oneline_Ad --]
<meta property="og:description" content="[-- STORE.WishList_Oneline_Ad --]">
[-- END_IF --]
There are new fields under Preferences > Layout Settings, for company information such as the company phone, email and address. These tags can be used in any template type.
[-- IF STORE.CompanyAddress --] [--IF STORE.CompanyEmail --] <script> var stb_domain = "[-- STORE.CompanyEmailDomain --]"; var stb_user = "[-- STORE.CompanyEmailName --]"; var stb_recipient = stb_user + "@" + stb_domain; var stb_url = "mailto:" + stb_recipient; document.write(stb_recipient.link(stb_url)); </script> [-- END_IF --] [-- IF STORE.CompanyPhone --]<br><a href="tel:[--STORE.CompanyPhone NUMS_ONLY --]">[--STORE.CompanyPhone --]</a>[-- END_IF --] [--IF STORE.CompanyAddressLine1 --]<br>[--STORE.CompanyAddressLine1 --]<br>[-- END_IF --] [--IF STORE.CompanyAddressLine2 --][--STORE.CompanyAddressLine2 --]<br>[-- END_IF --] [--IF STORE.CompanyAddressCity --][--STORE.CompanyAddressCity --], [-- END_IF --][--IF STORE.CompanyAddressState --][--STORE.CompanyAddressState --] [-- END_IF --][-- IF STORE.CompanyAddressZipCode --][-- STORE.CompanyAddressZipCode --][-- END_IF --] [--IF STORE.CompanyAddressCountry --]<br>[-- STORE.CompanyAddressCountry --][-- END_IF --] [-- END_IF --]
There are two new template types, SUBSCRIPTION and SUBSCRIPTION_EMAIL. Subscription_email type is an email sent to shoppers prompting them to update their credit card. Subscription type is the page they go to after they click a link in that email.
Subscription templates are added in the "Shopping Cart Templates" area. Below is an example of a subscription template.
[-- DEFINE Subscription --]<!DOCTYPE html>
<html lang="en">
<head><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="content-language" content="[-- LOCALE_NAME --]">
<meta name="HandheldFriendly" content="True">
<title>[-- SUBSCRIPTION_TEXT.PageTitle --]</title>
<script type="text/javascript">[-- SC_JavaScript --]</script>
<style type="text/css">
body#subscription {padding: [-- IF STORE.BackgroundColor NE "FFFFFF" --]5% [-- END_IF --]0px; background: #[-- STORE.BackgroundColor --]; color: #[-- STORE.TextColor --]}
body, td {font-family: [-- STORE.Font --]; font-size: [-- STORE.FontSize --]}
.text-center {text-align: center}
div#logo {margin: 0px auto 30px auto; max-width: 450px}
div#logo img {max-width: 100%}
h1 {margin: 0ps auto}
div.d-inline-block {display: inline-block; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; background: #FFFFFF; padding: 20px; margin: 0px auto 5% auto}
table {background-color: transparent; border-collapse: collapse}
input, button, select, textarea {line-height: inherit}
a, area, button, [role="button"], input, label, select, summary, textarea {touch-action: manipulation}
button, select {text-transform: none}
button, input, optgroup, select, textarea {font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0}
button, input {overflow: visible}
.btndiv > input[type="submit"] {-moz-user-select: none;border: 1px solid transparent;display: inline-block;font-size: 1rem;font-weight: normal;line-height: 1.25;padding: 0.5rem 1rem;text-align: center;transition: all 0.2s ease-in-out 0s;vertical-align: middle;white-space: nowrap}
.btndiv-primary > input[type="submit"] {background-color: #[-- STORE.LinkColor --];border-color: #[-- STORE.LinkColor --];color: #fff}
.btndiv-primary > input[type="submit"]:hover {background-color: #[-- STORE.VisitedLinkColor --];border-color: #[-- STORE.VisitedLinkColor --];color: #fff}
table.payment td.payment {text-align: right}
table.payment td.payment_value {text-align: left; font-size: 80%}
table.payment td.payment_value select, table.payment td.payment_value option, table.payment td.payment_value input {text-align: left; font-size: [-- STORE.FontSize --]}
input[name="cvv2"] {margin-right: 6px}
table.sec_image {margin: 30px auto}
td.sec_image {padding: 15px; background: #[-- STORE.TableShadeColor --]}
div.sec_image a {font-size: 80%}
body > div.d-inline-block, td.sec_image {border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}
</style>
</head>
<body id="subscription" class="text-center">
<div class="d-inline-block text-center">
[-- IF STORE.UseCompanyLogo --][-- IF STORE.CompanyLogo --]<div id="logo">[-- IF STORE.CompanyURL --]<a href="[-- STORE.CompanyURL --]">[-- END_IF --][-- STORE.CompanyLogo ONLY_ALT_TAG --][-- IF STORE.CompanyURL --]</a>[-- END_IF --]</div>[-- END_IF --][-- END_IF --]
<h1>[-- SUBSCRIPTION_TEXT.PageTitle --]</h1>
<div class="d-flex justify-content-center">
[-- SUBSCRIPTION_UPDATE_FORM --]
[-- SC_Payment --]
[-- IF SECURITYIMAGE --][-- SHIPSECURITYIMAGE --][-- END_IF --]
<div class="btndiv btndiv-primary">[-- SUBSCRIPTION_UPDATE_BUTTON --]</div>
[-- IF ShopSiteSecurityImage --][-- ShopSiteSecurityImage --][-- END_IF --]
</form>
</div>
</div>
</body>
</html>[-- END_DEFINE Subscription --]
##################################################################
[-- DEFINE SUBSCRIPTION_EMAIL --]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="content-language" content="[-- LOCALE_NAME --]">
<title>[-- SUBSCRIPTION_TEXT.PageTitle --]</title>
</head>
<body bgcolor="#[-- STORE.BackgroundColor --]" style="height: 100%; padding: 0px; margin: 0px" link="#[-- STORE.LinkColor --]" vlink="#[-- STORE.VisitedLinkColor --]">
<div style="padding: 20px 0px; background: #[-- STORE.BackgroundColor --]; color: #[-- STORE.TextColor --]; height: 100%; text-align: center; margin: 0px auto">
<div align="left" style="display: inline-block; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background: #FFFFFF; padding: 20px; margin: 0px auto 5% auto">
[-- IF STORE.UseCompanyLogo --][-- IF STORE.CompanyLogo --]<div style="margin: 0px auto 30px auto; max-width: 450px">[-- IF STORE.CompanyURL --]<a href="[-- STORE.CompanyURL --]">[-- END_IF --]<img src="[-- STORE.CompanyLogo URL_ONLY --]" alt="[-- STORE.Name REMOVE_HTML --]" style="max-width: 100%">[-- IF STORE.CompanyURL --]</a>[-- END_IF --]</div>[-- END_IF --][-- END_IF --]
<font face="[-- STORE.Font --]" style="font-size: [-- STORE.FontSize --]">
<p>[-- SUBSCRIPTION_FIELD.CustomerName --],</p>
[-- IF SUBSCRIPTION_FIELD.GatewayStatus "active" --]
<p>[-- SUBSCRIPTION_TEXT.EmailExpiring --]</p>
[-- ELSE --]
<p>[-- SUBSCRIPTION_TEXT.EmailSuspended --]</p>
[-- END_IF --]
<p>[-- SUBSCRIPTION_TEXT.ListOfProductsPreface --] [-- SUBSCRIPTION_UPDATE_LIST --]</p>
<p>[-- SUBSCRIPTION_LINK --]</p>
</font>
</div>
</div>
</body>
</html>[-- END_DEFINE SUBSCRIPTION_EMAIL --]
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:
[-- STORE.SC_YourShoppingCart --]
Last, add the following line to your custom page and custom product templates just above the </body> tag.
[-- INCLUDE AjaxAddToCart.sst PROCESS --]
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 --]
[-- Product.QuantityPricing VERTICAL --] - new vertical parameter for vertical table
[-- Product.OrderCheckout VERTICAL --] - new vertical parameter for vertical table
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 --]
[-- 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 --]
[-- STORE.Total --]
[-- STORE.or --]
[-- STORE.RequiredMenuSelection --]
[-- STORE.ContinueShoppingText --]
[-- STORE.SignInButtonText --]
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.
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);
}
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 --]
[-- PRODUCT.Video --]
[-- PRODUCT.ShippingDetails --]
[-- PRODUCT.Returns --]
[-- PRODUCT.Warranty --]
[-- PRODUCT.Specifications --]
[-- PRODUCT.Materials --]
[-- PRODUCT.OneLineAd --]
[-- PRODUCT.HowToUse --]
[-- IF PRODUCT.SizeFitGuide EQ I or T --][-- END_IF --]
[-- PRODUCT.SizeFitGuideImage --]
[-- PRODUCT.SizeFitGuideText --]
[-- PRODUCT.AsSeenInImage --]
[-- Product.SavedAmount --] - will give you the
difference between the product price and the sale amount
[-- 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.OutputSecureURL --] - does the same thing as [-- STORE.SC_Secure_Image_URL --]
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.
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.
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 --]
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
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.
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
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.
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.
Suggested CSS for this feature:
Pinterest Share & Pinterest Follow
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 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.
Google +1
New Parameters for Existing 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.
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.
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.
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.
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.
New IF Tag Parameters
ShopSite has had IF/END_IF tag functionality for years but now there are new parameters that you can use.
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.
Share On Facebook/Twitter
These tags should be placed in page and product templates.
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: