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
  #1  
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
Default

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(http://discountbinoculars.com/images/notice_sale.jpg) 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 {
     color:#c25800;
     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>
</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)
  #2  
Old 03-06-2012, 07:58 PM
Taiji's Avatar
Taiji Taiji is offline
 
Join Date: Jun 2010
Posts: 134
Default

Thank you! I will definitely give this a go.
  #3  
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
Default

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:
http://kb.ecwid.com/w/page/54802595/Sale%20price
__________________
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.

Tags
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.