diff --git a/app/assets/javascripts/darkswarm/directives/shop_variant.js.coffee b/app/assets/javascripts/darkswarm/directives/shop_variant.js.coffee
new file mode 100644
index 0000000000..e4cbed11c5
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/shop_variant.js.coffee
@@ -0,0 +1,6 @@
+Darkswarm.directive "shopVariant",  ->
+  restrict: 'E'
+  replace: true
+  templateUrl: 'shop_variant.html'
+  scope:
+    variant: '='
diff --git a/app/views/shop/products/_variants.html.haml b/app/assets/javascripts/templates/shop_variant.html.haml
similarity index 83%
rename from app/views/shop/products/_variants.html.haml
rename to app/assets/javascripts/templates/shop_variant.html.haml
index 3427d23a5f..d0eb4b67c7 100644
--- a/app/views/shop/products/_variants.html.haml
+++ b/app/assets/javascripts/templates/shop_variant.html.haml
@@ -1,16 +1,15 @@
-.row.variants{bindonce: true,
-  "ng-repeat" => "variant in product.variants track by variant.id"}
-
+.variants.row
   .small-12.medium-4.large-4.columns.variant-name
     .table-cell  
       .inline {{ variant.name_to_display }}
-      .bulk-buy.inline{"bo-if" => "product.group_buy"}
+      .bulk-buy.inline{"bo-if" => "variant.product.group_buy"}
         %i.ofn-i_056-bulk><
         %em><
           \ Bulk
 
   -# WITHOUT GROUP BUY
-  .small-5.medium-3.large-3.columns.text-right{"bo-if" => "!product.group_buy"}
+  .small-5.medium-3.large-3.columns.text-right{"bo-if" => "!variant.product.group_buy"}
+
     %input{type: :number, 
     value: nil, 
     min: 0, 
@@ -22,7 +21,7 @@
       
 
   -# WITH GROUP BUY
-  .small-5.medium-3.large-3.columns.text-right{"bo-if" => "product.group_buy"}
+  .small-5.medium-3.large-3.columns.text-right{"bo-if" => "variant.product.group_buy"}
     %span.bulk-input-container
       %span.bulk-input
         %input.bulk.first{type: :number, 
@@ -33,7 +32,7 @@
         "ofn-disable-scroll" => true,
         max: "{{variant.on_demand && 9999 || variant.count_on_hand }}",
         name: "variants[{{variant.id}}]", id: "variants_{{variant.id}}"}
-      %span.bulk-input{"bo-if" => "product.group_buy"}
+      %span.bulk-input{"bo-if" => "variant.product.group_buy"}
         %input.bulk.second{type: :number,
         min: 0,
         "ng-model" => "variant.line_item.max_quantity",
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index 25004f97b4..a10edd7fb9 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -20,12 +20,8 @@
       "ng-repeat" => "product in filteredProducts = (Products.products | products:query | taxons:activeTaxons | orderBy:ordering.order) track by product.id "}
 
       = render partial: "shop/products/summary"
-
-      %span{"bo-if" => "product.hasVariants"}
-        = render partial: "shop/products/variants"
-
-      .variants.row{"bo-if" => "!product.hasVariants"}
-        = render partial: "shop/products/master"
+      %shop-variant{variant: 'product.master', "bo-if" => "!product.hasVariants"}
+      %shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants track by variant.id"}
     
     %product{"ng-show" => "Products.loading"}
       .row.summary
diff --git a/app/views/shop/products/_master.html.haml b/app/views/shop/products/_master.html.haml
deleted file mode 100644
index f12df1b881..0000000000
--- a/app/views/shop/products/_master.html.haml
+++ /dev/null
@@ -1,58 +0,0 @@
-.small-12.medium-4.large-4.columns.variant-name
-  .table-cell
-    .inline {{ product.master.name_to_display }}
-    .bulk-buy.inline{"bo-if" => "product.group_buy"}
-      %i.ofn-i_056-bulk><
-      %em><
-        \ Bulk
-
--# WITHOUT GROUP BUY
-.small-5.medium-3.large-3.columns.text-right{"bo-if" => "!product.group_buy"}
-  %input{type: :number, 
-  min: 0,
-  placeholder: "0",
-  "ofn-disable-scroll" => true,
-  max: "{{product.on_demand && 9999 || product.count_on_hand }}",
-  name: "variants[{{product.master.id}}]", 
-  "ng-model" => "product.master.line_item.quantity",
-  id: "variants_{{product.master.id}}"}
-
--# WITH GROUP BUY
-.small-5.medium-3.large-3.columns.text-right{"bo-if" => "product.group_buy"}
-  %span.bulk-input-container
-    %span.bulk-input
-      %input.bulk.first{type: :number, 
-      min: 0,
-      "ng-model" => "product.master.line_item.quantity",
-      placeholder: "min",
-      "ofn-disable-scroll" => true,
-      max: "{{product.on_demand && 9999 || product.count_on_hand }}",
-      name: "variants[{{product.master.id}}]", 
-      id: "variants_{{product.master.id}}"}
-
-    %span.bulk-input{"bo-if" => "product.group_buy"}
-      %input.bulk.second{type: :number,
-      min: 0,
-      "ng-model" => "product.master.line_item.max_quantity",
-      placeholder: "max",
-      "ofn-disable-scroll" => true,
-      max: "{{product.on_demand && 9999 || product.count_on_hand }}",
-      name: "variant_attributes[{{product.master.id}}][max_quantity]"}
-
-.small-3.medium-1.large-1.columns.variant-unit
-  .table-cell 
-    %em {{ product.master.unit_to_display }}
-
-.small-4.medium-2.large-2.columns.variant-price
-  .table-cell
-    %i.ofn-i_009-close
-    {{ product.master.price | currency }}
-    -#%button.graph-button{"price-breakdown" => "_",
-      -#"variant" => "product.master",
-      -#"price-breakdown-animation" => "true"}
-      -#%i.ofn-i-058-graph
-
-.small-12.medium-2.large-2.columns.total-price.text-right
-  .table-cell
-    %strong
-      {{ product.master.getPrice() | currency }}