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 09-08-2013, 08:27 PM
thurstonandlovey's Avatar
thurstonandlovey is offline
Join Date: Nov 2011
Posts: 21

Custom "On Sale" box

I am loving the On Sale feature and how we can use custom CSS to have to appear in a box that looks like a label. (Thank you SO much for your great work with ECWID it's really awesome for us web developers)

Regarding the positioning of that label / box, the CSS that ECWID directed us to utilise uses a negative top margin. This looks great EXCEPT, that it must take its measurement from END of the product label text.. because when you have multiple products on the same page, and some product titles are on one line, some wrap to 2 lines, the On SALE label is in a different position, because it must be talking it's positioning from where the text label finishes..

Please see this page to see what I mean:

These 4 images are EXACTLY the same size.. However just one of the products has a title that does NOT spill over to the second line - and this is causing the ON SALE label to be in a different position to the rest.

This is not a massive issue BUT, if you are someone who likes things to look neat and consistent this is not ideal...

Is there another way to set the positioning of this label so that this inconsistency does not occur?

Thanks SO much, Kirstie
Old 09-10-2013, 06:17 AM's Avatar is offline
Join Date: Dec 2011
Location: CA / FL
Posts: 345

I think you'll either have to make sure the product text never reaches a 2nd line or use javascript to move the elements or calculate where to move them. The reason they aren't the same is because they move relative to their starting position and the multi line text creates a difference.

For option 1 you could do:
.ecwid-productBrowser-productNameLink {
    height: 25px;
    overflow: hidden;
It will cut off the product names though. You could try reducing the font-size to reveal more text to the customer.

For javascript, you could move ".ecwid-productBrowser-price-savePanel" into the same div as the images which would give them all the same starting position no matter how long the text.

That way is a lot more complicated though:
You'll need jQuery:
<script type="text/javascript" src=""></script>
Then to move the panels:
Ecwid.OnPageLoaded.add(function(page) {
    if (page.type == 'CATEGORY' ) {
        $('.ecwid-productBrowser-price-save-container').parents('.ecwid-productBrowser-productsGrid-productBottomFragment').find('.ecwid-productBrowser-productNameLink a').each(function() {
            var product_name = $(this).text();
            var save_container = $(this).parents('.ecwid-productBrowser-productsGrid-productBottomFragment').find('.ecwid-productBrowser-price-save-container');
            $(this).parents('tr').find('img').each(function() {
                if ($(this).attr('alt') == product_name) {
I'm no professional so I'm not sure if that is the most efficient way.

You'll need to update the css.

html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-grid div.ecwid-productBrowser-price-save-container
The panel isn't in the price-grid anymore so just remove that
html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-save-container
And the images will move to the left so you'll need to recenter them with:
.ecwid-productBrowser-productsGrid-productTopFragment-inner a {
    display: block;
    text-align: center;
There might/probably will need to be other minor adjustments to the CSS.

Last edited by smoothsailingclothing; 09-10-2013 at 06:20 AM.
The Following 2 Users Say Thank You to For This Useful Post:
thurstonandlovey (09-10-2013), Maya (09-10-2013)
Old 09-10-2013, 09:41 AM
thurstonandlovey's Avatar
thurstonandlovey thurstonandlovey is offline
Join Date: Nov 2011
Posts: 21
Default Thanks so much for your reply!

Wow "smooth sailing" - thanks much for that very detailed response, VERY kind of you! Will have to give this a go .. thanks again!
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

custom css, on sale, on sale label, save box

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 06:38 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.