The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
Thread Tools Display Modes
Old 03-06-2012, 07:40 PM
Out of This World's Avatar
Out of This World is offline
Join Date: Mar 2010
Posts: 126

CSS/HTML workaround for "On Sale" feature

So until Ecwid implements a Control Panel feature for "On Sale" items, I thought I'd share one that I've developed using CSS and some HTML code in the product description.

This will place a box with a graphic with "This Item Is On Sale!" box, along with "$XXX.XX Regular Price" (with the price formatted with strikethru font effect) and "Sale Price," which look like this:

In your CSS you need to place the following (making color and size changes to match your colors/layout):

HTML Code:
#onSale {
     width: 200px;
     float: right;
     margin-left: 20px;
     padding: 70px 10px 5px 10px;
     font-size: 11px;
     background: transparent url( no-repeat top center;
     border: 1px solid #c25800;
#onSaleDetail {
     float: left;
     font-size: 18px;
     font-weight: bold;
     margin-left: 10px;
     color: #c25800;
#onSaleDetail .originalPrice {
     color: #44504e;
     text-decoration: line-through;
#onSaleDetail .originalPriceText {
    color: #44504e;
#onSaleDetail .salePrice {
     font-weight: bold;
     font-size: 22px;

Then place the following HTML into your product description (the only text you need to change is the actual prices):

HTML Code:
<div id="onSale">
<div id="onSaleDetail"><span class="originalPrice">$189</span><span class="originalPriceText"> Original Price</span><br /><span class="salePrice">$139</span> Sale Price!</div>
Feel free to utilize the graphic I created, but please copy it to your own server.

I'm playing around with ways to move it higher up into the page, but that seems to interfere with the page div layouts.

Let me know how it works for you!
The Following 4 Users Say Thank You to Out of This World For This Useful Post:
Buck Snort Lodge Products (05-09-2012), Matt Ecwid (03-06-2012), Maya (03-07-2012), Taiji (03-06-2012)
Old 03-06-2012, 07:58 PM
Taiji's Avatar
Taiji Taiji is offline
Join Date: Jun 2010
Posts: 134

Thank you! I will definitely give this a go.
Old 06-25-2012, 09:53 PM
Matt Ecwid's Avatar
Matt Ecwid Matt Ecwid is offline
Ecwid Team
Join Date: Oct 2011
Posts: 4,947

The 'Sale price' feature has been released with the version 11 of Ecwid.

Please refer to this article for the information on how to set 'Compare to' prices for your products:
Matt K
Ecwid Team

Ecwid Guide for Beginners

Ecwid Help Center

Ecwid video tutorials
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

css, display issues, features, on sale

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT. The time now is 10:52 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.