debug-panel.liquid

gistfile1.html

<div id="shopify-product-customization-help">
  <h6 class="title">Product Customization Help</h6>
  <ul class="links">
    <li>
      <a class="clear-attributes" href="#" title="Clear all customization attributes" onclick="Shopify.Customizr.clearAttributes();return false;">Clear attributes</a>
    </li>
    <li>
      <a class="inspect-attributes" href="#" title="Inspect attributes" onclick="Shopify.Customizr.inspectAttributes('attributes-wrapper');return false;">Inspect attributes</a>
    </li>
    <li>
      <a class="hide-overlay" href="#" title="hide this overlay" onclick="var div=document.getElementById('shopify-product-customization-help');div.style.top='-'+div.offsetHeight+'px';return false;">X</a>
    </li>
  </ul>
  <div class="response">
    <div id="attributes-wrapper" style="white-space: pre"></div>
    <a id="hide-attributes" style="display:none" href="#" title="Hide attributes" onclick="var div=document.getElementById('attributes-wrapper');div.style.display='none';this.style.display='none';return false;">Hide attributes</a>
  </div>
</div>

<style>
#shopify-product-customization-help * {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font: normal normal bold 14px "Helvetica Neue", Helvetica, Arial;
  vertical-align: baseline;
  background: transparent;
  line-height: 1;
  color: #8D785A;
}

#shopify-product-customization-help {
  position: fixed;
  top: 0px;
  right: 0px;
  padding: 10px 0px 15px 10px;
  line-height: 1;
  background: #FFFBE5;
  border-width: 0 0 2px 2px;
  border-style: solid;
  border-color: #EFEBD5;
  z-index: 2147483647;
  transition: all .2s linear;
  -o-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -webkit-transition: all .2s linear;
  overflow: auto;
  max-height: 400px;
  width: auto;
}

#shopify-product-customization-help .title {
  margin: 5px;
}

#shopify-product-customization-help .links {
  margin: 5px;
}

#shopify-product-customization-help ul {
  list-style: none;
  display: inline;
}

#shopify-product-customization-help li {
  display: inline;
}

#shopify-product-customization-help a {
  padding: 5px;
}

#shopify-product-customization-help div {
  margin: 10px;
  font-family: monospace;
  line-height: 1.3;
}
</style>

Hi Caroline, I am using the customizr on my shop, but I want to use radio buttons instead of the dropdown that the product template has. However, when I change to radio buttons, the product options only get added to cart when I select the first option. With the other two it does not work...any ideas?

Here is the code I am using to product the radio buttons:

{% for variant in product.variants %} {{ variant.title }} - {{ variant.price | money }} {% endfor %}

This is the live product page: http://project-juice.myshopify.com/products/beginner-can-you-kick-it
(password: juice)

Thanks!