diff --git a/app/serializers/api/variant_serializer.rb b/app/serializers/api/variant_serializer.rb
index 0d060798d3..68838b4b0c 100644
--- a/app/serializers/api/variant_serializer.rb
+++ b/app/serializers/api/variant_serializer.rb
@@ -1,5 +1,5 @@
 class Api::VariantSerializer < ActiveModel::Serializer
-  attributes :id, :is_master, :count_on_hand, :name_to_display, :unit_to_display
+  attributes :id, :is_master, :count_on_hand, :name_to_display, :unit_to_display, :unit_value
   attributes :options_text, :on_demand, :price, :fees, :price_with_fees, :product_name
 
   def price
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index 2d5481b5f5..75d1f79188 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -31,7 +31,7 @@
     %div.pad-top{ "infinite-scroll" => "incrementLimit()", "infinite-scroll-distance" => "1", "infinite-scroll-disabled" => 'filteredProducts.length <= limit' }
       %product.animate-repeat{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in visibleProducts track by product.id", "id" => "product-{{ product.id }}"}
         = render "shop/products/summary"
-        %shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.count_on_hand == 0}"}
+        %shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.count_on_hand == 0}"}
 
       -# Load more button, which can be used to initiate infinite scrolling.
       -# %product{ "ng-hide" => "Products.loading || !infiniteDisabled || limit >= filteredProducts.length" }