diff --git a/app/assets/javascripts/darkswarm/directives/cart_popover.js.coffee b/app/assets/javascripts/darkswarm/directives/cart_popover.js.coffee
new file mode 100644
index 0000000000..bcc0c8bc08
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/cart_popover.js.coffee
@@ -0,0 +1,7 @@
+Darkswarm.directive "cart", ->
+  restrict: 'A'
+  link: (scope, elem, attr)->
+    scope.open = false
+    elem.bind 'click', ->
+      scope.$apply ->
+        scope.open = !scope.open
diff --git a/app/assets/javascripts/darkswarm/directives/price_breakdown.js.coffee b/app/assets/javascripts/darkswarm/directives/price_breakdown.js.coffee
new file mode 100644
index 0000000000..7e2120a7ba
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/price_breakdown.js.coffee
@@ -0,0 +1,15 @@
+Darkswarm.directive "priceBreakdown", ($tooltip)->
+  tooltip = $tooltip 'priceBreakdown', 'priceBreakdown', 'click' 
+  tooltip.scope = 
+    variant: "="
+  tooltip
+
+Darkswarm.directive 'priceBreakdownPopup', ()->
+  restrict: 'EA'
+  replace: true
+  templateUrl: 'price_breakdown.html'
+  scope: true
+  #link: (scope, elem, attrs)->
+    #angular.element($window).bind 'click', ->
+        #scope.tt_isOpen = false
+        #elem.remove()
diff --git a/app/assets/javascripts/darkswarm/services/cart.js.coffee b/app/assets/javascripts/darkswarm/services/cart.js.coffee
index 43216a2559..63ee4efc20 100644
--- a/app/assets/javascripts/darkswarm/services/cart.js.coffee
+++ b/app/assets/javascripts/darkswarm/services/cart.js.coffee
@@ -41,6 +41,12 @@ Darkswarm.factory 'Cart', (CurrentOrder, Variants, $timeout, $http)->
       @line_items.filter (li)->
         li.quantity > 0
 
+    total: =>
+      @line_items_present().map (li)->
+        li.variant.getPrice()
+      .reduce (total, price)->
+        total + price
+
     register_variant: (variant)=>
       exists = @line_items.some (li)-> li.variant == variant
       @create_line_item(variant) unless exists 
diff --git a/app/assets/javascripts/templates/price_breakdown.html.haml b/app/assets/javascripts/templates/price_breakdown.html.haml
new file mode 100644
index 0000000000..635faf797f
--- /dev/null
+++ b/app/assets/javascripts/templates/price_breakdown.html.haml
@@ -0,0 +1,4 @@
+.joyride-tip-guide{"ng-class" => "{ in: isOpen(), fade: animation() }"}
+  %span.joyride-nub.bottom
+  .joyride-content-wrapper
+    {{ variant.id }}
diff --git a/app/assets/stylesheets/darkswarm/shopping-cart.css.sass b/app/assets/stylesheets/darkswarm/shopping-cart.css.sass
index 4bbd6a9a01..479b16bd34 100644
--- a/app/assets/stylesheets/darkswarm/shopping-cart.css.sass
+++ b/app/assets/stylesheets/darkswarm/shopping-cart.css.sass
@@ -1,5 +1,15 @@
 @import mixins
 @import branding
+@import "compass/css3/user-interface"
+
+.cart
+  @include user-select(none)
+  .joyride-tip-guide
+    display: block
+    right: 0px
+    top: 45px
+    li
+      float: none
 
 #cart-detail
   .cart-item-delete
diff --git a/app/views/shared/menu/_cart.html.haml b/app/views/shared/menu/_cart.html.haml
index 9d4436c207..96d8aa05c8 100644
--- a/app/views/shared/menu/_cart.html.haml
+++ b/app/views/shared/menu/_cart.html.haml
@@ -1,10 +1,25 @@
-%a.icon{href: cart_url, "ng-controller" => "CartCtrl"}
-  %span.nav-branded 
-    %i.ofn-i_027-shopping-cart
-    %span
-      {{ Cart.line_items_present().length }}
-      items
-    %ul
-      %li{"ng-repeat" => "line_item in Cart.line_items_present()",
-      "ng-controller" => "LineItemCtrl"}
-        {{ line_item.id }}
+%span{"ng-controller" => "CartCtrl"}
+  %a#cart.icon{cart: true}
+    %span.nav-branded 
+      %i.ofn-i_027-shopping-cart
+      %span
+        {{ Cart.line_items_present().length }}
+        items
+
+  .joyride-tip-guide{"ng-class" => "{ in: open }", "ng-show" => "open"}
+    %span.joyride-nub.top
+    .joyride-content-wrapper
+      %ul
+        %li{"ng-repeat" => "line_item in Cart.line_items_present()",
+        "ng-controller" => "LineItemCtrl"}
+          {{ line_item.variant.name_to_display }}
+          ({{line_item.quantity}})
+          x
+          {{ line_item.variant.unit_to_display }}
+          x
+          {{ line_item.variant.price | currency }}
+          is 
+          {{ line_item.variant.getPrice() | currency }}
+        %li{"ng-show" => "Cart.line_items_present().length > 0"}
+          Total: {{ Cart.total() | currency }}
+        %a.button{href: checkout_path, "ng-disabled" => "Cart.dirty"} Checkout now
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index 81b22a6593..a01b569654 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -1,8 +1,7 @@
 %products.small-12.columns{"ng-controller" => "ProductsCtrl", "ng-show" => "order_cycle.order_cycle_id != null",
 "infinite-scroll" => "incrementLimit()", "infinite-scroll-distance" => "1"}
 
-
-  = form_for :order, :url => populate_orders_path, html: {:class => "custom"} do
+  %form.custom
     .row
       .small-12.columns
         %input#search.text{"ng-model" => "query", 
diff --git a/app/views/shop/products/_master.html.haml b/app/views/shop/products/_master.html.haml
index b944ee192d..2c961b808c 100644
--- a/app/views/shop/products/_master.html.haml
+++ b/app/views/shop/products/_master.html.haml
@@ -47,8 +47,10 @@
   .table-cell
     %i.ofn-i_009-close
     {{ product.price | currency }}
-    
-    %button.graph-button{popover: "This is the popover text", "popover-title" => "The title.", "popover-animation" => "true", "popover-trigger" =>"mouseenter", "popover-placement" => "top"}
+    {{ $id }} 
+    %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