Product variants

Hi,

For some reason my product variants are not appearing on the product.php page. Can someone let me know what I've done wrong. This is the product.html template

<perch:shop id="slug" type="slug" editable="true" suppress="true" indelible="true" label="Slug" for="title sku" order="10" divider-before="Meta data" />
<perch:shop id="image" type="image" label="Main product image" order="4" width="800" height="1000" crop="true" suppress="true" />
<perch:shop id="image" type="image" label="Main product image" order="4" width="263" height="224" crop="true" suppress="true"/>
<!-- Page Content -->
            <main class="page-main">
                <div class="block">
                    <div class="container">
                        <ul class="breadcrumbs">
                            <li><a href="index.php"><i class="icon icon-home"></i></a></li>
                            <li style="text-transform: uppercase;">/<span><perch:shop id="title" type="text" label="Title" required="true" order="2" /></span></li>
                        </ul>
                    </div>
                </div>
                <div class="container">
                    <!-- Two columns -->
                    <div class="row row-table">

                        <!-- Center column -->
                        <div class="col-md-9">
                            <!-- Page Title -->
                            <div class="page-title">
                                <div class="title">
                                    <h1 style="text-transform: uppercase;"><perch:shop id="title" type="text" label="Title" required="true" order="2" /></h1>
                                </div>
                            </div>
                            <!-- /Page Title -->


                            <div class="block product-block">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-5 col-md-3 col-lg-5">
                                <!-- Product Gallery -->
                                <div class="main-image">
                                    <img src="<perch:shop id="image" type="image" label="Main product image" order="4" width="800" />" class="zoom" alt="" data-zoom-image="<perch:shop id="image" type="image" label="Main product image" order="4" width="800" />" />
                                    <div class="dblclick-text"><span>Double click for enlarge</span></div>
                                    <a href="<perch:shop id="image" type="image" label="Main product image" order="4" width="800" />" class="zoom-link"><i class="icon icon-zoomin"></i></a>

                                </div>

                                <perch:if not-exists="image">
                                <div class="main-image">
                                    <img src="images/product-coming-soon.jpg" class="zoom" alt="" data-zoom-image="images/product-coming-soon.jpg" />
                                    <div class="dblclick-text"><span>Double click for enlarge</span></div>
                                    <a href="images/product-coming-soon.jpg" class="zoom-link"><i class="icon icon-zoomin"></i></a>

                                </div>
                                </perch:if>

                            </div>
                            <div class="col-sm-7 col-md-9 col-lg-7">
                                <div class="product-info-block classic">
                                    <div class="product-info-top">
                                        <div class="product-sku">SKU: <span><perch:shop id="sku" type="text" label="SKU" required="true" order="1" /></span></div>

                                    </div>
                                    <div class="product-name-wrapper">
                                        <h1 class="product-name"><p><perch:shop id="title" type="text" label="Title" required="true" order="2" /></p></h1>

                                    </div>
                                    <div class="product-availability">Availability: <span><perch:shop id="stock_status" type="shop_stock_status" label="Stock status" divider-before="Stock" required="true" /></span><!--<a href="#" class="btn btn-sm btn-loading" style="margin-left: 20px;"><i class="icon icon-heart"></i> Add to favourites</a>--></div>
                                    <div class="product-description">
                                        <p><perch:shop id="description" type="textarea" label="Description" editor="markitup" order="3" markdown="true" size="s" /></p>
                                    </div>
                                    <perch:shop id="brand" type="shop_brand" label="Brand" allowempty="true" suppress="true" />

<perch:categories id="category" set="products" label="Category" suppress="true">
    <perch:category id="catTitle" suppress="true" />
</perch:categories>

                                    <div class="price">
                                                    <span class="special-price"><span>



                                                    <perch:if exists="on_sale">
                                                        <perch:shop id="on_sale" type="checkbox" value="1" label="Use sale price"  suppress="true"/>
                                                            <span class="old-price">RRP <perch:shop id="price" type="shop_currency_value" label="Price" divider-before="Pricing" size="s" min="0" step="any"/></span>
                                                            <perch:shop id="sale_price" type="shop_currency_value" label="Sale price" size="s" min="0" step="any" /></perch:if>
                                                    <perch:member has-tag="trader">
                                                        <perch:shop id="trade_price" type="shop_currency_value" label="Standard Trade price" size="s" min="0" step="any"/>




                                                    <perch:else:member />
                                                        <perch:shop id="price" type="shop_currency_value" label="Price" divider-before="Pricing" size="s" min="0" step="any"/>
                                                        </perch:member>











<perch:shop id="tax_group" type="shop_tax_group" label="Tax group" required="true" suppress="true" /></span></span><small>excluding VAT</small>
                                                </div>

                                    <perch:if id="catalog_only" value="0">
  <perch:form id="add_to_cart" app="perch_shop" action="cart.php">

    <perch:if exists="has_variants">
      <perch:productopts>
        <h3><perch:productopt id="title" /></h3>
        <perch:productvalues>
          <perch:before><ul class="size-list"></perch:before>
            <li class="value">

                <perch:input id="options" class="form-control input-sm size-variants" name="opt-<perch:productvalue id="optionID" />[]"
                  value="<perch:productvalue id="valueID" />" type="radio" required="required" />
                <perch:productvalue id="valueTitle" />

            </li>
          <perch:after></ul></perch:after>
        </perch:productvalues>
      </perch:productopts>
    </perch:if>
    <br><br>
      <label>Quantity</label>
    <perch:input id="qty" value="1" type="number" min="0" placeholder="1" class="form-control"/>
    <perch:input id="product" type="hidden" value="<perch:shop id="productID" type="hidden" env-autofill="false" />" />
    <perch:input type="submit" value="Add to cart" class="btn btn-lg btn-loading"/>
                                        </perch:form>

<perch:else />
  <p>This item is available in-store only.</p>
</perch:if>


                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="block">
                    <div class="tabaccordion">
                        <div class="container">
                            <!-- Nav tabs -->
                            <ul class="nav-tabs product-tab" role="tablist">
                                <li><a href="#Tab1" role="tab" data-toggle="tab"><perch:shop id="spec" type="text" label="Tab 1 Title" order="5"/></a></li>
                                <li><a href="#Tab3" role="tab" data-toggle="tab"><perch:shop id="guide" type="text" label="Tab 2 Title" order="7"/></a></li>

                            </ul>
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane" id="Tab1">
                                    <p><perch:shop id="specdescription" type="textarea" label="Tab 1 Details" editor="markitup" order="6" markdown="true" size="s" /></p>

                                </div>

                                <div role="tabpanel" class="tab-pane" id="Tab3">
                                    <perch:shop id="guidedescription" type="textarea" label="Tab 2 Details" editor="markitup" order="8" markdown="true" size="s" />
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                        </div>
                        <!-- /Center column -->

                    <perch:shop id="stock_level" type="number" label="Stock level" size="s" suppress="true"/>
<perch:shop id="stock_location" type="shop_stock_location" label="Count stock"  suppress="true"/>
<perch:shop id="max_in_cart" type="number" label="Max quantity in cart" size="s" suppress="true" />

<perch:shop id="requires_shipping" type="shop_requires_shipping" label="Requires shipping" divider-before="Shipping" suppress="true" />
<perch:shop id="weight" type="number" label="Shipping weight" size="s" suppress="true" />
<perch:shop id="width" type="number" label="Width" size="s"  suppress="true"/>
<perch:shop id="height" type="number" label="Height" size="s" suppress="true" />
<perch:shop id="depth" type="number" label="Depth" size="s" suppress="true" />