Design Docs

Template Pages

Change the design of your Product Detail Page

listing_x.html

Purpose: This HTML template defines the layout of the Product Listing pages. The Shift4Shop store has four separate Product Listing templates created by default, but more can be created as needed. Product Listing templates can be selected in the "Advanced" tab of each product you create. Each style corresponds to an individual listing_x.html template.

  • Style 1 - listing_0.html (also "default")
  • Style 2 - listing_1.html
  • Style 3 - listing_2.html
  • Style 4 - listing_3.html

To add additional product listing styles to your store, simply name your additional templates with the appropriate "_x.html" naming convention. (i.e. listing_4.html>Style 5 | listing_5.html>Style 6 | etc)

Code Blocks

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

For example:

  1.     <!--START: PREV_PROD-->  
  2.         [prevprodlink]  
  3.         [prevprodthumb]  
  4.     <!--END: PREV_PROD-->  
  5.     <!--START: NEXT_PROD-->  
  6.         [nextprodlink]  
  7.         [nextprodthumb]  
  8.     <!--END: NEXT_PROD-->  
  9.     [catalogid]  
  10.     <!--START: image#-->  
  11.         [image#]  
  12.         [image_medium_w]  
  13.     <!--END: image#-->  
  14.     <!--START: id-->  
  15.         [product_id]  
  16.         [id]  
  17.     <!--END: id-->  
  18.     <!--START: totalrating-->  
  19.         [totalrating]  
  20.         [review_count]  
  21.         [review_average]  
  22.     <!--END: totalrating-->  
  23.     [name]  
  24.     [catid]  
  25.     [stock]  
  26.     [manufacturer_name]  
  27.     [description]  
  28.     [imagecaption#]  
  29.     [product_imagegallery]  
  30.     [product_Header-price]  
  31.     <!--START: pricing-->  
  32.         [product_retailprice]  
  33.         [price2]  
  34.         <!--START: SAVINGS-->  
  35.             [product_savings]  
  36.             [savings]  
  37.         <!--END: SAVINGS-->  
  38.         [product_yourprice]  
  39.         <!--START: ITEMPRICE-->  
  40.             [price]  
  41.         <!--END: ITEMPRICE-->  
  42.         <!--START: SALEPRICE-->  
  43.             [price]  
  44.             [saleprice]  
  45.         <!--END: SALEPRICE-->  
  46.     <!--END: pricing-->  
  47.     <!--START: giftcertificate_block-->  
  48.     <!--END: giftcertificate_block-->  
  49.     <!--START: product_availability-->  
  50.         [product_Header-availability]  
  51.         [availability]  
  52.         [availability_itemprop]  
  53.         <!--START: waitinglist-->  
  54.             [catalogid]  
  55.         <!--END: waitinglist-->  
  56.     <!--END: product_availability-->  
  57.     <!--START: freeshippingblock-->  
  58.         [freeshipping]  
  59.     <!--END: freeshippingblock-->  
  60.     <!--START: LOGIN_REQUIRED-->  
  61.         [product_login-message]  
  62.     <!--END: LOGIN_REQUIRED-->  
  63.     <!--START: product_social-bookmarking-->  
  64.         [product_social-bookmarking]  
  65.     <!--END: product_social-bookmarking-->  
  66.     <!--START: frame_likebutton-->  
  67.         [frame_likebutton]  
  68.     <!--END: frame_likebutton-->  
  69.     <!--START: PRODUCT_OPTIONS_BLOCK-->  
  70.         <!--START: divOptionsBlock-->  
  71.             [product_optionheader]  
  72.             <!--START: optionstemplate-->  
  73.                 <!--START: textarea-format-->  
  74.                     [value]  
  75.                     [oprice]  
  76.                     [oname]  
  77.                 <!--END: textarea-format-->  
  78.                 <!--START: text-format-->  
  79.                     [value]  
  80.                     [oprice]  
  81.                     [oname]  
  82.                 <!--END: text-format-->  
  83.                 <!--START: file-format-->  
  84.                     [value]  
  85.                     [oprice]  
  86.                     [oname]  
  87.                 <!--END: file-format-->  
  88.                 <!--START: title-format-->  
  89.                     [feature]  
  90.                 <!--END: title-format-->  
  91.                 <!--START: checkbox-format-->  
  92.                     [oname]  
  93.                     [value]  
  94.                     [selected]  
  95.                     [feature]  
  96.                     [oprice]  
  97.                 <!--END: checkbox-format-->  
  98.                 <!--START: radio-format-->  
  99.                     [oname]  
  100.                     [value]  
  101.                     [selected]  
  102.                     [feature]  
  103.                     [oprice]  
  104.                 <!--END: radio-format-->  
  105.                 <!--START: dropdown-format-->  
  106.                     [oname]  
  107.                     <!--START: option-->  
  108.                         [value]  
  109.                         [selected]  
  110.                         [feature]  
  111.                         [oprice]  
  112.                     <!--END: option-->  
  113.                 <!--END: dropdown-format-->  
  114.                 <!--START: dropdownimage-format-->  
  115.                     [oname]  
  116.                     <!--START: option-->  
  117.                         [value]  
  118.                         [selected]  
  119.                         [feature]  
  120.                         [oprice]  
  121.                     <!--END: option-->  
  122.                     [oname]  
  123.                 <!--END: dropdownimage-format-->  
  124.             <!--END: optionstemplate-->  
  125.             <!--START: options-->  
  126.                 <!--START: opt-title-->  
  127.                     [OPTIONLABEL]  
  128.                 <!--END: opt-title-->  
  129.                 <!--START: opt-regular-->  
  130.                     [OPTIONLABEL]  
  131.                     [OPTIONFIELD]  
  132.                     <!--START: help-->  
  133.                         [optid]  
  134.                     <!--END: help-->  
  135.                 <!--END: opt-regular-->  
  136.             <!--END: options-->  
  137.         <!--END: divOptionsBlock-->  
  138.     <!--END: PRODUCT_OPTIONS_BLOCK-->  
  139.     <!--START: RECURRINGORDER-->  
  140.         [recurringorders_addcart-question]  
  141.         [recurringorders_select-frequency]  
  142.         [recurring_frequency]  
  143.         [recurringorders_addcart-bottom-message]  
  144.     <!--END: RECURRINGORDER-->  
  145.     <!--START: addtocart-->  
  146.         <!--START: MULTIPLESHIPTO-->  
  147.             [product_multiple-send-to]  
  148.             [product_multiple-select-name]  
  149.             [product_multiple-myself]  
  150.             [shiptolist]  
  151.             [product_multiple-other]  
  152.             [product_multiple-add-name]  
  153.             [product_multiple-note]  
  154.         <!--END: MULTIPLESHIPTO-->  
  155.         <!--START: quantity-->  
  156.             [product_Header-quantitypricing]  
  157.             [product_quantitypricing-quantity]  
  158.             [product_quantitypricing-price]  
  159.             <!--START: quantity_items-->  
  160.                 [LOW]  
  161.                 [HIGH]  
  162.                 [PRICE]  
  163.             <!--END: quantity_items-->  
  164.         <!--END: quantity-->  
  165.         [product_quantity]  
  166.         <!--START: qtybox-->  
  167.         <!--END: qtybox-->  
  168.         <!--START: reminders_block-->  
  169.             [product_reminder]  
  170.             <!--START: reminders_frequency_option-->  
  171.                 [optionvalue]  
  172.                 [selected]  
  173.                 [optiontext]  
  174.             <!--END: reminders_frequency_option-->  
  175.         <!--END: reminders_block-->  
  176.         <!--START: make_an_offer-->  
  177.             [catalogid]  
  178.             [product_make-an-offer]  
  179.         <!--END: make_an_offer-->  
  180.         [product_addtocart]  
  181.     <!--END: addtocart-->  
  182.     <!--START: extended_description-->  
  183.         [product_Header-description]  
  184.         [extended_description]  
  185.     <!--END: extended_description-->  
  186.     <!--START: realmedia-->  
  187.         [product_Header-video]  
  188.         [realmedia]  
  189.     <!--END: realmedia-->  
  190.     <!--START: rewardsPoints-->  
  191.         [product_Header-rewards]  
  192.         [product_rewardsDescription]  
  193.     <!--END: rewardsPoints-->  
  194.     <!--START: extrafields-->  
  195.         <!--START: extra_field_#-->  
  196.             [product_extrafield#]  
  197.         <!--END: extra_field_#-->  
  198.     <!--END: extrafields-->  
  199.     <!--START: PRODUCT_FEATURES_BLOCK-->  
  200.         <!--START: PRODUCT_FEATURES-->  
  201.             [product_feature_name]  
  202.         <!--END: PRODUCT_FEATURES-->  
  203.     <!--END: PRODUCT_FEATURES_BLOCK-->  
  204.     <!--START: related_#-->  
  205.         [product_Header-relateditems]  
  206.         <!--START: related_items#-->  
  207.             [catalogid]  
  208.             [THUMBNAIL]  
  209.             [name]  
  210.             <!--START: product_review-->  
  211.                 <!--START: product_review_average-->  
  212.                     [review_average]  
  213.                     [review_count]  
  214.                 <!--END: product_review_average-->  
  215.             <!--END: product_review-->  
  216.             <!--START: ITEMPRICE-->  
  217.                 [ITEMPRICE]  
  218.             <!--END: ITEMPRICE-->  
  219.             <!--START: SALEPRICE-->  
  220.                 [ITEMPRICE]  
  221.                 [ITEMSALEPRICE]  
  222.             <!--END: SALEPRICE-->  
  223.             [catalogid]  
  224.             [category_buyitlink]  
  225.             [counter]  
  226.         <!--END: related_items#-->  
  227.     <!--END: related_#-->  
  228.     <!--START: accessories_#-->  
  229.         [product_Header-accessories]  
  230.         <!--START: accessories_items#-->  
  231.             [catalogid]  
  232.             [THUMBNAIL]  
  233.             [name]  
  234.             <!--START: product_review-->  
  235.                 <!--START: product_review_average-->  
  236.                     [review_average]  
  237.                     [review_count]  
  238.                 <!--END: product_review_average-->  
  239.             <!--END: product_review-->  
  240.             <!--START: ITEMPRICE-->  
  241.                 [ITEMPRICE]  
  242.             <!--END: ITEMPRICE-->  
  243.             <!--START: SALEPRICE-->  
  244.                 [ITEMPRICE]  
  245.                 [ITEMSALEPRICE]  
  246.             <!--END: SALEPRICE-->  
  247.             [catalogid]  
  248.             [category_buyitlink]  
  249.             [counter]  
  250.         <!--END: accessories_items#-->  
  251.     <!--END: accessories_#-->  
  252.     <!--START: reviews-->  
  253.         [reviews_total]  
  254.         [totalrating]  
  255.         [review_link]  
  256.         [reviews_header]  
  257.         <!--START: user_reviews-->  
  258.             [rating]  
  259.             [short_review]  
  260.             [review_date]  
  261.             [user_name]  
  262.             [user_city]  
  263.             <!--START: user_email-->  
  264.                 [user_email]  
  265.             <!--END: user_email-->  
  266.             [long_review]  
  267.         <!--END: user_reviews-->  
  268.         <!--START: create_review_link-->  
  269.             [itemid]  
  270.             [reviews_new]  
  271.         <!--END: create_review_link-->  
  272.     <!--END: reviews-->  
  273.     <!--START: create_first_review-->  
  274.         [itemid]  
  275.         [reviews_first]  
  276.     <!--END: create_first_review-->  
  277.     <!--START: create_review-->  
  278.         [catalogid]  
  279.         [reviews_add]  
  280.     <!--END: create_review-->  
  281.     <!--START: email_friend-->  
  282.         [friendurl]  
  283.         [product_emailtofriend]  
  284.     <!--END: email_friend-->  
  285.     <!--START: addGiftRegistry-->  
  286.         [product_addtogiftregistry]  
  287.     <!--END: addGiftRegistry-->  
  288.     <!--START: addWishlist-->  
  289.         [product_addtowishlist]  
  290.     <!--END: addWishlist-->  
  291.     <!--START: browsing_history-->  
  292.         [product_browsing-history-header]  
  293.         [catalogid]  
  294.         <!--START: browsing_history_enable-->  
  295.             [product_browsing-history-disable]  
  296.         <!--END: browsing_history_enable-->  
  297.         <!--START: browsing_history_items-->  
  298.             [catalogid]  
  299.             [THUMBNAIL]  
  300.             [name]  
  301.             <!--START: ITEMPRICE-->  
  302.                 [ITEMPRICE]  
  303.             <!--END: ITEMPRICE-->  
  304.             <!--START: SALEPRICE-->  
  305.                 [ITEMPRICE]  
  306.                 [ITEMSALEPRICE]  
  307.             <!--END: SALEPRICE-->  
  308.             [item_id]  
  309.         <!--END: browsing_history_items-->  
  310.     <!--END: browsing_history-->  
  311.     [allowbackorder]  
  312.     [productAvailability-Instock]  
  313.     [productAvailability-Outofstock]  
  314.     [productAvailability-Backorder]  
  315.     [currency]  
  316.     [prod_decimal_places]  
  317.     [allowbackorder]

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

Variables

Note: Many of the following variables are dynamically inserted from your cart's Settings ->Design ->Store Language section.

  • [CATEGORY_FULLLINE] - Displays the product listing's Breadcrumb information
  • [name] - Displays the name of the product.
  • [prevprodthumb] - If feature is enabled in Store Settings, this variable will include a small thumbnail of the preceding product when viewing the product from its respective category.
  • [nextprodthumb] - If feature is enabled in Store Settings, this variable will include a small thumbnail of the proceding product when viewing the product from its respective category.
  • [product_id] - Displays the Title of the Product's ID/SKU heading. (See Settings ->Design ->Store Language)
  • [id] - Displays the product's ID/SKU
  • [totalrating] - Displays the average review rating of the item
  • [review_count] - Displays the number of reviews left for the item
  • [image1] - Inserts the product's main image via the thumbnail.asp script
  • [imagecaption1] - Inserts the product's main image caption.
  • [image2] - Displays a small version of the product's second image and a larger version when the image is selected. (also serves the image via thumbnail.asp)
  • [image3] - Displays a small version of the product's third image and a larger version when the image is selected. (also serves the image via thumbnail.asp)
  • [image4] - Displays a small version of the product's fourth image and a larger version when the image is selected. (also serves the image via thumbnail.asp)
  • [imagecaption2] - When second image is selected, its respecitve caption is displayed by this variable.
  • [imagecaption3] - When third image is selected, its respecitve caption is displayed by this variable.
  • [imagecaption4] - When fourth image is selected, its respecitve caption is displayed by this variable.
  • [product_imagegallery] - When applicable, this variable inserts the product's image gallery button/link for additional images.
  • [product_emailtofriend] - When enabled, this variable displays the Title of the Email a Friend feature. (See Settings ->Design ->Store Language)
  • [reviews_first] - This variable inserts the product review link Title if the product has never been reviewed.
    • (See Settings ->Design ->Store Language)
  • [reviews_new] - This variable inserts the product review link Title to allow further reviews. (See Settings ->Design ->Store Language)
  • [product_Header-price] - Displays the Title of the product's pricing information section. (See Settings ->Design ->Store Language)
  • [product_retailprice] - Displays the Title of the product's Retail Price label. (See Settings ->Design ->Store Language)
  • [price2] - Inserts the product's Retail Price
  • [product_savings] - Displays the Title of the product's Savings label. (See Settings ->Design ->Store Language)
  • [savings] - Inserts the difference of the product's price minus the retail price.
  • [product_yourprice] - Displays the Title of the product's Price label. (See Settings ->Design ->Store Language)
  • [price] - Inserts the product's price.
  • [product_onsale] - Displays the Title of the product's On Sale label. (See Settings ->Design ->Store Language)
  • [saleprice] - Inserts the product's Sale price
  • [product_Header-availability] - Displays the Title of the product's availability. (See Settings ->Design ->Store Language)
  • [availability_itemprop] - Inserts the product's applicable availability taken from Global or Product's inventory control.
  • [freeshipping] - Inserts "Free Shipping" icon when item is marked for Free Shipping. Note: IMage path can be edited in Store Language. (See Settings ->Design ->Store Language)
  • [product_social-bookmarking] - Inserts product's Social Bookmarking function if enabled on the store. (See SocialCommerce ->Social Bookmarking)
  • [frame_likebutton] - Inserts product's Facebook Like button function if enabled on the store. (See SocialCommerce ->Like Button)
  • [product_login-message] - If store or product is set to require login before viewing, this variable will insert the login message. Message can be edited in Store Language. (See Settings ->Design ->Store Language)
  • [product_optionheader] - Displays the Title of the product's Options Section. (See Settings ->Design ->Store Language)
  • [OPTIONLABEL] - Inserts the name of the main option headings.
  • [OPTIONFIELD] - Used for the placement of the option sets created on the product.
  • [value] - Option Set Label (Used for Text, TextArea, File and Qty option types.)
  • [feature] - Option Set Label (Used for Drop Down, Drop Image, Radio and Checkbox option types.)
  • [oprice] - Inserts Option's Additional Value if applicable.
  • [option_value] - Used to denote entered values for input option types (i.e. Text, TextArea, Qty)
  • [product_multiple-send-to] - Displays the Title of the Multiple Ship To function if enabled in Store Modules. (See Settings ->Design ->Store Language)
  • [product_multiple-select-name] - Displays the Title of the Multiple Ship To name selection drop down if enabled in Store Modules. (See Settings ->Design ->Store Language)
  • [product_multiple-add-name] - Displays the Title of the Multiple Ship To "add a name" field if enabled in Store Modules. (See Settings ->Design ->Store Language)
  • [product_multiple-note] - Displays the text of the Multiple Ship To legend if enabled in Store Modules. (See Settings ->Design ->Store Language)
  • [product_Header-quantitypricing] - If product is using Qty Discount Pricing, this variable displays the Title of the product listing section. (See Settings ->Design ->Store Language)
  • [product_quantitypricing-quantity] - Displays the Title of the Qty Discount Pricing "Quantity" legend. (See Settings ->Design ->Store Language)
  • [lowbound] - Inserts the low-end range points of the Qty field for Quantity Discount Pricing.
  • [highbound] - Inserts the high-end range points of the Qty field for Quantity Discount Pricing.
  • [product_quantitypricing-price] - Displays the Title of the Quantity Discount Pricing "Price" legend. (See Settings ->Design ->Store Language)
  • [PRICE] - Inserts the applicable range pricing for Quantity Discount Pricing.
  • [product_quantity] - Displays the Title of the Add to Cart Quantity label. (See Settings ->Design ->Store Language)
  • [product_addtocart] - Displays the Title of the Add to Cart Button. (See Settings ->Design ->Store Language)
  • [product_make-an-offer] - Displays the Title of the Make-an-Offer button if enabled in Store Modules. (See Settings ->Design ->Store Language)
  • [product_addtogiftregistry] - Displays the Title of the Gift Registry button if enabled in Store Modules. (See Settings ->Design ->Store Language)
  • [product_addtowishlist] - Displays the Title of the Wishlist function if enabled in Store Modules. (See Settings ->Design ->Store Language)
  • [product_Header-description] - Displays the Title of the Product's Extended Description area. (See Settings ->Design ->Store Language)
  • [extended_description] - Inserts the Product's Extended Description.
  • [product_Header-video] - Displays the Title of the Product's Video section if applicable. (See Settings ->Design ->Store Language)
  • [realmedia] - Inserts the product's Browse YouTube video.
  • [product_Header-rewards] - Displays the Title of the product's Rewards section if enabled in Store Modules. (See Settings ->Design ->Store Language)
  • [product_rewardsDescription] - Displays the text of the Rewards Description area if enabled in Store Modules. (See Settings ->Design ->Store Language)
  • [product_extrafieldx] - Displays the Title of the product's Extra Field sections 1 through 13. (See Settings ->Design ->Store Language)
  • [extra_field_x] - Inserts the product's Extra Field 1 through 13 information. (Note: Extra Fields 6 through 13 will have HTML available to them)
  • [product_feature_name] - Inserts each applicable Product Feature if used on the product's Information Tab.
  • [reviews_header] - Displays the Title of the product's Review Section if enabled in Store Modules. (See Settings ->Design ->Store Language)
  • [rating] - Inserts each review's respective rating score. (Note: Star Rating is also based upon the variable by inserting a star image via star[rating].png)
  • [short_review] - Inserts the review's Title as left by the reviewer.
  • [long_review] - Inserts the review's full review as left by the reviewer.
  • [user_name] - Inserts the reviewer's name as entered during review.
  • [user_city] - Inserts the reviewer's location as entered during the review.
  • [review_date] - Inserts the date that the Review was left.
  • [product_Header-accessories] - Displays the Title of the product's Upsell Items section. (See Settings ->Design ->Store Language)
  • [THUMBNAIL] - Inserts related and upsell item thumbnail images.
  • [ITEMPRICE] - Inserts related and upsell item pricing information.
  • [ITEMSALEPRICE] - Inserts related and upsell item Sale price information.
  • [category_buyitlink] - Inserts related and upsell item buy links. (See Settings ->Design ->Store Language)
  • [product_Header-relateditems] - Displays the Title of the product's Related Items section. (See Settings ->Design ->Store Language)
  • [product_browsing-history-header] - Displays the Title of the product's Browsing History if enabled in Store Settings. (See Settings ->Design ->Store Language)
  • [product_browsing-history-disable] - Displays the Title of the product's "Disable Browsing History" function if enabled in Store Settings. (See Settings ->Design ->Store Language)
  • [product_Header-breadcrumbs] - Displays the Title of the product's Browse Similar Items section. (See Settings ->Design ->Store Language)
  • [CATEGORY_BREADCRUMBS] - Displays the product's Category Breadcrumb which allows the shopper to browse "similar items" based on residing category.

Note: For listing page product images, there is a script named thumbnail.asp which controls how the images are shown on the page within different areas. The purpose of this script is to resize and conform your images to a set dimension dictated within the coding. For example, the previous product/next product images are resized dynamically by thumbnail.asp to be about 20px in size. The script comes into play for most images shown on the listing template, (including main images and thumbnails) so you may see certain areas where the image paths are written as:

<img src="thumbnail.asp?file=[image1]&maxx=150&amp;maxy=0

The thumbnail.asp script will also use two additional variables which will resize the main product images according to their resolutions set in the Store Settings section. These are:

  • [image_medium_h] - The medium image size's set dimension for height.
  • [image_medium_w] - The medium image size's set dimension for width.

These next few Variables will be present on the template as part of the listing page's functionality and scripting. Typically you'll want to keep the scripting for these variables intact.

  • [3dzoom_class] - Used by the product's 3dZoom capabilities
  • [3dzoom_enabled] - Used by the product's 3dZoome capabilities
  • [allowbackorder] - Used for scripting product's inventory control options.
  • [availability] - Used for scripting product's inventory control options.
  • [catalogid] - Inserts the product's database ID within necessary scripting
  • [catid] - Inserts the product's category ID within necessary scripting
  • [counter] -
  • [currency] - Used by scripting to insert store's global currency display.
  • [friendurl] - Used by scripting to insert the "email a friend" URL.
  • [item_id] - Used by scripting to insert product's ID/SKU information.
  • [nextprodlink] - Used by scripting to insert next product link
  • [oname] - Used within options to insert option field denotations.
  • [optid] - Used by scripting to insert option selection IDs
  • [prevprodlink] - Used by scripting to insert previous product link.
  • [prod_decimal_places] - Used by scripting to display store's global decimal placing.
  • [product_multiple-myself] - Used by scripting to insert shopper's address for Multiple Ship To feature.
  • [product_multiple-other] - Used by scripting to insert additional addresses for Multiple Ship To feature.
  • [productAvailability-Backorder] - Used for scripting product's inventory control options.
  • [productAvailability-Instock] - Used for scripting product's inventory control options.
  • [productAvailability-Outofstock] - Used for scripting product's inventory control options.
  • [selected] -
  • [shiptolist] - Displays Multiple Ship To addresses saved for customer record.

These next variables will be used by Shift4Shop Add-Ons available for purchase. (Click each link for more details)

Used for 3dReminders:

  • [optionvalue]
  • [product_reminder]
  • [optiontext]

Used for Autoship:

  • [recurringorders_addcart-question]
  • [recurringorders_addcart-question]
  • [recurringorders_select-frequency]
  • [recurringorders_addcart-bottom-message]
  • [recurring_frequency]

Used for Options Rules:

  • [has_rules]

Template Download

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

Screenshot

Screenshot of the listing_x.html Template