Design Docs
Change the design of your Product Detail Page
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.
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)
Note: It is important to preserve the commented tags to ensure the software performs correctly.
For example:
<!--START: PREV_PROD-->
[prevprodlink]
[prevprodthumb]
<!--END: PREV_PROD-->
<!--START: NEXT_PROD-->
[nextprodlink]
[nextprodthumb]
<!--END: NEXT_PROD-->
[catalogid]
<!--START: image#-->
[image#]
[image_medium_w]
<!--END: image#-->
<!--START: id-->
[product_id]
[id]
<!--END: id-->
<!--START: totalrating-->
[totalrating]
[review_count]
[review_average]
<!--END: totalrating-->
[name]
[catid]
[stock]
[manufacturer_name]
[description]
[imagecaption#]
[product_imagegallery]
[product_Header-price]
<!--START: pricing-->
[product_retailprice]
[price2]
<!--START: SAVINGS-->
[product_savings]
[savings]
<!--END: SAVINGS-->
[product_yourprice]
<!--START: ITEMPRICE-->
[price]
<!--END: ITEMPRICE-->
<!--START: SALEPRICE-->
[price]
[saleprice]
<!--END: SALEPRICE-->
<!--END: pricing-->
<!--START: giftcertificate_block-->
<!--END: giftcertificate_block-->
<!--START: product_availability-->
[product_Header-availability]
[availability]
[availability_itemprop]
<!--START: waitinglist-->
[catalogid]
<!--END: waitinglist-->
<!--END: product_availability-->
<!--START: freeshippingblock-->
[freeshipping]
<!--END: freeshippingblock-->
<!--START: LOGIN_REQUIRED-->
[product_login-message]
<!--END: LOGIN_REQUIRED-->
<!--START: product_social-bookmarking-->
[product_social-bookmarking]
<!--END: product_social-bookmarking-->
<!--START: frame_likebutton-->
[frame_likebutton]
<!--END: frame_likebutton-->
<!--START: PRODUCT_OPTIONS_BLOCK-->
<!--START: divOptionsBlock-->
[product_optionheader]
<!--START: optionstemplate-->
<!--START: textarea-format-->
[value]
[oprice]
[oname]
<!--END: textarea-format-->
<!--START: text-format-->
[value]
[oprice]
[oname]
<!--END: text-format-->
<!--START: file-format-->
[value]
[oprice]
[oname]
<!--END: file-format-->
<!--START: title-format-->
[feature]
<!--END: title-format-->
<!--START: checkbox-format-->
[oname]
[value]
[selected]
[feature]
[oprice]
<!--END: checkbox-format-->
<!--START: radio-format-->
[oname]
[value]
[selected]
[feature]
[oprice]
<!--END: radio-format-->
<!--START: dropdown-format-->
[oname]
<!--START: option-->
[value]
[selected]
[feature]
[oprice]
<!--END: option-->
<!--END: dropdown-format-->
<!--START: dropdownimage-format-->
[oname]
<!--START: option-->
[value]
[selected]
[feature]
[oprice]
<!--END: option-->
[oname]
<!--END: dropdownimage-format-->
<!--END: optionstemplate-->
<!--START: options-->
<!--START: opt-title-->
[OPTIONLABEL]
<!--END: opt-title-->
<!--START: opt-regular-->
[OPTIONLABEL]
[OPTIONFIELD]
<!--START: help-->
[optid]
<!--END: help-->
<!--END: opt-regular-->
<!--END: options-->
<!--END: divOptionsBlock-->
<!--END: PRODUCT_OPTIONS_BLOCK-->
<!--START: RECURRINGORDER-->
[recurringorders_addcart-question]
[recurringorders_select-frequency]
[recurring_frequency]
[recurringorders_addcart-bottom-message]
<!--END: RECURRINGORDER-->
<!--START: addtocart-->
<!--START: MULTIPLESHIPTO-->
[product_multiple-send-to]
[product_multiple-select-name]
[product_multiple-myself]
[shiptolist]
[product_multiple-other]
[product_multiple-add-name]
[product_multiple-note]
<!--END: MULTIPLESHIPTO-->
<!--START: quantity-->
[product_Header-quantitypricing]
[product_quantitypricing-quantity]
[product_quantitypricing-price]
<!--START: quantity_items-->
[LOW]
[HIGH]
[PRICE]
<!--END: quantity_items-->
<!--END: quantity-->
[product_quantity]
<!--START: qtybox-->
<!--END: qtybox-->
<!--START: reminders_block-->
[product_reminder]
<!--START: reminders_frequency_option-->
[optionvalue]
[selected]
[optiontext]
<!--END: reminders_frequency_option-->
<!--END: reminders_block-->
<!--START: make_an_offer-->
[catalogid]
[product_make-an-offer]
<!--END: make_an_offer-->
[product_addtocart]
<!--END: addtocart-->
<!--START: extended_description-->
[product_Header-description]
[extended_description]
<!--END: extended_description-->
<!--START: realmedia-->
[product_Header-video]
[realmedia]
<!--END: realmedia-->
<!--START: rewardsPoints-->
[product_Header-rewards]
[product_rewardsDescription]
<!--END: rewardsPoints-->
<!--START: extrafields-->
<!--START: extra_field_#-->
[product_extrafield#]
<!--END: extra_field_#-->
<!--END: extrafields-->
<!--START: PRODUCT_FEATURES_BLOCK-->
<!--START: PRODUCT_FEATURES-->
[product_feature_name]
<!--END: PRODUCT_FEATURES-->
<!--END: PRODUCT_FEATURES_BLOCK-->
<!--START: related_#-->
[product_Header-relateditems]
<!--START: related_items#-->
[catalogid]
[THUMBNAIL]
[name]
<!--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]
<!--END: SALEPRICE-->
[catalogid]
[category_buyitlink]
[counter]
<!--END: related_items#-->
<!--END: related_#-->
<!--START: accessories_#-->
[product_Header-accessories]
<!--START: accessories_items#-->
[catalogid]
[THUMBNAIL]
[name]
<!--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]
<!--END: SALEPRICE-->
[catalogid]
[category_buyitlink]
[counter]
<!--END: accessories_items#-->
<!--END: accessories_#-->
<!--START: reviews-->
[reviews_total]
[totalrating]
[review_link]
[reviews_header]
<!--START: user_reviews-->
[rating]
[short_review]
[review_date]
[user_name]
[user_city]
<!--START: user_email-->
[user_email]
<!--END: user_email-->
[long_review]
<!--END: user_reviews-->
<!--START: create_review_link-->
[itemid]
[reviews_new]
<!--END: create_review_link-->
<!--END: reviews-->
<!--START: create_first_review-->
[itemid]
[reviews_first]
<!--END: create_first_review-->
<!--START: create_review-->
[catalogid]
[reviews_add]
<!--END: create_review-->
<!--START: email_friend-->
[friendurl]
[product_emailtofriend]
<!--END: email_friend-->
<!--START: addGiftRegistry-->
[product_addtogiftregistry]
<!--END: addGiftRegistry-->
<!--START: addWishlist-->
[product_addtowishlist]
<!--END: addWishlist-->
<!--START: browsing_history-->
[product_browsing-history-header]
[catalogid]
<!--START: browsing_history_enable-->
[product_browsing-history-disable]
<!--END: browsing_history_enable-->
<!--START: browsing_history_items-->
[catalogid]
[THUMBNAIL]
[name]
<!--START: ITEMPRICE-->
[ITEMPRICE]
<!--END: ITEMPRICE-->
<!--START: SALEPRICE-->
[ITEMPRICE]
[ITEMSALEPRICE]
<!--END: SALEPRICE-->
[item_id]
<!--END: browsing_history_items-->
<!--END: browsing_history-->
[allowbackorder]
[productAvailability-Instock]
[productAvailability-Outofstock]
[productAvailability-Backorder]
[currency]
[prod_decimal_places]
[allowbackorder]
Note: Code blocks and their respective variables will only work with specific template pages.
Note: Many of the following variables are dynamically inserted from your cart's Settings ->Design ->Store Language section.
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&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:
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.
These next variables will be used by Shift4Shop Add-Ons available for purchase. (Click each link for more details)
Used for 3dReminders:
Used for Autoship:
Used for Options Rules:
