Template Pages

Change the design of your Product Quick View Page

Purpose: This template defines the layout of the Category Quick View function for products.

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

For example:

    [template]
    [stylesheet]
    [catalogid]
    [id]
    [catid]
    [referer]
    [name]
  <!--START: image1-->
    [image1]
    [3dzoom_class]
    [image1]
    [name]
  <!--END: image1-->
  <!--START: image2-->
    [image1]
    [image1]
    [image_medium_w]
    [image1]
    [image2]
    [image2]
    [image_medium_w]
    [image2]
    <!--START: image3-->
      [image3]
      [image3]
      [image_medium_w]
      [image_medium_h]
      [image3]
    <!--END: image3-->
    <!--START: image4-->
      [image4]
      [image4]
      [image_medium_w]
      [image_medium_h]
      [image4]
    <!--END: image4-->
  <!--END: image2-->
  <!--START: totalrating-->
    [totalrating]
    [catalogid]
    [reviews_view-all]
  <!--END: totalrating-->
  <!--START: pricing-->
    <!--START: ITEMPRICE-->
      [product_yourprice]
      [price]
    <!--END: ITEMPRICE-->
    <!--START: SALEPRICE-->
      [product_yourprice]
      [price]
      [product_onsale]
      [saleprice]
    <!--END: SALEPRICE-->
  <!--END: pricing-->
  <!--START: product_availability-->
    [product_Header-availability]
    [availability]
  <!--END: product_availability-->
  <!--START: id-->
    [product_id]
    [id]
  <!--END: id-->
  <!--START: PRODUCT_OPTIONS_BLOCK-->
    <!--START: optionstemplate-->
      <!--START: textarea-format-->
      [value]
      [oprice]
      [oname]
      <!--END: textarea-format-->
      <!--START: text-format-->
      [value]
      [oprice]
      [oname]
      <!--END: text-format-->
      <!--START: qty-format-->
      [value]
      [oprice]
      [oname]
      <!--END: qty-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]
      [OPTIONFIELD]
      <!--END: opt-title-->
      <!--START: opt-regular-->
      [OPTIONLABEL]
      [OPTIONFIELD]
        <!--START: help-->
        [optid]
        <!--END: help-->
      <!--END: opt-regular-->
    <!--END: options-->
  <!--END: PRODUCT_OPTIONS_BLOCK-->
  <!--START: freeshippingblock-->
    [freeshipping]
  <!--END: freeshippingblock-->
  <!--START: addtocart-->
    [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-->
      [product_addtocart]
      [catalogid]
  <!--END: addtocart-->
  <!--START: Tabs-->
    <!--START: extended_description-->
    <!--END: extended_description-->
    <!--START: related_0-->
      [product_Header-relateditems]
    <!--END: related_0-->
    <!--START: accessories_0-->
      [product_Header-accessories]
    <!--END: accessories_0-->
      [extended_description]
    <!--START: related_items0-->
      <!--START: productblockcontainer-->
      <!--END: productblockcontainer-->
      <!--START: productcontainer-->
      <!--END: productcontainer-->
        [catalogid]
        [THUMBNAIL]
        [name]
        [catalogid]
        [name]
      <!--START: ITEMPRICE-->
        [product_yourprice]
        [ITEMPRICE]
      <!--END: ITEMPRICE-->
      <!--START: SALEPRICE-->
        [product_yourprice]
        [ITEMPRICE]
        [product_onsale]
        [ITEMSALEPRICE]
      <!--END: SALEPRICE-->
      <!--START: productcontainer_close-->
      <!--END: productcontainer_close-->
      <!--START: productblockcontainer_close-->
      <!--END: productblockcontainer_close-->
    <!--END: related_items0-->
    <!--START: accessories_items0-->
      <!--START: productblockcontainer-->
      <!--END: productblockcontainer-->
      <!--START: productcontainer-->
      <!--END: productcontainer-->
        [catalogid]
        [THUMBNAIL]
        [name]
        [catalogid]
        [name]
      <!--START: ITEMPRICE-->
        [product_yourprice]
        [ITEMPRICE]
      <!--END: ITEMPRICE-->
      <!--START: SALEPRICE-->
        [product_yourprice]
        [ITEMPRICE]
        [product_onsale]
        [ITEMSALEPRICE]
      <!--END: SALEPRICE-->
      <!--START: productcontainer_close-->
      <!--END: productcontainer_close-->
      <!--START: productblockcontainer_close-->
      <!--END: productblockcontainer_close-->
    <!--END: accessories_items0-->
  <!--END: Tabs-->

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.

  • [template] - Used by the Software to reference and insert the selected Theme's template folder.
  • [stylesheet] - Used by the Software to reference and insert the selected Theme's Cascading Style Sheet (CSS) file.
  • [catalogid] - Used by the Software to reference and insert the product's Database ID.
  • [id] - Displays the product's ID/SKU
  • [catid] - Used by the Software to reference and insert the product's Category ID.
  • [referer] - Used by the Software to reference and inert any posible referrer information on the product.
  • [name] - Displays the name of the product.
  • [image1] - Inserts the product's main image via the thumbnail.asp script
  • [3dzoom_class] - Used by the Software to reference the Image's zoom function as selected in the Store Settings.
  • [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)
  • [image_medium_w] - Used by the Software to display the image in its selected resolution for the Product Page Image width. (See Settings ->General ->Store Settings.)
  • [image_medium_h] - Used by the Software to display the image in its selected resolution for the Product Page Image width. (See Settings ->General ->Store Settings.)
  • [totalrating] - Displays the average review rating of the item
  • [reviews_view-all] - Displays the Title of the "View All Reviews" link on the Category QuickView screen. (See Settings ->Design ->Store Language)
  • [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] - Inserts the product's availability.
  • [product_id] - Displays the Title of the Product's ID/SKU heading. (See Settings ->Design ->Store Language)
  • [value] - Option Set Label (Used for Text, TextArea, File and Qty option types.)
  • [oprice] - Inserts Option's Additional Value if applicable.
  • [feature] - Option Set Label (Used for Drop Down, Drop Image, Radio and Checkbox option types.)
  • [selected] - Used by the Software to reference selected options.
  • [OPTIONLABEL] - Inserts the name of the main option headings.
  • [OPTIONFIELD] - Used for the placement of the option sets created on the product.
  • [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_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_Header-relateditems] - Displays the Title of the product's Related Items section. (See Settings ->Design ->Store Language)
  • [product_Header-accessories] - Displays the Title of the product's Upsell Items section. (See Settings ->Design ->Store Language)
  • [extended_description] - Inserts the Product's Extended Description.
  • [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.

The following Variables will be used if the store and the product are utlilizing Shift4Shop's 3dReminders Add-On.

  • [product_reminder] - This variable will control the reminder frequency selection drop down menu.
  • [optionvalue] - This variable will be used to insert the frequency selections.
  • [optiontext] - This variable will display the frequency selections.

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

Screenshot of the quick_view.html Template