diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b06d542ff..23f03f86cb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Add representation for products and variants with retail price that has sale price. [#1195](https://github.com/bigcommerce/cornerstone/pull/1195) 
 
 ## 1.15.0 (2018-04-04)
 - Fix image dimensions on AMP pages. [#1192](https://github.com/bigcommerce/cornerstone/pull/1192)
diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
index ef8947a39d..bbdadc2155 100644
--- a/assets/js/theme/common/product-details.js
+++ b/assets/js/theme/common/product-details.js
@@ -61,9 +61,30 @@ export default class ProductDetails {
     getViewModel($scope) {
         return {
             $priceWithTax: $('[data-product-price-with-tax]', $scope),
-            $rrpWithTax: $('[data-product-rrp-with-tax]', $scope),
             $priceWithoutTax: $('[data-product-price-without-tax]', $scope),
-            $rrpWithoutTax: $('[data-product-rrp-without-tax]', $scope),
+            rrpWithTax: {
+                $div: $('.rrp-price--withTax', $scope),
+                $span: $('[data-product-rrp-with-tax]', $scope),
+            },
+            rrpWithoutTax: {
+                $div: $('.rrp-price--withoutTax', $scope),
+                $span: $('[data-product-rrp-price-without-tax]', $scope),
+            },
+            nonSaleWithPrice: {
+                $div: $('.non-sale-price---withTax', $scope),
+                $span: $('[data-product-non-sale-price-with-tax]', $scope),
+            },
+            nonSaleWithoutPrice: {
+                $div: $('.non-sale-price---withoutTax', $scope),
+                $span: $('[data-product-non-sale-price-without-tax]', $scope),
+            },
+            priceSaved: {
+                $div: $('.price-section--saving', $scope),
+                $span: $('[data-product-price-saved]', $scope),
+            },
+            priceNowLabel: {
+                $span: $('.price-now-label', $scope),
+            },
             $weight: $('.productView-info [data-product-weight]', $scope),
             $increments: $('.form-field--increments :input', $scope),
             $addToCart: $('#form-action-addToCart', $scope),
@@ -326,11 +347,26 @@ export default class ProductDetails {
         }
     }
 
+    /**
+     * Hide the pricing elements that will show up only when the price exists in API
+     * @param viewModel
+     */
+    clearPricingNotFound(viewModel) {
+        viewModel.rrpWithTax.$div.hide();
+        viewModel.rrpWithoutTax.$div.hide();
+        viewModel.nonSaleWithPrice.$div.hide();
+        viewModel.nonSaleWithoutPrice.$div.hide();
+        viewModel.priceSaved.$div.hide();
+        viewModel.priceNowLabel.$span.hide();
+    }
+
     /**
      * Update the view of price, messages, SKU and stock options when a product option changes
      * @param  {Object} data Product attribute data
      */
     updatePriceView(viewModel, price) {
+        this.clearPricingNotFound(viewModel);
+
         if (price.with_tax) {
             viewModel.$priceWithTax.html(price.with_tax.formatted);
         }
@@ -340,11 +376,30 @@ export default class ProductDetails {
         }
 
         if (price.rrp_with_tax) {
-            viewModel.$rrpWithTax.html(price.rrp_with_tax.formatted);
+            viewModel.rrpWithTax.$div.show();
+            viewModel.rrpWithTax.$span.html(price.rrp_with_tax.formatted);
         }
 
         if (price.rrp_without_tax) {
-            viewModel.$rrpWithoutTax.html(price.rrp_without_tax.formatted);
+            viewModel.rrpWithoutTax.$div.show();
+            viewModel.rrpWithoutTax.$span.html(price.rrp_without_tax.formatted);
+        }
+
+        if (price.saved) {
+            viewModel.priceSaved.$div.show();
+            viewModel.priceSaved.$span.html(price.saved.formatted);
+        }
+
+        if (price.non_sale_price_with_tax) {
+            viewModel.nonSaleWithPrice.$div.show();
+            viewModel.priceNowLabel.$span.show();
+            viewModel.nonSaleWithPrice.$span.html(price.non_sale_price_with_tax.formatted);
+        }
+
+        if (price.non_sale_price_without_tax) {
+            viewModel.nonSaleWithoutPrice.$div.show();
+            viewModel.priceNowLabel.$span.show();
+            viewModel.nonSaleWithoutPrice.$span.html(price.non_sale_price_without_tax.formatted);
         }
     }
 
diff --git a/lang/en.json b/lang/en.json
index bf28e6f79c..d78d53e6c4 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -674,7 +674,9 @@
         "choose_an_option": "Please choose an option",
         "select_one": "Please select one",
         "description": "Description",
-        "retail_price": "MSRP",
+        "retail_price": "MSRP:",
+        "price_was": "Was:",
+        "price_now": "Now:",
         "price_with_tax": "(Inc. {tax_label})",
         "price_without_tax": "(Ex. {tax_label})",
         "including_tax": "Including Tax",
@@ -687,7 +689,8 @@
             "metric": "cm",
             "imperial": "in"
         },
-        "you_save": "(You save {amount})",
+        "you_save_opening_text": "(You save",
+        "you_save_closing_bracket": ")",
         "gift_wrapping": "Gift wrapping:",
         "gift_wrapping_available": "Options available",
         "quantity_min": "The minimum purchasable quantity is {quantity}",
diff --git a/templates/components/products/price.html b/templates/components/products/price.html
index 667dd047b2..c3d6cff4ec 100644
--- a/templates/components/products/price.html
+++ b/templates/components/products/price.html
@@ -2,11 +2,25 @@
     {{> components/products/price-range price_range=price.price_range schema_org=schema_org}}
 {{else}}
     {{#if price.with_tax}}
-        <div class="price-section price-section--withTax" {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
+        <div class="price-section price-section--withTax rrp-price--withTax" {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
             {{#if price.rrp_with_tax}}
-                <span data-product-rrp-with-tax class="price price--rrp">{{price.rrp_with_tax.formatted}}</span>
+                {{lang 'products.retail_price'}}
+                <span data-product-rrp-with-tax class="price price--rrp"> {{price.rrp_with_tax.formatted}}</span>
             {{/if}}
-            <span data-product-price-with-tax class="price">{{price.with_tax.formatted}}</span>
+        </div>
+        <div class="price-section price-section--withTax non-sale-price---withTax" {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
+            {{#if price.non_sale_price_with_tax}}
+                {{lang 'products.price_was'}}
+                <span data-product-non-sale-price-with-tax class="price price--rrp"> {{price.non_sale_price_with_tax.formatted}}</span>
+            {{/if}}
+        </div>
+        <div>
+            <span class="price-now-label">
+                {{#if price.non_sale_price_with_tax}}
+                    {{lang 'products.price_now'}}
+                {{/if}}
+            </span>
+            <span data-product-price-with-tax class="price"> {{price.with_tax.formatted}}</span>
             {{#if schema_org}}
                 <meta itemprop="availability" content="{{product.availability}}">
                 <meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/{{product.condition}}Condition">
@@ -22,11 +36,25 @@
         </div>
     {{/if}}
     {{#if price.without_tax}}
-        <div class="price-section price-section--withoutTax {{#if price.with_tax}}price-section--minor{{/if}}"  {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
+        <div class="price-section rrp-price--withoutTax price-section--withoutTax {{#if price.with_tax}}price-section--minor{{/if}}"  {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
             {{#if price.rrp_without_tax}}
-                <span data-product-rrp-without-tax class="price price--rrp">{{price.rrp_without_tax.formatted}}</span>
+                {{lang 'products.retail_price'}}
+                <span data-product-rrp-price-without-tax class="price price--rrp"> {{price.rrp_without_tax.formatted}}</span>
             {{/if}}
-            <span data-product-price-without-tax class="price price--withoutTax">{{price.without_tax.formatted}}</span>
+        </div>
+        <div class="price-section non-sale-price---withoutTax price-section--withoutTax {{#if price.with_tax}}price-section--minor{{/if}}"  {{#if schema_org}}itemprop="offers" itemscope itemtype="http://schema.org/Offer"{{/if}}>
+            {{#if price.non_sale_price_without_tax}}
+                {{lang 'products.price_was'}}
+                <span data-product-non-sale-price-without-tax class="price price--rrp"> {{price.non_sale_price_without_tax.formatted}}</span>
+            {{/if}}
+        </div>
+        <div>
+            <span class="price-now-label">
+                {{#if price.non_sale_price_without_tax}}
+                    {{lang 'products.price_now'}}
+                {{/if}}
+            </span>
+            <span data-product-price-without-tax class="price price--withoutTax"> {{price.without_tax.formatted}}</span>
             {{#if schema_org}}
                 <meta itemprop="availability" itemtype="http://schema.org/ItemAvailability"
                     content="http://schema.org/{{#if product.pre_order}}PreOrder{{else if product.out_of_stock}}OutOfStock{{else if product.can_purchase '===' false}}OutOfStock{{else}}InStock{{/if}}">
@@ -44,11 +72,13 @@
     {{/if}}
     {{#if page_type '===' 'product'}}
         {{#if price.saved}}
-            <div class="price-section price-section--saving">
-                <span class="price">
-                    {{lang 'products.you_save' amount=price.saved.formatted}}
-                </span>
-            </div>
+             <div class="price-section price-section--saving price">
+                    <span class="price">{{lang 'products.you_save_opening_text'}}</span>
+                    <span data-product-price-saved class="price">
+                        {{price.saved.formatted}}
+                    </span>
+                    <span class="price">{{lang 'products.you_save_closing_bracket'}}</span>
+             </div>
         {{/if}}
     {{/if}}
 {{/and}}
\ No newline at end of file