category_x.html

Purpose: This HTML template defines the layout of the category pages. The Shift4Shop store has three separate category templates created by default, but more can be created as needed. Category templates can be selected in the "Advanced" section of each category you create. Each style corresponds to an individual category_x.html template.


  • Style 1 – category_0.html

  • Style 2 - category_1.html

  • Style 3 – category_2.html


To add additional category styles to your store, simply name your additional templates with the appropriate "_x.html" naming convention. (i.e. category_3.html > Style 4 | category_4.html > Style 5 | etc)


Notes: This is one of the more complicated templates as it contains many different code blocks. Not only does it utilize one or more global variables, but it also contains variables for the Category display as well as product display variables.

Code Blocks

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

 
<!--START: BODY_HEADER-->
  [breadcrumb_items]
<!--END: BODY_HEADER-->
[categoryname]
<!--START: CATEGORY_HEADER-->
CONTENT]
<!--END: CATEGORY_HEADER--> 

 
<!--START: SUB_CATEGORIES_SECTION--> - Displays existing sub-categories.
    <!--START: LEFT BAR-->
        <!--START: LEFT_BANNER-->
        [LEFT_BANNER]
        <!--END: LEFT_BANNER-->
    <!--END: LEFT BAR-->

    [category_Header-subcategories]  
    <!--START: SUB_CATEGORIES_FORMAT--> 
        [CATID]  
        [SUB_CATEGORY_NAME]  
        [SUB_CATEGORY_DESCRIPTION]  
        <!--START: SUB_CATEGORY_IMAGE--> - Places an image if a category icon is defined.
            [CATID]  
            [SUB_CATEGORY_IMAGE]  
            [SUB_CATEGORY_NAME]  
        <!--END: SUB_CATEGORY_IMAGE--> 
    <!--END: SUB_CATEGORIES_FORMAT--> 
<!--END: SUB_CATEGORIES_SECTION--> 
 
 
    <!--START: FEATURE_MENU--> - Displays existing category specials.
        [category_Header-specials]  
        <!--START: FEATURE_ITEMS--> 
            <!--START: FEATURE_ITEM_TEMPLATE_#--> 
                [catalogid]  
                [name]  
                [catalogid]  
                [thumbnail]  
                [description]  
                <!--START: product_review--> 
                    <!--START: product_review_average--> 
                        [review_average]  
                        [review_count]  
                    <!--END: product_review_average--> 
                <!--END: product_review--> 
                <!--START: ITEMPRICE--> 
                    [ITEMPRICE]  
                <!--END: ITEMPRICE--> 
                <!--START: SALEPRICE--> 
                    [ITEMPRICE]  
                    [ITEMSALEPRICE]  
                    <!--START: SAVINGS--> 
                        [product_savings]  
                        [savings]  
                    <!--END: SAVINGS--> 
                <!--END: SALEPRICE--> 
                <!--START: AVAILABILITY--> 
                    [availability]  
                <!--END: AVAILABILITY--> 
                <!--START: freeshippingblock--> 
                    [freeshipping]  
                <!--END: freeshippingblock--> 
            <!--END: FEATURE_ITEM_TEMPLATE_#--> 
        <!--END: FEATURE_ITEMS--> 
    <!--END: FEATURE_MENU--> 
  
 
    <!--START: catFilterMainBlock--> 
        <!--START: catFilter--> 
            [category_Header-Filters]  
            <!--START: catFilterCrumb--> 
                <!--START: catFilterCrumbItem--> 
                    [strFilter]  
                    [strfiltername]  
                <!--END: catFilterCrumbItem--> 
            <!--END: catFilterCrumb--> 
            <!--START: catFilterRemoveLink--> 
                [category_Header-RemoveFilters]  
            <!--END: catFilterRemoveLink--> 
        <!--END: catFilter--> 
        <!--START: catFilter_Filter--> 
            [catFilterName]  
            <!--START: catFilter_Filter_Item--> 
                [catFilterId]  
                [catFilterName]  
                [catFilterChildId]  
                [catFilterChildName]  
                [catid]  
                [numItems]  
            <!--END: catFilter_Filter_Item--> 
        <!--END: catFilter_Filter--> 
        [catFilter]  
    <!--END: catFilterMainBlock--> 
 
 
<!--START: ITEMS-->
[category_Header-products] [[productnumber]]
        <form action="view_category.asp?cat=[catid]" method="post" name="frmsortby">
            <!--START: sortbylist-->
                [category_sort-by-label]
                <select id="sortby" name="sortby">
                    [category_sort-by-default]
                    [sortbylist]
                </select>
            <!--END: sortbylist-->
        </form>

        <!--START: catitemslist-->
            [category_Header-items-per-page-title]
            <select name="catitems">
                [catitemslist]
            </select>
        <!--END: catitemslist-->

        <!--START: PAGING--> 
        <!--START: PREV--> 
        <a href="view_category.asp?cat=[cat]&amp;sortby=[sortby]&amp;page=[prev]">[category_previouspage]</a> 
        <!--END: PREV--> 
        <!--START: PAGES--> 
        <!--START: FIRST_PAGE--> 
        <a href="view_category.asp?cat=[cat]&amp;sortby=[sortby]&amp;page=PAGE">PAGE</a>
        <!--END: FIRST_PAGE--> 
        <!--START: PAGES_SELECTED--> 
        PAGE
        <!--END: PAGES_SELECTED--> 
        <!--START: PAGES_NOTSELECTED--> 
        PAGE
        <!--END: PAGES_NOTSELECTED--> 
        <!--START: LAST_PAGE--> 
        <a href="view_category.asp?cat=[cat]&amp;sortby=[sortby]&amp;page=PAGE">PAGE</a> 
        <!--END: LAST_PAGE--> 
        <!--END: PAGES--> 
        <!--START: NEXT--> 
        <a href="view_category.asp?cat=[cat]&amp;sortby=[sortby]&amp;page=[next]">[category_nextpage]</a> 
        <a href="view_category.asp?viewall=1&cat=[catid]">View All</a> 
        <!--END: NEXT--> 
        <!--END: PAGING--> 
        <!--START: UNDOVIEWALL--> 
        <a href="view_category.asp?viewall=0&cat=[catid]">Exit View All</a>
        <!--END: UNDOVIEWALL-->

    <!--START: CATEGORY_ITEMS-->
        <!--START: ITEM_TEMPLATE_0-->
        [product_items]
        <!--END: ITEM_TEMPLATE_0-->
    <!--END: CATEGORY_ITEMS-->

        <!--START: PAGING--> 
        <!--START: PREV--> 
        <a href="view_category.asp?cat=[cat]&amp;sortby=[sortby]&amp;page=[prev]">[category_previouspage]</a> 
        <!--END: PREV--> 
        <!--START: PAGES--> 
        <!--START: FIRST_PAGE--> 
        <a href="view_category.asp?cat=[cat]&amp;sortby=[sortby]&amp;page=PAGE">PAGE</a>
        <!--END: FIRST_PAGE--> 
        <!--START: PAGES_SELECTED--> 
        <strong>PAGE</strong> 
        <!--END: PAGES_SELECTED--> 
        <!--START: PAGES_NOTSELECTED--> 
        <a href="view_category.asp?cat=[cat]&amp;sortby=[sortby]&amp;page=PAGE">PAGE</a> 
        <!--END: PAGES_NOTSELECTED--> 
        <!--START: LAST_PAGE--> 
        <a class="paging-links" href="view_category.asp?cat=[cat]&amp;sortby=[sortby]&amp;page=PAGE">PAGE</a> 
        <!--END: LAST_PAGE--> 
        <!--END: PAGES--> 
        <!--START: NEXT--> 
        <a href="view_category.asp?cat=[cat]&amp;sortby=[sortby]&amp;page=[next]">[category_nextpage]</a> 
        <a href="view_category.asp?viewall=1&cat=[catid]">View All</a> 
        <!--END: NEXT--> 
        <!--END: PAGING--> 
        <!--START: UNDOVIEWALL--> 
        <a href="view_category.asp?viewall=0&cat=[catid]">Exit View All</a> <!--END: UNDOVIEWALL-->
<!--END: ITEMS-->
 
 
  
<!--START: CATEGORY_FOOTER-->
[CONTENT]
<!--END: CATEGORY_FOOTER-->


<!--START: browsing_history-->
[product_browsing-history-header]
    <!--START: browsing_history_items-->
    <!--START: CATEGORY_ITEMS--> 
        <!--START: ITEM_TEMPLATE--> 
       [catalogid]
        <a href="product.asp?itemid=[catalogid]">
            <img src="[THUMBNAIL]" alt="[name]" />
        </a>
        <!--START: quickview-->
        <!--END: quickview-->
        [name]
        <!--START: ITEMPRICE-->
        [ITEMPRICE]
        <!--END: ITEMPRICE-->
        <!--START: SALEPRICE-->
        [ITEMPRICE]
        [ITEMSALEPRICE]
        [product_sale]
        <!--END: SALEPRICE-->

        <!--START: product_availability-->
        [availability]
        <!--END: product_availability-->
        <!--START: freeshippingblock-->
        [freeshipping]
        <!--END: freeshippingblock-->

        <!--START: product_review-->
        <!--START: product_review_average-->
        [review_average] ([review_count])
        <!--END: product_review_average-->
        <!--END: product_review-->
        <!--START: addtocart-->
        <a href="add_cart.asp?quick=1&amp;item_id=[catalogid]">
           [category_buyitlink]
        </a>
        <!--END: addtocart-->
        <!--END: ITEM_TEMPLATE--> 
    <!--END: CATEGORY_ITEMS-->
    <!--END: browsing_history_items-->
<!--END: browsing_history-->

<!--START: PRODUCT_COMPARE--> Product comparison tool code blocks
<!--START: CompareProduct-->
<!--END: CompareProduct-->
      [productcompare_product-added]
      [productcompare_product-duplicate]
      [productcompare_product-limit]
<!--END: PRODUCT_COMPARE-->
<!--START: template_scripts-->
<!--END: template_scripts-->
<!--START: template_styles-->
<!--END: template_styles-->

Note: Code blocks and their respective variables will only work with specific template pages.

Variables

The following Variables will apply to the category category functionality:

  • [CATEGORY_FULLLINE] – Displays the category’s breadcrumb.
  • [categoryname] – Displays the category’s name
  • [category_Header-subcategories] – Displays the Title of the category’s sub-category section. (See Settings ->Design ->Store Language)
  • [SUB_CATEGORY_IMAGE] – If your sub-categories have category icons enabled, this variable will insert the icon image. (See advanced section of Sub-Category)
  • [SUB_CATEGORY_NAME] – Displays the name of the applicable sub-category.
  • [SUB_CATEGORY_DESCRIPTION] – Displays the Description of the applicable sub-category.
  • [category_Header-specials] – Displays the Title of “Featured Products” header of the page. (See Settings ->Design ->Store Language)
  • [category_Header-products] – Displays the Title of your Category products sections. (See Settings ->Design ->Store Language)
  • [productnumber] – Displays the number of products contained in the respective Category.
  • [sortbylist] – Inserts the “Sort By” drop down for category sorting. (Settings enabled in Settings ->General ->Store Settings)

These next Variables will apply to the way products are displayed on the category:

  • [catalogid] – This variable inserts the product’s catalog ID wherever applicable for scripting when the product is referenced. (i.e. Product images, links to product, etc.)
  • [name] – Inserts the product’s Name information.
  • [review_average] – Inserts the product’s individual Rating Average.
  • [review_count] – Displays the number of Reviews left on the product.
  • [product_yourprice] – Displays the Title of the “Your Price” section of the Product’s pricing section. (See Settings ->Design ->Store Language)
  • [ITEMPRICE] – Inserts the Product’s Price information.
  • [product_onsale] – Displays the Title of the “On Sale” section of the Product’s pricing section. (See Settings ->Design ->Store Language)
  • [ITEMSALEPRICE] – Inserts the Product’s Sale Price information.
  • [category_buyitlink] – Displays the Title of the “Add to Cart” button/link. (See Settings ->Design ->Store Language)
  • [id] – If using the “Listing” Display type for products in the Category’s Advanced section, the product’s respective ID/SKU will be insertedby this variable.
  • [THUMBNAIL] – Inserts the respective product’s thumbnail image.
  • [description] – If using the “Details” display type in the Category’s Advanced menu, this variable will insert the Product’s short description.
  • [product_Header-availability] – If using the “Details” display type in the Category’s Advanced menu, this variable will display the Title of the Product’s Availability. (See Settings ->Design ->Store Language)
  • [availability] – If using the “Details” display type in the Category’s Advanced menu, this variable will insert the product’s Availability message.
  • [freeshipping] – If the product is set for Free Shipping, this variable will insert that status within the category listing.
  • [product_addtocart] – If using the “Details” display type in the Category’s Advanced menu, this variable will display the Title of the Add to Cart button. (See Settings ->Design ->Store Language)

Finally, these next Variables, while present on the template, will apply only if your store has the Shift4Shop Advanced Category Filters add-on enabled for the store:

  • [category_Header-Filters]  – Displays the Title of “Header-Filters” header of the Filter. (See Settings ->Design ->Store Language)
  • [strFilter] – This variable inserts the sort order of the filter categories
  • [strfiltername] – Displays filter name
  • [category_Header-RemoveFilters]  – Displays the Title of “Header-RemoveFilters” header of the Remove Filters. (See Settings ->Design ->Store Language)
  • [catFilterName]  – Displays Cat filter name
  • [catFilterId] – Displays Cat filter id
  • [catFilterChildId] – Displays Cat child id
  • [catFilterChildName] – Displays Cat child Name
  • [numItems] – Displays number of items in each category result
  • [catFilter] – Used to hold the id filter
X