Change the design of your Category Page
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.
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.
Note: It is important to preserve the commented tags to ensure the software performs correctly.
For example:
<!--START: SUB_CATEGORIES--> - Displays existing sub-categories. [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--> <!--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--> [catid] [category_Header-products] [productnumber] [sortbylist] <!--START: CATEGORY_ITEMS--> <!--START: ITEM_TEMPLATE_#--> [catalogid] [name] [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: ITEM_TEMPLATE_#--> <!--END: CATEGORY_ITEMS--> <!--END: ITEMS-->
Note: Code blocks and their respective variables will only work with specific template pages.
The following Variables will apply to the category category functionality:
These next Variables will apply to the way products are displayed on the category:
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: