Product Templates in ShopSite

Basics

The basics for all products start with the product name, product SKU or item number, and the product description. All of these tags can be used in any of the 4 product DEFINES.

Name

All products in the store must have a product name, and you can display that name in your 4 product DEFINE's by adding [-- PRODUCT.Name --]. The code below also includes tags for the merchant to choose whether or not to display the product name on store pages, and if the product has a more information page, the product name will link to the more information page.

[-- IF PRODUCT.DisplayName --]
  [-- IF PRODUCT.DisplayMoreInformationPage --]
    [-- PRODUCT.Name --]
  [-- ELSE --]
    [-- PRODUCT.Name --]
  [-- END_IF --]
[-- END_IF --]

SKU

Products in the store are not required to have SKUs, and even when products do have SKUs, many merchants choose not to display the product SKU on store pages. The code below shows how you can include the option for merchants to display or not display the product SKU.

[-- IF PRODUCT.DisplaySKU --]
  [-- IF PRODUCT.Sku --]
    [-- STORE.SKU --]: [-- PRODUCT.Sku --]
  [-- END_IF --]
[-- END_IF --]

Description

The product description field is typically provided for shorter product descriptions, as this field can be included on category pages and in Google Product Search fields. The product description field does not have a toggle for merchants to display or not display this field.

[-- IF PRODUCT.ProductDescription --]
  
    [-- PRODUCT.ProductDescription --]
  
[-- END_IF --]

Price

Displaying the product price in your custom template can be as simple as using just the [-- PRODUCT.Price --] and [-- PRODUCT.SaleAmount --] tags, or it can be as complex as including all the different types of pricing displays, such as quantity pricing, alternate currency pricing, on sale price and regular price, and can also include all the various toggles for merchants to choose which prices to display and which not to display on store pages. The example below displays all those pricing elements mentioned with the exception of alternate currency pricing.

[-- IF PRODUCT.DisplayPrice --]


  [-- IF PRODUCT.QuantityPricing --]
    [-- PRODUCT.QuantityPricing --]


  [-- ELSE_IF PRODUCT.SaleAmount --]
    [-- IF PRODUCT.SaleOn --]
      [-- PRODUCT.Price --][-- PRODUCT.SaleAmount --]


    [-- ELSE --]
      [-- PRODUCT.Price --]
    [-- END_IF --]


  [-- ELSE --]
    [-- PRODUCT.Price --]
[-- END_IF --]

Advanced Price Display: Updating Price Dynamically

If you have ordering option pull down menus that adjust the price, you can add your own custom JavaScript to update the price based on the values in the various pull down menus. An example of what this JavaSCript might look like is shown below. For this example, you would put the id "prodselopts" in the element containing the pull down menus, and the id "totalprice" in the element containing the final price display.

Example $10.00

Here is what the product template code looks like in add to cart form section:

<span id="totalprice">[-- IF PRODUCT.SaleAmount --][-- PRODUCT.SaleAmount --][-- ELSE --][-- PRODUCT.Price --][-- END_IF --]</span>
<div id="prodselopts">[-- Order_Option_Menu Column --]</div>

Here is what the JavaScript looks like on that same page, typically placed at the bottom of the page, just before the </body> tag.

<script type="text/javascript">
(function($){
var oprice = ("[-- IF PRODUCT.SaleAmount --][-- PRODUCT.SaleAmount NO_SYMBOL --][-- ELSE --][-- PRODUCT.Price NO_SYMBOL --][-- END_IF --]").replace(",","");
var selects = $("#prodselopts select");
$("#prodselopts select").each(function(){
	$(this).change(function(){
		var arr = [];
		arr.push(oprice);
		for (i = 0; i < selects.length; i++) {
			var e = selects[i];
			var option = e.options[e.selectedIndex].value;
			var priceonly = parseFloat((option.substr(option.indexOf(";")+1)).replace(/[^0-9.-]/g, '')).toFixed(2);
			arr.push(priceonly);
		}
	var newarr = arr, n   = newarr.length, sum = 0;
	while(n--) {sum += parseFloat(newarr[n]) || 0;}
	$("#totalprice").html("$" + sum.toFixed(2));
	});
});
}(ss_jQuery));
</script>

Graphic

The product graphic tags are setup similar to the product name tags. The product graphic can be toggled on or off, and is often setup to link to the product's more information page.

[-- IF PRODUCT.DisplayGraphic --]
  [-- IF PRODUCT.DisplayMoreInformationPage --]
    [-- PRODUCT.Graphic ONLY_ALT_TAG --]
  [-- ELSE --]
    [-- PRODUCT.Graphic ONLY_ALT_TAG --]
  [-- END_IF --]
[-- END_IF --]

Add To Cart Form

Much like you have seen with other elements of the product information, merchants can toggle different product add to cart options on or off, and can even specify where the add to cart form is displayed and not displayed.

[-- IF PRODUCT.DisplayAddtoCart "All Pages" --]







  [-- IF PRODUCT.DisplayOrderingOptions --]
    [-- IF PRODUCT.OptionText --][-- PRODUCT.OptionText --]
[-- END_IF --]
    [-- Order_Option_Menu Column --]



    [-- IF PRODUCT.OptionsBox --]
      [-- IF PRODUCT.OptionsBoxHeader --][-- PRODUCT.OptionsBoxHeader --]
[-- END_IF --]
      
    [-- END_IF --]
  [-- END_IF --]


  [-- IF PRODUCT.DisplayOrderQuantity --][-- STORE.Qty --]: [-- END_IF --]


  [-- IF ADDIMAGE? --]
    

  [-- ELSE --]
    
  [-- END_IF --]

[-- END_IF --]

More Information Page

The more information page is an entire HTML document starting with the DOCTYPE tag, and ending with the </html> tag. Just before the DOCTYPE tag, add [-- DEFINE MORE_INFO_PAGE --], and just after the closing html tag add [-- END_DEFINE MORE_INFO_PAGE --].

[-- DEFINE MORE_INFO_PAGE --]
<!DOCTYPE HTML>
<html>
<head></head>
<body></body>
</html>
[-- END_DEFINE MORE_INFO_PAGE --]

Title & Meta Tags

Every webpage for a website should have its own unique title tag and meta tags. These tags are used by search engines when displaying search results. Read the SEO basics for tips on setting up beneficial title and meta description tags for your pages and products. The code below shows an example of what the title and meta tags might be for products in your store. The title field uses each product's title field or the name field if there isn't a title. The og: tags are used by many social media sites such as facebook.

[-- IF PRODUCT.MoreInformationTitle --][-- PRODUCT.MoreInformationTitle --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]





[-- IF PRODUCT.MoreInformationMetaDescription --]
  
[-- END_IF --]

[-- IF PRODUCT.OneLineAd --]
  
  
[-- END_IF --]



[-- IF PRODUCT.MoreInformationGraphic --]
  
  
[-- ELSE_IF PRODUCT.Graphic --]
  
  
[-- END_IF --]

More Info Graphic

There are many ways for designers to implement the more information graphics on the more information page. From using a single tag for ShopSite to add the more information graphic and thumbnail hover options for all the extra more information images, to individual tags for each image and extra more information image. The options listed below are from least involved to most involved.

Option 1: One and Done

Adding the single tag shown below will add the code for 2 DIVs. The first DIV contains the more information graphic. The second DIV contains a table showing all the extra more information images. You can configure how many columns are in the table of thumbnails under Preferences > More Info Pages.

[-- MoreInfoImageRow --]

Option 2: Loop With Zoom

The code below starts with an IF tag to see if the more information image zoom feature is enabled (Preferences > More Info Pages). If the zoom feature is enabled, the code loops through the product images to display them is a more controlled way. This method is used in the BB templates. If the zoom feature is not enabled, the regular setup described in option 1 is used. The benefit of using this method over option 1 is that this method, if the zoom is enabled, does not have tables, so it is better for responsive design sites.

[-- IF Store.ImageZoom --]
<script type="text/javascript">$(document).ready(function() {$('.jqzoom').jqzoom({zoomType: 'standard', lens:true, preloadImages: false, zoomType: 'innerzoom', alwaysOn:false[-- IF VAR.ZoomTitle "no" --], title:false[-- END_IF --]});});</script>
     
         
             
         
[-- 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" --]
        
          
         
         
   [-- FOR VAR.I 1 20 --]
     [-- IF PRODUCT.MoreInfoImage[VAR.I] --]
    [-- Product.MoreInfoImage[VAR.I] SS_SIZE3 ONLY_ALT_TAG --]
     [-- END_IF --]
   [-- END_FOR --]
        
       
[-- END_IF --]
      
[-- ELSE --]
  [-- MoreInfoImageRow --]
[-- END_IF --]

Option 3: Individual Image Tags

The tags listed below would be used if you want to implement your own image display feature. You likely won't use all these tags, but they are shown so you can see the different tag parameters available.

[-- PRODUCT.MoreInformationGraphic --]

[-- PRODUCT.MoreInformationGraphic ONLY_ALT_TAG --]

<img [-- PRODUCT.MoreInformationGraphic REMOVE_HTML --]>

Each tag below has XX where you would actually have the extra image number 1-20. So if the tag is [-- PRODUCT.MoreInfoImageXX --] and you want to display the extra more information image 1, you would use [-- PRODUCT.MoreInfoImage1 --].

[-- PRODUCT.MoreInfoImageXX --]

[-- PRODUCT.MoreInfoImageXX ONLY_ALT_TAG --]

<img [-- PRODUCT.MoreInfoImageXX REMOVE_HTML --]>

Detailed Description Fields

There are many product fields that are typically only used on the product more information page. These fields are all listed below in a way that they might be used.

[-- IF PRODUCT.MoreInformationText --][-- PRODUCT.MoreInformationText --][-- END_IF --]
[-- IF PRODUCT.Video --][-- PRODUCT.Video --][-- END_IF --]
[-- IF PRODUCT.ShippingDetails --][-- PRODUCT.ShippingDetails --][-- END_IF --]
[-- IF PRODUCT.Returns --][-- PRODUCT.Returns --][-- END_IF --]
[-- IF PRODUCT.Warranty --][-- PRODUCT.Warranty --][-- END_IF --]
[-- IF PRODUCT.Specifications --][-- PRODUCT.Specifications --][-- END_IF --]
[-- IF PRODUCT.Materials --][-- PRODUCT.Materials --][-- END_IF --]
[-- IF PRODUCT.HowToUse --][-- PRODUCT.HowToUse --][-- END_IF --]

[-- IF VAR.SizeFitRadio "yes" --]
  [-- IF PRODUCT.SizeFitGuide EQ I --]
    
  [-- ELSE --]
  	[-- PRODUCT.SizeFitGuideText --]
  [-- END_IF --]
[-- END_IF --]

Reviews

[-- IF REVIEWS --][-- REVIEWS_STARS --][-- END_IF --]

[-- IF REVIEWS --]
  [-- STORE.Reviews_Header --]

  
  [-- REVIEWS_STARS --]  [-- REVIEWS_COUNT --]

  [-- REVIEWS_WRITE_REVIEW_LINK --] | [-- REVIEWS_READ_REVIEWS_LINK --]
  [-- REVIEWS_FEATURED --]

[-- END_IF --]

Wish List

[-- IF WishList --][-- WishList --][-- END_IF --]

Extra Product Fields

[-- IF PRODUCT.Field1 --]
  [-- STORE.ProductField1 --]: [-- PRODUCT.Field1 --]
[-- END_IF --]

Cross Sell

First add a new DEFINE section to your product template to define how each individual cross sell product should be displayed.

[-- DEFINE PRODUCT_CROSS_SELL --]

  [-- IF PRODUCT.Graphic --][-- IF PRODUCT.MoreInformationPage --][-- PRODUCT.Graphic ONLY_ALT_TAG --][-- ELSE --][-- PRODUCT.Graphic ONLY_ALT_TAG --][-- END_IF --][-- END_IF --]
  [-- IF PRODUCT.MoreInformationPage --][-- PRODUCT.Name --][-- ELSE --][-- PRODUCT.Name --][-- END_IF --]
  [-- IF PRODUCT.SaleAmount --][-- PRODUCT.Price --] [-- PRODUCT.SaleAmount --][-- ELSE --][-- PRODUCT.Price --][-- END_IF --]

[-- END_DEFINE PRODUCT_CROSS_SELL --]

Then, in your DEFINE MORE_INFO_PAGE section of your template where you would like to have these cross sell products displayed, add the LOOP tags shown below to loop through any cross sell items assigned to each product.

[-- IF PRODUCT.CrossSell "0" --][-- ELSE --]
<h2>[-- STORE.CartCrossSellHeader --]</h2>
<div>
    [-- LOOP PRODUCT_CROSS_SELL --]
    <div class="prodcrosssell">[-- PRODUCT_CROSS_SELL --]</div>
    [-- END_LOOP PRODUCT_CROSS_SELL --]
</div>
[-- END_IF --]