>
>
>

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.


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.

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.