Product Add to Cart and View Cart Buttons

You have a lot of options for the Add to Cart and View Cart buttons. Merchants with ShopSite Manager can define either text or a graphic to be used throughout the store. Merchants with ShopSite Pro stores can also define different buttons and/or text for each individual product. As the template designer, you can choose to use what the merchant defined, or completely ignore that and create your own buttons.

  • If you are going to ignore what the merchant defined and use your own button graphic or text, you only need the URL for the link, which you can get with the [-- PRODUCT.AddToCartURL --] tag.
  • If any products use variable pricing, ordering options, or a quantity input box, you must use a form submit button for the Add to Cart button, not an href hyperlink.
  • You can place a View Cart button next to every product, or put the button somewhere else on your page layout. All View Cart buttons are the same; the URL is not product-specific. (All Add to Cart buttons are unique for each product.)

Example 1: Add and View Button URLs
This examples shows how to use the [-- PRODUCT.AddToCartURL --] and [-- Shopping_Cart_URL --] custom template tags to use to get the URLs for the Add to Cart and View Cart buttons. It also shows how to use hard-coded text for the links and ignores anything defined by the merchant. The template code for the product price is simplified for this example.

Add to Cart  |  View Cart
    <a href="[-- PRODUCT.AddToCartURL --]">Add to Cart</a>
    &nbsp;|&nbsp;
    <a href="[-- Shopping_Cart_URL --]">View Cart</a>

Example 2: Text Buttons
This examples shows how to use the merchant-defined text for the Add to Cart and View Cart buttons (links). This code does not check to see whether the merchant chose text or an image, but does check to see if the text field is blank and uses a hard-coded value if it is.

    <a href="[-- PRODUCT.AddToCartURL --]">
    [-- IF PRODUCT.AddToCartButton "" --]
    Add to Cart
    [-- ELSE --]
    [-- PRODUCT.AddToCartButton --]</a>
    [-- END_IF --]

    <a href="[-- Shopping_Cart_URL --]">
    [-- IF PRODUCT.ViewCartButton "" --]
    View Cart
    [-- ELSE --]
    [-- PRODUCT.ViewCartButton --]</a>
    [-- END_IF --]

Example 3: Text or Graphic Buttons
This examples shows how to test to see if the merchant has defined an image or text for the buttons. Obviously, you'll need different HTML to display an image instead of text. The template code for the product price is simplified for this example.

    <a href="[-- PRODUCT.AddToCartURL --]">
    [-- IF AddImage? --]
    <img [--AddImage--]></a>
    [-- ELSE --]
    [-- AddText --]</a>
    [-- END_IF --]

    <a href="[-- SHOPPING_CART_URL --]">
    [-- IF ViewImage? --]
    </a>
    [-- ELSE --]
    [-- ViewText --]</a>
    [-- END_IF --]

Example 4: Text, Graphic, or Form Buttons
This examples shows the easiest way to display the Add to Cart and View Cart buttons for a product using the [-- PRODUCT.OrderCheckout --] tag. This tag outputs the correct HTML for the buttons, no matter what the merchant has defined -- text or an image. If a product has the options set to display ordering options or the quantity input box on the store pages, this tag will output an entire set of <form> tags so customers can select and enter information.

    [-- PRODUCT.OrderCheckout --]
Return To: Product Template Home Page