Shopify Product Object Debugger

Here is a quick drop in you can add to the product.liquid page to see all possible outputs from the product object.

This helped me when figuring out how to manage different states with the user controls and pricing of a product.

  <ul class="debug-list">
    <li><b>Product Available:</b> {{ product.available }}</li>
    <li><b>Product Collections:</b> {{product.collections | json }}</li>
    <li><b>Product Compare At Price:</b> {{product.compare_at_price_max | money }}</li>
    <li><b>Product CAP_min:</b> {{product.compare_at_price_min | money }}</li>
    <li><b>Product CAP_varies:</b> {{product.compare_at_price_varies }}</li>
    <li><b>Product Desc:</b> {{product.description }}</li>
    <li><b>Product Feat Image:</b> {{product.featured_image | json }}</li>
    <li><b>Product First Avail Variant:</b> {{product.first_available_variant | json }}</li>
    <li><b>Product Handle:</b> {{product.handle }}</li>
    <li><b>Product Has only Default Variant:</b> {{product.has_only_default_variant }}</li>
    <li><b>Product ID:</b> {{product.id }}</li>
    <li><b>Product Images - Array:</b> {{product.images | json }}</li>
    <li><b>Product Options:</b> {{product.options }}</li>
    <li><b>Product OPtions With Values:</b> {{product.options_with_values | json }}</li>
    <li><b>Product Price:</b> {{product.price | money }}</li>
    <li><b>Product Price Max:</b> {{product.price_max | money }}</li>
    <li><b>Product Price Min:</b> {{product.price_min | money }}</li>
    <li><b>Product Price Varies:</b> {{product.price_varies }}</li>
    <li><b>Product Selected Variant:</b> {{product.selected_variant | json }}</li>
    <li><b>Product Selected or 1st Avail Variant:</b> {{product.selected_or_first_available_variant | json }}</li>
    <li><b>Product Tags:</b> {{product.tags | json }}</li>
    <li><b>Product Template Suff:</b> {{product.template_suffix | json}}</li>
    <li><b>Product Title:</b> {{product.title}}</li>
    <li><b>Product Type:</b> {{product.type}}</li>
    <li><b>Product URL:</b> {{product.url}}</li>
    <li><b>Product Variants:</b> {{product.variants | json }}</li>
    <li><b>Product Vendor:</b> {{product.vendor}}</li>
  </ul>

and here is some css to jam all that into any container and still be readable. kind of.

.debug-list {
  list-style-type: none;
  padding: 10px;
  border: 1px solid #e2e2e2;
  background: #fff;

}
.debug-list li {
  padding-bottom: 10px;
  word-wrap: break-word;
  font-size: 12px;
}