Display sale prices in red text


	Display sale prices in red text
	Last Edited - 04/1/2013 4:31pm PDT
	Category Path - Shopping Cart Software Components > Administration Area > Design > FAQs & Tutorials

loraine g. from billings writes:

Dear Modular Merchant Shopping Cart Software,

In my online store, I'd really like to draw attention to the products I have on sale by highlighting their sale price in red text. Is it possible to highlight the sale products, and only the sale products, in this way?

With Sincerest Gratitude,
Loraine G.

Thank you for the heartwarming question, Loraine. It warms my heart even more to be able to tell you that, yes, it is possible to display sale prices in red — or with any special treatment, for that matter.

Here is one example of how this can be achieved. Note: For simplicity's sake, the following technique uses a simple HTML "font" tag. The same affect could be achieved with CSS styles too, of course.

To edit the color of a product's sale price, you will need to edit the HTML template of any storefront page that displays the product's price. To do that, first log in to your store's Administration Area and go to [Design > Template Package Sandbox]. That is the location of the aptly named Template Package Sandbox.

In the Template Editor, load a template that displays product prices, such as the storefront template. Locate the section of the template that displays the product price. It will look something like this:

example

{PRODUCT-PRICE}

Replace that chunk of code with something like this:

example

{IF-PRODUCT-PRICE-REDUCED-BEGIN}
<font color="red">{PRODUCT-PRICE}</font>
{ELSE}
{PRODUCT-PRICE}
{IF-PRODUCT-PRICE-REDUCED-END}

In this example, the content between the {IF-PRODUCT-PRICE-REDUCED-BEGIN} and {ELSE} QuickCode Tags is only displayed if the product is on sale. (ie: its price has been reduced by a discount, promotion, event, coupon, etc.) So, to achieve the desired effect, a font tag coloring the text red is applied to the price displayed in this section.

The text between the {ELSE} and {IF-PRODUCT-PRICE-REDUCED-END} QuickCode Tags is displayed if the product isn't on sale. In this section, no effects have been applied to the price, and it displays normally.

feel free to innovate

Keen readers may have realized that any content may be encapsulated within the {IF-PRODUCT-PRICE-REDUCED-BEGIN} and {IF-PRODUCT-PRICE-REDUCED-END} QuickCode Tags — it's not restricted to just the product's price.

These tags could be used to display (or hide) entire paragraphs of information, or images, or links to other pages, or information on other products in the promotion, or a picture of Abraham Lincoln eating a sandwich — depending on whether the product is on sale or not. The possibilities are endless*!

*This statement is based upon the assumption that the Universe is indeed infinite. If the Universe is ever found to be, in actuality, finite, and its own magnitude causes it to henceforth collapse upon itself, Modular Merchant will graciously redact this statement prior to the ensuing fiery apocalypse.