Template Pages

Change the design of the overall Look of your Site

Purpose: This file defines the overall navigation and user interface of the store. 99.9% of the time, this is the only template you will ever need to edit!

Think of our Code Blocks as code includes within your HTML document. For example, if you wanted to add a breadcrumb to your page, you need the breadcrumb code block, plus the necessary variables inside that codeblock.

Code blocks will typically begin and end with commented out areas of HTML code which will contain the name of the block for easier reference.

Note: It is important to preserve the commented tags to ensure the software performs correctly.

For example:

    [TITLE]
    [META]
    [template]
    [stylesheet]
  <!--START: FRAME_RSSFEEDS -->
    [store_url]
    <!--START: RSSFEEDS_CATEGORIES-->
      [category_name]
      [store_url]
      [catid]
    <!--END: RSSFEEDS_CATEGORIES-->
  <!--END: FRAME_RSSFEEDS -->
  <!--START: quicksearch-->
  <!--END: quicksearch-->
    [screenwidth]
  <!--START: username-->
    [account_greeting]
    [username]
  <!--END: username-->
  <!--START: global_header-->
    [storename]
    [storeslogan]
  <!--END: global_header-->
  <!--START: shopping_cart-->
    [ITEMSINCART]
    [SUBTOTAL]
  <!--End: shopping_cart-->
  <!--START: FRAME_SEARCH-->
  <!--END: FRAME_SEARCH-->
  <!--START: FRAME_MENU-->
    <!--START: menuitems_view-->
      <!--START: TOP_LINK_FORMAT-->
        [link_id]
        [link_target]
        [link_name]
      <!--END: TOP_LINK_FORMAT-->
    <!--END: menuitems_view-->
  <!--END: FRAME_MENU-->
  <!--START: LEFT BAR-->
    <!--START: LEFT_BAR_BLOCKS-->
      <!--START: TOP_SELLERS_BLOCK-->
        [frame_top-sellers]
        <!--START: topsellers-->
          <!--START: topsellers_topitem-->
            [catalogid]
            [thumbnail]
            [name]
            <!--START: ITEMPRICE-->
              [ITEMPRICE]
            <!--END: ITEMPRICE-->
            <!--START: SALEPRICE-->
              [ITEMPRICE]
              [ITEMSALEPRICE]
            <!--END: SALEPRICE-->
            <!--START: product_review_average-->
              [review_average]
            <!--END: product_review_average-->
          <!--END: topsellers_topitem-->
          <!--START: topsellers_item-->
            [ranking]
            [catalogid]
            [thumbnail]
            [name]
            <!--START: ITEMPRICE-->
              [ITEMPRICE]
            <!--END: ITEMPRICE-->
            <!--START: SALEPRICE-->
              [ITEMSALEPRICE]
            <!--END: SALEPRICE-->
              [catalogid]
            <!--START: product_review_average-->
              [review_average]
            <!--END: product_review_average-->
          <!--END: topsellers_item-->
        <!--END: topsellers-->
      <!--END: TOP_SELLERS_BLOCK-->
      <!--START: FRAME_CATEGORY-->
        [frame_categories]
        <!--START: CATEGORIES-->
          <!--START: CATEGORY_FORMAT-->
          <!--END: CATEGORY_FORMAT-->
          <!--START: SUB_CATEGORY_FORMAT-->
          <!--END: SUB_CATEGORY_FORMAT-->
        <!--END: CATEGORIES-->
      <!--END: FRAME_CATEGORY-->
      <!--START: FRAME_BYPRICE-->
        [frame_byprice]
        <!--START: byprice_format-->
          [id]
          [title]
        <!--END: byprice_format-->
      <!--END: FRAME_BYPRICE-->
      <!--START: FRAME_MANUFACTURER-->
        [frame_manufacturer]
        <!--START: manufacturer_format-->
          [mfgid]
          [manufacturer]
        <!--END: manufacturer_format-->
      <!--END: FRAME_MANUFACTURER-->
      <!--START: FRAME_MAILLIST-->
        [frame_mailinglist]
        [mailinglist_text]
        [mailinglist_button]
        [mailinglist_subscribe]
        [mailinglist_unsubscribe]
      <!--END: FRAME_MAILLIST-->
      <!--START: LEFT_BANNER-->
        [LEFT_BANNER]
      <!--END: LEFT_BANNER-->
    <!--END: LEFT_BAR_BLOCKS-->
  <!--END: LEFT BAR-->
  <!--start middle column-->
  <!--end middle column-->
  <!--START: RIGHT BAR-->
    <!--START: RIGHT_BAR_BLOCKS-->
      <!--START: NEW_RELEASES_BLOCK-->
        [frame_new-releases]
        <!--START: newreleases-->
          <!--START: newreleases_topitem-->
            [catalogid]
            [thumbnail]
            [name]
            <!--START: ITEMPRICE-->
              [ITEMPRICE]
            <!--END: ITEMPRICE-->
            <!--START: SALEPRICE-->
              [ITEMPRICE]
              [ITEMSALEPRICE]
            <!--END: SALEPRICE-->
            <!--START: product_review_average-->
              [review_average]
            <!--END: product_review_average-->
            [catalogid]
          <!--END: newreleases_topitem-->
          <!--START: newreleases_item-->
            [catalogid]
            [name]
            <!--START: ITEMPRICE-->
              [ITEMPRICE]
            <!--END: ITEMPRICE-->
            <!--START: SALEPRICE-->
              [ITEMPRICE]
              [ITEMSALEPRICE]
            <!--END: SALEPRICE-->
            <!--START: product_review_average-->
              [review_average]
            <!--END: product_review_average-->
          <!--END: newreleases_item-->
        <!--END: newreleases-->
      <!--END: NEW_RELEASES_BLOCK-->
      <!--START: RIGHT_BANNER-->
        [RIGHT_BANNER]
      <!--END: RIGHT_BANNER-->
    <!--END: RIGHT_BAR_BLOCKS-->
  <!--END: RIGHT BAR-->
  <!--START: FRAME_LINKS-->
    <!--START: LINKS-->
      <!--START: LINK_FORMAT-->
        [link_id]
        [link_target]
        [link_name]
        [template]
      <!--END: LINK_FORMAT-->
    <!--END: LINKS-->
  <!--END: FRAME_LINKS-->
    [frame_copyright1]
    [GLOBAL_FOOTER]
  <!--START: 3dcart stats-->
    [catalogid]
    [catid]
  <!--END: 3dcart stats-->

Dynamic Code Blocks: The frame.html file itself contains the following code blocks which are dynamically inserted or removed based on settings/configurations set within the Shift4Shop Online Store Manager. In the following list, we will specify the area of the Online Store Manager where these settings are configured.

  • FRAME_RSSFEEDS - If "Disable RSS feeds" is toggled in the Online Store Manager, this block is dynamically omitted from the frame. (Settings ->General ->Store Settings)
  • quicksearch - If "Hide Quick Search" feature is not used, this Code Block is inserted dynamically into the frame. (Settings ->Design ->Store Settings)
  • username - If customer is not logged in, this block is removed. Alternately, if the customer is logged in, the applicable variables inside are replaced.
  • global_header - If a global header is specified in the Online Store Manager, this Code Block is removed and the header specified is used instead. (Settings ->Design ->Header and Footer)
  • shopping_cart - This Code Block displays the number of items in the customer's shopping cart. Additionally, if "Hide Empty Shopping Cart" is enabled in the Online Store Manager, the block will only apply after adding items to the cart. (Settings ->General ->Store Settings)
  • FRAME_SEARCH - This block is removed if the Store's search function is turned off. (Settings ->General ->Store Settings)
  • FRAME_MENU - Removed if "Hide Menu links" is enabled in the Online Store Manager. (Settings ->General ->Store Settings)
  • TOP_SELLERS_BLOCK - This Code Block is removed if the Top Sellers feature is turned off in the Online Store Manager. (Settings ->General ->Store Settings)
  • product_review_average - If Product Reviews are hidden, this Code Block is dynamically removed. (Settings ->General ->Store Modules)
  • FRAME_CATEGORY - This Code Block is removed if "Hide Categories" is enabled in the Online Store Manager. (Settings ->General ->Store Settings)
  • SUB_CATEGORY_FORMAT - This Block is removed if the "Hide Subcategories" option is enabled in the Online Store Manager. (Settings ->General ->Store Settings)
  • FRAME_BYPRICE - This Code Block is Removed if "Hide Browse by Price" is enabled. (Settings ->General ->Store Settings)
  • FRAME_MANUFACTURER - This Code Block is Removed if "Hide Browse by Manufacturer" is enabled. (Settings ->General ->Store Settings)
  • FRAME_MAILLIST - If the "Hide Mailing List" checkbox is enabled in the Online Store Manager, this Code Block is Removed. (Settings ->General ->Store Settings)
  • LEFT_BANNER - Displays content added in the Global Left Banner area of the Online Store Manager. If no content is present, the blocks are removed. (Settings ->Design ->Header and Footer)
  • newreleases - This Code Block is Removed if "Hide New Releases" is enabled in the Online Store Manager. (Settings ->Design ->Store Settings)
  • RIGHT_BANNER - Displays content added inthe Global Right Banner area of the Online Store Manager. If no content is present, the blocks are removed. (Settings ->Design ->Header and Footer)
  • FRAME_LINKS - This Code Block is Removed if "Hide Links (extra pages)" is enabled in the Online Store Manager. (Settings ->Design ->Store Settings)

There is also a very special block of code called 3dcart stats which contains special scripting elements intended to provide the store's statistical reporting information. (See Reports section in the Online Store Manager.)

Note: Several of these variables are used in multiple places on the page, with their dynamic content controlled by the code block used in each instance.

  • [TITLE] - Dynamically inserts and references the individual page titles during navigation.
  • [META] - Dynamically inserts and references the individual page META tags during navigation.
  • [template] - This Variable dynamically inserts the design Theme's folder name wherever a path to the theme folder needs to be specified. (Settings ->Design ->Themes & Styles)
  • [stylesheet] - Dynamically inserts the Theme's applicable CSS file. (Settings ->Design ->Themes & Styles)
  • [store_url] - Inserts the store's URL wherever an absolute path is required.
  • [category_name] - For RSS feeds, this variable inserts the respective Category's name when needed.
  • [catid] - Used by the Software to reference/insert the applcable Category ID when needed.
  • [screenwidth] - Determines the overall screen width of the site as specified in the Online Store Manager. (See Settings ->Design ->Header and Footer)
  • [account_greeting] - Displays the Title of the "Hello,
  • [username]" message when a shopper is logged into their account. (See Settings ->Design ->Store Language)
  • [username] - Inserts the Shopper's name when they are logged into their Customer Record/Account.
  • [frame_search] - Displays the Title of the the store's Search Bar "Search" wording. (See Settings ->Design ->Store Language)
  • [storename] - This variable inserts the Store Name information. (See Settings ->Design ->Header and Footer)
  • [storeslogan] - This variable inserts the Store Slogan information. (See Settings ->Design ->Header and Footer)
      • Note: Applying a logo to the store in the Header and Footer section will take the place of both store name and slogan variables and insert the logo instead.
  • [ITEMSINCART] - Displays the number of items currently in the Shopper's cart.
  • [SUBTOTAL] - Inserts the Shopper's current subtotal.
  • [link_id] - This variable is used by the Software to insert the applicable database ID of menu and extra page links. (See Settings ->Design ->Site Content)
  • [link_target] - Inserts the designated target of the menu and extra page links. (See Settings ->Design ->Site Content)
  • [link_name] - Inserts the designated name of the menu and extra page links. (See Settings ->Design ->Site Content)
  • [frame_top-sellers] - Displays the Title of the "Top Sellers" area of the site. (See Settings ->Design ->Store Language)
  • [catalogid] - Inserts the individual product Database ID numbers where products are displayed.
  • [thumbnail] - Inserts the individual product Thumbnails where products are displayed.
  • [name] - Inserts the individual product Name information where products are displayed.
  • [ITEMPRICE] - Inserts the individual product Price information where products are displayed.
  • [ITEMSALEPRICE] - Inserts the individual product Sale Price information where products are displayed.
  • [review_average] - Inserts the individual product Review Averages where products are displayed.
  • [ranking] - Inserts the ranking information for the "Top Seller" specific products.
  • [frame_categories] - Displays the Title of the "Categories" area of the site. (See Settings ->Design ->Store Language)
  • [frame_byprice] - Displays the Title of the "Browse by Price" area of the site. (See Settings ->Design ->Store Language)
  • [id] - Used by the Software to provide the proper linking for the "Browse by Price" functionality.
  • [title] - Used by the Software to provide the price range titles for the "Browse by Price" functionality.
  • [frame_manufacturer] - Displays the Title of the "Manfucturer" area of the site. (See Settings ->Design ->Store Language)
  • [mfgid] - Used by the Software to provide the proper linking for the Browse by "Manufacturer" functionality.
  • [manufacturer] - Inserts the applicable Manufacturer names.
  • [frame_mailinglist] - Displays the Title of the "Mailing List" area of the site. (See Settings ->Design ->Store Language)
  • [mailinglist_text] - Displays the Title of the "Subscribe to our Newsletter" section of the Mailing list area. (See Settings ->Design ->Store Language)
  • [mailinglist_button] - Displays the Title of the "Go" button/link of the Mailing list area. (See Settings ->Design ->Store Language)
  • [mailinglist_subscribe] - Displays the Title of the "Subscribe" radio button of the Mailing list area. (See Settings ->Design ->Store Language)
  • [mailinglist_unsubscribe] - Displays the Title of the "Unubscribe" radio button of the Mailing list area. (See Settings ->Design ->Store Language)
  • [LEFT_BANNER] - Displays content added in the Global Left Banner area of the Online Store Manager. (See Settings ->Design ->Header and Footer)
  • [frame_new-releases] - Displays the Title of the "New Releases" area of the site. (See Settings ->Design ->Store Language)
  • [RIGHT_BANNER] - Displays content added in the Global Right Banner area of the Online Store Manager. (See Settings ->Design ->Header and Footer)
  • [frame_copyright1] - Displays the Title of the "Copyright... ...eCommerce Software by Shift4Shop" area of the site. (See Settings ->Design ->Store Language)
  • [GLOBAL_FOOTER] - Displays content added in the Global Footer area of the Online Store Manager. (See Settings ->Design ->Header and Footer)

Download this Template     (Save as a backup or edit to customize)

Screenshot of the frame.html Template