Tips and Tricks: Use Store Morph to Show Sale Price on Products

By Doreen Jeffers

Did You Know…?
You can show an MSRP price and your discounted price for any product.

Focus: Custom Product Fields
Goal: Show the full price of a product, cross it out, then show your lower price.
Level: Beginner – New to Store Morph

If you run an online discount store, you may want to compare the Manufacturer’s Suggested Retail Price (MSRP) to your discounted price. Or, if you put items on sale, you may want to show both the original price and the sale price.

This is easy to do in Miva Merchant 5. You simply create a custom product field for the higher price, and use the built-in price field for the lower price. Then you can edit the Page templates for the Product and Category pages (and maybe even the Search page) to show the higher price (with a strikethrough) next to the lower price.

Step 1: Add a custom product field for the higher price.
In the Miva Merchant 5 admin interface, click Utilities (on the left – the first one underneath the name of your store). Make sure the “Custom Fields” module is checked –  if not, check the box and click the Update button.
 
Click Custom Product Fields (on the top), then click the ADD button to add a new field. You can choose any code or name for the field – we’ll use the code “FullPrice” and the name “Full Price”. Click Update to save the field definition.

Step 2: On each page template, enable the custom field for the higher price.
Click Pages (on the left). Click the Edit button for the PROD page. Click Product Display Layout (on the top). (If you see code, click “Point + Click Mode” near the bottom of the page.) Check the box for the custom field you created (Full Price). Click Update at the bottom of the page.
 
If you want the higher price to appear on the Category and Search pages, repeat this step for the CTGY page (edit the Category Product List Layout template) and SRCH page (edit the Search Results Layout template).

Step 3: Change the template code for each page to display the full price.
Click Pages (on the left). Click the Edit button for the PROD page. Click Product Display Layout (on the top). If you do not see any code, click the Advanced Mode link near the bottom.
In the Store Morph code, right before the price entity, (which looks like &mvt:product:formatted_price; ), add code similar to the following…

	
	<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:FullPrice">
		<s>&mvt:product:customfield_values:customfields:FullPrice;</s>
	</mvt:if>
	

The <s> and </s> HTML tags are used to “cross out” the price. You can also dress this up with more HTML or CSS formatting if you like.

If you see code similar to the above elsewhere in the Product Display Layout template, be sure to delete it – otherwise the Full Price will appear twice on the page.

Click Update to save your changes.

If you want the higher price to appear on the Category and Search pages, repeat this step for the CTGY page (edit the Category Product List Layout template) and SRCH page (edit the Search Results Layout template).

Step 4: For each product that you want to show a higher price for, enter the higher price into the custom product field you created in Step 2.
Click Products (on the left). Click the Edit button for the product you want to specify a higher price for. Click Custom Fields (on the top). Type the higher price into the “Full Price” field. Click Update to save your changes.

Step 5: Test a few sample products.
Go to the Category and Product pages for a few of the items that you entered a higher price for in Step 4. Make sure everything looks OK. If you edited the Search page, test the Search Results as well for a few representative products.

That’s it! Now your customers will know how much money they can save shopping at your store.

About the Author
Doreen Jeffers is a Miva Merchant partner and the owner of iMarks Web Solutions, LLC. She has designed Miva Merchant sites for BestFriends General Store and Hollywood Harley-Davidson. iMarks specializes in Miva Merchant 5 web site design.