Knowledge Base
Shopping Cart Software Online Manual
Display sale prices in red text
Display a slideshow on any store page Have your store match a website that links to it
Location Home > Shopping Cart Software Components > Administration Area > Design > FAQs & Tutorials

Display sale prices in red text

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:


Replace that chunk of code with something like this:


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.

— Last Edited - 04/1/2013 4:31pm PDT
Rank and add a comment to this article
Only logged in users may leave comments and rank articles. Log in to have your say!
  Knowledge Base Home

  QuickCode™ Tag Glossary

  Modular Homepage

Not Logged in.
Either Log in or create a User Account.

Other articles in this category...

Add "Search by Price" links to the storefront

Add a "Terms of Service" agreement to a store page

Add a favicon

Add images to an email template

Adding a Company Name field to the storefront

Can QuickCode Tags Be Used in PHP Statements?

Can QuickCode Tags be used on non-store webpages?

Common customizations for the Order Receipt email

Copy a template package

Create a custom version of any QuickCode Tag

Create reusable headers/footer with Custom QuickCode Tags

Creating a Customer Registration Form

Creating templates with content viewable only by specific Customer Groups

Customize the category template to display subcategories in a grid

Customize the navigation header of a responsive template

Customize the navigation header of a responsive template

Customize the tabbed content area of a responsive product template

Disabling featured product display

Display a message if a customer has already purchased a product

Display a slideshow on any store page

Display sale prices in red text

Have your store match a website that links to it

Introduction to editing responsive template packages

Link your company logo to a different website

List of available Templates for use in Template Packages

Playing Flash video instead of downloading it

Require service agreement when a specific product is purchased

The difference between templates and web pages

Troubleshooting Missing Images

Untranslated Red QuickCode Tags

Using "Add to Cart" links on your website.

Using comments in Custom QuickCode Tags

Using the Custom Webpage Editor to add links to your Storefront

Your storefront on smartphones & mobile devices

Creating Template Packages: Part 1 of 4

Creating Template Packages: Part 2 of 4

Creating Template Packages: Part 3 of 4

Creating Template Packages: Part 4 of 4