Themes API

product.html

The product.html file renders a detailed page for an individual product. It includes an HTML <form> that visitors use to select a variant and add it to the cart.

Template Considerations

option_selection.js and callbacks

A product can have up to three options: for example, a t-shirt can have options for Size, Color, and Material. In these scenarios, it is recommended that you use the global option_selection.js script to output a drop down for each option, making it easier for the visitor to select a specific variant.

#

A Javascript-based callback function can then be used to trigger an event every time the visitor selects a different variant. This allows you to display information of the currently selected variant, such as the variant image, price, SKU, inventory quantity, etc.

More information on option_selection.js and callbacks can be found in this article.

Requirements for the Theme Store

If you’re looking to submit your theme to the Theme Store, the product.html template of your theme must meet the following conditions:

  • Product information
    • Non-truncated title
    • Price
    • Description
  • Featured image is prominent
  • Secondary images of product, shown as thumbnails
    • Different image ratios should not break the layout
    • Enlargeable via Lightbox or zooming
  • Variant images must be shown when the associated variant is selected
  • Buying functions
    • Dropdowns for options and variants
    • Add to cart button (often disabled or replaced when a sold out variant is selected)
  • Social buttons for Twitter, Facebook, Pinterest, and Google+
  • Use Product Options to split up multiple options into multiple drop downs
    • Callback function to update the price, Compare At price and Sold Out messages of the currently-selected variant
  • Choose first available variant on page load
  • Output image.alt for all product images
  • Include Google’s rich product snippets