ShopSite Big Beefy (BB) Theme

The ShopSite BB template files were created to make it easy for designers to create the main look for the page (ie. header, navigation menus and footer), while having all the innerds already coded and styled for them to utilize most ShopSite features. These template files make it so that designers can create custom templates that will automatically be updated with the majority of new ShopSite features when there is a new release. Another benefit of these templates is that they work with responsive design sites.

How To Use The BB Template Files

Step 1: Select The BareBones Theme. Start by going to Preferences > Themes, and select the Bare Bones theme, then Save Changes.

Step 2: Change Color 5 To #FFFFFF. It is important that you go to Preferences > Layout Settings, and change the Store Color 5 to #FFFFFF (or something that is not #BBBBBB or #0000??) so that the files in step 3 are used instead of the regular header, footer and CSS files for the Bare Bones theme.

Step 3: Add These Custom Template Files. Download the ZIP file containing a BB-Header.ss and BB-Footer.sst include file, as well as a bb-custom.css publish file. After downloading the ZIP file, you can upload the 3 files into your ShopSite store under Merchandising > Custom Templates > Includes.

Step 4: Add Your Code To The Custom Template Files. Now you can edit the BB-Header.sst and BB-Footer include files to contain whatever information and code you want. These files 'wrap' around the main body of the page. You will can open the main content area in the BB-Header.sst (ie <div id="main-content">), then close it in the BB-Footer.sst (ie </div>). Follow the directions found in the BB-Header.sst and BB-Footer.sst when you are linking to CSS, JavaScript and image files. When you are ready to view your site, go to Utilities > Publish > Regenerate.

Suggested Header and Footer Tag Enhancements

The BB template files include all the necessary code for the main body of all the store pages. However, for elements that are often included in the header, footer, and side navigation bars, you will need to add the code for those elements. Below is a list of tags and code that you can copy and paste into the BB-Header.sst or BB-Footer.sst include files to further customize them. Use as many or as few of the tags below in your BB-Header.sst and BB-Footer.sst include files.

• [-- IF PageMenu --][-- PageMenu no_jscript --][-- END_IF --] - main menu with flyouts created under Preferences > Navigation.
• [-- IF PageLinks.Footer --][-- PageLinks.Footer --][-- END_IF --] - footer menu enabled under Preferences > Navigation.
• [-- INCLUDE BB-SearchField.sst PROCESS --] - store search field.
• [-- IF STORE.UseCompanyLogo --][-- STORE.CompanyLink --][-- END_IF --] - store logo set under Preferences > Layout Settings.
• [-- IF STORE.HeaderImage --][-- STORE.HeaderLink --][-- END_IF --] - store header image set under Preferences > Layout Settings.
• [-- IF VAR.PageHeader "yes" --][-- HEADER --][-- END_IF --] - displaying the store header found under Preferences > Layout Setttings.
• [-- IF VAR.PageFooter "yes" --][-- FOOTER --][-- END_IF --] - displaying the store footer found under Preferences > Layout Setttings.
• [-- IF MiniCart --]<script type="text/javascript">DisplayMiniCart("Subtotal");</script>[-- END_IF --] - mini cart enabled under Commerce Setup > Order System > Layout Info (pro only). To have the mini cart only display the total number of items (no subtotal), change "Subtotal" to "ItemCount". If you want to display the details of the cart, including the items in the cart, their prices and their quantities in a flyout menu, change "Subtotal" to "Detail".
• [-- IF SC_Registration --]<script type="text/javascript">DisplayRegistration("","|","or");</script>[-- END_IF --] - customer registration links available in ShopSite Pro. If you are adding the registration links in the header or footer of your custom template, and you would like to remove the registration links from the top of the shopping cart screen, add [-- VAR.DisplayCartReg "no" --] somewhere within your BB-Header.sst include file. If you want the registration links in a flyout menu rather than regular HTML links, you can use "flyout" inside the parenthesises instead of "".
• [-- IF GiftCert --][-- GiftCertLink --][-- END_IF --] - the gift certificate link that goes to the gift certificate page.
• newsletter
• [-- SOCIAL_FOLLOW --] - displays the "follow us" Facebook, Twitter, Google+, and Pinterest company links setup under Merchandising > Social Media.
• [-- IF STORE.TextA --][-- STORE.TextA --][-- END_IF --] - contents of the text a field found under Preferences > Layout Settings. The reason for the VAR tag is because if you don't use these fields in your header or footer, they will be used in the left and right navigation menus. Make sure you include [-- VAR.UseTextA "other" --] in the BB-Header.sst include file.
• [-- IF STORE.TextB --][-- STORE.TextB --][-- END_IF --] - contents of the text b field found under Preferences > Layout Settings. The reason for the VAR tag is because if you don't use these fields in your header or footer, they will be used in the left and right navigation menus. Make sure you include [-- VAR.UseTextB "other" --] in the BB-Header.sst include file.
• [-- IF STORE.Image1 --][-- STORE.Image1 --][-- END_IF --] - image 1 field found under Preferences > Layout Settings. The reason for the VAR tag is because if you don't use these fields in your header or footer, they will be used in the left and right navigation menus. Make sure you include [-- VAR.UseImage1 "other" --] in the BB-Header.sst include file.
• [-- IF STORE.Image2 --][-- STORE.Image2 --][-- END_IF --] - image 2 field found under Preferences > Layout Settings. The reason for the VAR tag is because if you don't use these fields in your header or footer, they will be used in the left and right navigation menus. Make sure you include [-- VAR.UseImage1 "other" --] in the BB-Header.sst include file.

Optional VAR Tags

Below are a list of VAR tags that you can add into your BB-Header.sst include file to change some of the features within the main body of the page.

• [-- VAR.DisplayTopAddButton "yes" --] - in the page multi add to cart template for this theme, there is only one add to cart button at the bottom of the screen. If you have a long list of products, you may want to have an add to cart button at the top as well. Options for this tag are "yes" or "no"
• [-- VAR.Breadcrumbs "yes" --] - breadcrumbs are on by default. Options for this tag are "yes" or "no"
• [-- VAR.SubProductPrice "range" --] - when subproducts are enabled the subproduct price range is displayed on category pages. Options for this tag are "range" "minonly" to display the minimum subproduct price only and "maxonly" to display the maximum subproduct price only.
• [-- VAR.SubProductType "radio" --] - subproducts can be displayed as a list of radio buttons or checkboxes. Options for this tag are "radio" or "checkbox"
• [-- VAR.NarrowResponsiveDesign "fullwidth" --] - responsive design automatically re-columns the product and page links in the main body. If you have right and/or left navigation menus, then you will want the columns to shrink faster (if you are keeping the menus as your page shrinks). The template will automatically pick one that should work for your store based on the ShopSite menus that are setup under Preferences > Navigation. If you are hard coding your own side menus in your template or want to bypass the set width, you can modify this VAR tag in your BB-Header.sst include file. Options for this tag are "fullwidth" "sidenav" and "bothnavs".
• [-- VAR.GiftCertLeft "no" --] - the default location for the gift certificate link is in the left navigation menu. If you are not using the left navigation menu, or would like the gift certificate link somewhere else in your custom template, add [-- VAR.GiftCertLeft "no" --] to your BB-Header.sst include file, then add the code for the gift certificate link wherever you would like it to appear.
• Pricing Layout VARs - the default price layout on more information pages uses the BB-PriceTwoLine.sst include file. There are 7 other price layout include files to choose from. Review the Pricing Layouts for details and instructions on using other pricing layout include files in your store.

Other Themes Using These Template Files Include: Boilerplate, Central, Compact, Dauntless, Delicate, Ever Short Nav, Familiar, Familiar 2, Fearless, Haven, Intrepid, Sector, Selvage, Splay, Trace, Trace Colored, White, and Bare Bones

Additional Template Variations

If you want a variation of the BB templates that is not built into ShopSite, you can test out the templates below to see if any of them fit your needs. All you need to do is download the template files, upload them into your store (Merchandising > Custom Templates), then assign the new template as your desired template and publish.

Page Templates
BB-InnerPageCarousel.sst - Moves the carousel into the main body of the page.

Product Templates
BB-Product-WithMenus.sst - Includes any side menus enabled onto the product more information pages (2 files to upload).

Complete List Of Template Files

Below is a complete list of template files that are being used by the BB templates as well as a brief description of how or where the file is being used. Not all files are being used in all stores.

To modify any of these template files you would go to Merchandising > Custom Templates, and click on the section the template file is in (i.e. "Product Templates" or the product template files or "Include Files" for include or publish files). Then click on "Copy ShopSite Template." Make a copy of the ShopSite template you want to edit. Save changes. Then make a copy of your copy and rename it the exact same name as the original. (You can then delete your original copy with a different name). Your copy will override the original template file. If you ever want to revert back to the original template file you can simply delete (or rename) your copied file and regenerate your site.

Page Templates

BB.sst - Default page template.
BB-AccentsAboveSideMenus.sst - Optional page template. Displays some page information (i.e. page name and text 1) above any side navigation menus enabled.
BB-InnerPageCarousel.sst - Optional page template. Places the home page carousel inside the main content, within any side navigation menus enabled.
BB-NoSideMenus.sst - Optional page template. Does not display any side navigation menus enabled. Also used for the page link in search results.
BB-ProductMultiAddToCart.sst - Optional page template. Displays all products assigned to this page in a multi-add-to-cart format with checkboxes instead of product add to cart buttons.

Product Templates

BB-Product.sst - Default product template.
BB-Product-2Columns.sst - Optional product template. Displays product information on the more information page in 2 columns.
BB-Product-2ColumnsTabs.sst - Optional product template. Displays product information on the more information page in 2 columns with detailed information displayed in a tab format.
BB-Product-FullBrowserWidthImageTabs.sst - Optional product template. Displays the more information page image as a full width banner image on the product more information page. Moves the "zoom" feature to be used with the additional more information images only.
BB-Product-Scrolling.sst - Optional product template. Displays all detailed product information in a each field's own large section on the more information page.
BB-Product-SubCheckbox.sst - Optional product template. Just like the BB-Product.sst template except it displays subproducts in a multi-add-to-cart format.
BB-Product-SubPulldown.sst - Optional product template. Just like the BB-Product.sst template except it displays subproducts in a pull down menu.
BB-Product-WithMenus.sst - Optional product template. Includes any side navigation menus enabled on the more information page.

Other Templates

BB-Cart.sst - Default shopping cart template.
BB-CartWithSideMenus.sst - Optional shopping cart template. Includes any side navigation menus enabled on the first page of the shopping cart.
BB-Search.sst - Default search results template.
BB-Search-WithSideMenus.sst - Optional search results template. Includes any side navigation menus enabled on the search results screen.
BB-GiftCert.sst - Default gift certificate template.
BB-GiftCert-WithSideMenus.sst - Optional gift certificate template. Includes any side navigation menus enabled on the gift certificate screen.
BB-Registration.sst - Default customer registration template.
BB-RegistrationWithSideMenus.sst - Optional customer registration template. Includes any side navigation menus enabled on the customer registration screens.
BB-WishList.sst - Default wish list template.
BB-WishList-WithSideMenus.sst - Optional wish list template. Includes any side navigation menus enabled on the wish list screens.

Include Files

BB-AbandonCartPopUp.sst - Added to shopping cart screen if Abandon Cart feature is enabled.
BB-BXSliderCarousel.sst - Only used on the page with the Carousel feature assigned.
BB-EndHead.sst - Not used. Can be enabled if the 'enhanced for page speed' VAR tag is enabled in the BB-VARs-DOCTYPE.sst include file. If used, this removes ShopSite JavaScript, Jquery and JSON files in the >head< section.
BB-Footer-BareBones.sst - A very basic footer only used by the "Bare Bones" theme.
BB-Footer.sst - Used by all BB themes. Either includes custom code, or will determine which footer file to use for each theme.
BB-Footer1.sst - Footer variation.
BB-Footer2.sst - Footer variation.
BB-Footer3.sst - Footer variation.
BB-Footer4.sst - Footer variation.
BB-Footer5.sst - Footer variation.
BB-Footer6.sst - Footer variation.
BB-Footer7.sst - Footer variation.
BB-FooterScripts.sst - Includes end-of-page scripts and is used in all template types.
BB-Head.sst - Code in the >head< section for all BB themes. Determines the CSS and JavaScript files to use in the >head<.
BB-Header-XXX.sst - These are multiple files, where the XXX is the name of the theme (i.e. BB-Header-Central.sst is the header for the "Central" theme).
BB-Header.sst - Used by all BB themes. Either includes custom code, or will determine which header file to use for each theme.
BB-LeftMenu.sst - Used by all themes IF the left navigation is enabled.
BB-MatchHeight.js - JavaScript used to match the height of the product area in each row on category pages.
BB-PageMenu-OneLineHeader.sst - Code for the navigation menu if all header elements are on one line together.
BB-PageMenu.sst - Code for the navigation menu when on its own line.
BB-PriceBreakdown.sst - Product price variation. Lists on sale and total savings similar to Amazon.com.
BB-PriceOneLine.sst - Product price variation.
BB-PriceOnly.sst - Product price variation.
BB-PriceOnlyPlus.sst - Product price variation.
BB-PriceQuickNDirty.sst - Product price variation.
BB-PriceRounded.sst - Product price variation.
BB-PriceSimple.sst - Product price variation.
BB-PriceSummary.sst - Product price variation.
BB-PriceTable.sst - Product price variation.
BB-PriceTitled.sst - Product price variation.
BB-PriceTwoLine.sst - Product price variation. Most common.
BB-ProductCrossSellDefine-DoubleColumn.sst - Product cross sell display variation.
BB-ProductCrossSellDefine-Infinite.sst - Product cross sell display variation.
BB-ProductCrossSellDefine-SingleColumn.sst - Product cross sell display variation.
BB-ProductCrossSellDefine-Stripped.sst - Product cross sell display variation.
BB-ProductCrossSellDefine.sst - Product cross sell display variation. Most common.
BB-ProductDefine-MultiAddToCart.sst - Product define for the multi add to cart template.
BB-ProductDefine.sst - Controls how product is displayed on category pages.
BB-ProductGraphicZoom-ExtrasOnly.sst - Product zoom feature using extra product images, not the main more information image.
BB-ProductGraphicZoom.sst - Default product zoom feature.
BB-ProductHead.sst - Includes meta OG tags and other more information page specific head information.
BB-ProductPageContent-2Columns.sst - More information page that goes with the BB-Product-2Columns.sst product template. Displays product information on the more information page in 2 columns.
BB-ProductPageContent-2ColumnsTabs.sst - More information page that goes with the BB-Product-2ColumnsTabs.sst product template. Displays product information on the more information page in 2 columns with detailed information displayed in a tab format.
BB-ProductPageContent-FullBrowserWidthImageTabs.sst - More information page that goes with the BB-Product-FullBrowserWidthImageTabs.sst product template. Displays the more information page image as a full width banner image on the product more information page. Moves the "zoom" feature to be used with the additional more information images only.
BB-ProductPageContent-Scrolling.sst - More information page that goes with the BB-Product-Scrolling.sst product template. Displays all detailed product information in a each field's own large section on the more information page.
BB-ProductPageContent-SubCheckbox.sst - More information page that goes with the BB-Product-SubCheckbox.sst product template. Just like the BB-Product.sst template except it displays subproducts in a multi-add-to-cart format.
BB-ProductPageContent-SubPulldown.sst - More information page that goes with the BB-Product-SubPulldown.sst product template. Just like the BB-Product.sst template except it displays subproducts in a pull down menu.
BB-ProductPageContent-WithMenus.sst - More information page that goes with the BB-Product-WithMenus.sst product template. Includes any side navigation menus enabled on the more information page.
BB-ProductPageContent.sst - Default more information page code.
BB-RegistrationFooter.sst - Footer added to all registration screens.
BB-RegistrationHeader.sst - Header added to all registration screens.
BB-RightMenu.sst - Used by all themes IF the right navigation is enabled.
BB-SearchField.sst - Code for the search field.
BB-VARs-DOCTYPE.sst - Sets the VAR tags for the BB templates as well as starts the page DOCTYPE tag and standard META tags.
BB-VARs-Page.sst - Sets the VAR tags that are page specific such as alignment, borders and columns.