How to show discount icon on products

[AndersHelbo]

How can I set a discount icon on a product, when making a special price. In the backend (in this case danish), there's a small button we can mark, if we wants to show a discount-icon in description and product overview (see screenshot).

 

Thanks.

 

[AndersHelbo]

bump

[vekia]

hello

 

where you want to display icon? homefeatured module? product list?

and what theme you use? default?

[AndersHelbo]

hello

 

where you want to display icon? homefeatured module? product list?

and what theme you use? default?

 

Hi. I want to display an icon over the image that tells the costumer, that the products has a discount. Not how much the product cost, but just the test "Discount".

 

The websites is http://www.runnerslab.dk with a costum made template from an external designer.

[vekia]

hello

 

thank you for reply.

 

something like that:

 

?

[AndersHelbo]

hello

 

thank you for reply.

 

something like that:

 

?

 

Yes! That's exactly what I mean But it's a danish website, so the text should be "TILBUD" instead of "DISCOUNT".

[vekia]

Yes! That's exactly what I mean But it's a danish website, so the text should be "TILBUD" instead of "DISCOUNT".

 

no worries, you will be able to translate it

ok! so let's start

 

i will start this guide with standard product listings in categories.

 

in this case please open product-list.tpl file

you've got there something like:

	<!-- Products list -->
	<ul id="product_list" class="clear">
	{foreach from=$products item=product name=products}
		<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix"> 
...
...

right after

<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">

 add this code:

{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
<span class="discount_badge">
{l s='discount!'}
</span>
{/if}

then open:

 

you've got there code with styles for #featured-products_block_center li

add there position:relative; like i show below

 

#featured-products_block_center li {
margin-right: 25px;
padding: 0;
width: 160px;
height: 245px;
position:relative;
}

right after code above, insert these styles (just copy and paste)

#featured-products_block_center li .discount_badge {
	position:absolute;
	right:0px;
	top:0px;
	background:red;
	color:white;
	text-transform:uppercase;
	z-index:2;
	padding:5px 10px;
}

effect (it's only example - you will see badge only for product with real discount)

[AndersHelbo]

Great. It worked out just fine

http://runnerslab.dk/55-tilbud

[vekia]

yeah looks great! especially when it is green!

 

now the question:

you want the same on homepage?

i suppose that you use homefeatured module there?

[ALMAJ]

no worries, you will be able to translate it

ok! so let's start

 

i will start this guide with standard product listings in categories.

 

in this case please open product-list.tpl file

you've got there something like:

	<!-- Products list -->
	<ul id="product_list" class="clear">
	{foreach from=$products item=product name=products}
		<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix"> 
...
...

right after

<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">

 add this code:

{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
<span class="discount_badge">
{l s='discount!'}
</span>
{/if}

then open:

 

you've got there code with styles for #featured-products_block_center li

add there position:relative; like i show below

 

#featured-products_block_center li {
margin-right: 25px;
padding: 0;
width: 160px;
height: 245px;
position:relative;
}

right after code above, insert these styles (just copy and paste)

#featured-products_block_center li .discount_badge {
	position:absolute;
	right:0px;
	top:0px;
	background:red;
	color:white;
	text-transform:uppercase;
	z-index:2;
	padding:5px 10px;
}

effect (it's only example - you will see badge only for product with real discount)

 

Hello vekia, tanks for the tutorial, but i missed the second part, when you say "then open:" what file do i open?

tanks again.

[vekia]

Hello vekia, tanks for the tutorial, but i missed the second part, when you say "then open:" what file do i open?

tanks again.

open homefeatuerd.css file which contains styles for home featured products module

[rschwendeman]

I am confused. If under this section of the code,

{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
<span class="discount_badge">
{l s='discount!'}
</span>
{/if}

 where it says discount if I wanted to change it to say "REDUCED" I would just change  from:

{l s='discount!'}

to

{l s='On SALEt!'}

Then it should work, correct? However I am still showing "Discount".. I have no cache and cleared everything else... Any ideas? Am I missing something really stupid...?

 

Example is here: http://interiorcollection.net/cms/en/4-reproductions

 

Also, for some reason the CSS styling is not taking either...

Edited January 20, 2014 by rschwendeman (see edit history)

[rschwendeman]

OK, I was doing something stupid.. (needed to clear browser cache)..

 

But CSS styling is still not taking hold...

 

[vekia]

it's a productl isting, not homefeatured module

[jokerstar]

Doesnt work with presta 1.5.6.2 or I made somtg bad.

Vekia in your tutorial smt missing there is your text:

 

Add this code:

{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
<span class="discount_badge">
{l s='discount!'}
</span>
{/if}

then open: (?WHAT?)

 

you've got there code with styles for #featured-products_block_center li

add there position:relative; like i show below
 

#featured-products_block_center li {
margin-right: 25px;
padding: 0;
width: 160px;
height: 245px;
position:relative;
}

 

Well I opened root/presta/modules/homefeatured/homefeatured.css 

and add your code there, but it doesnt work well, there is only text discount but not backgroud color and other atributes

Edited January 30, 2014 by jokerstar (see edit history)

[vekia]

in fact, everything depends on theme that you guys use,

in this case, please share url to your website, both of you

 

without url it will be almost impossible to help

[jokerstar]

in fact, everything depends on theme that you guys use,

in this case, please share url to your website, both of you

 

without url it will be almost impossible to help

it is default theme.

www.bunco.sk

Edited January 31, 2014 by jokerstar (see edit history)

[vekia]

it is default theme.

www.bunco.sk

 

take a look:

[vekia]

+

 

add to css file:
 

.discount_badge{
	position:absolute;
	right:0px;
	top:0px;
	background:red;
	color:white;
	text-transform:uppercase;
	z-index:2;
	padding:5px 10px;
	
}

+

 

add position:relative; to:

#product_list.grid li {
overflow: hidden;
margin-bottom: 14px;
padding: 10px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
width: 153px;
height: 270px;
position: relative;
}

it's not default theme, it's customized default theme you've got totally different product list, it's not the same list as author of this topic has got) 

[jokerstar]

yes it is customized deafult theme sry, 

well I gonna add to css, but to which css file? global.css? or into root/presta/modules/homefeatured/homefeatured.css ?

[vekia]

this code above is for product lists,

so add code to global.cs

if you want additional information about discount on featured products module - you have to modify module template file and also paste appropriate css styles

[jokerstar]

this code above is for product lists,

so add code to global.cs

if you want additional information about discount on featured products module - you have to modify module template file and also paste appropriate css styles

I found out thet there is some badge in presta name . discount (zlavnena cena) but for me it only works in minilist only after reload page, it doesnt wokr when i switch from list to minilist view.

Edited January 31, 2014 by jokerstar (see edit history)

[jokerstar]

well I did it by other way I added to productl-list.tpl one line.

find this paragraph in product list:

Before: 

 

<div class="center_block">

                <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">

                    {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>{/if}

                    <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

                    {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}

                </a>

                <h3>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if} {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>

                <p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</a></p>

            </div>

 

AFTER:

<div class="center_block">

                <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">

                    {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>{/if}

                    {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>{/if}

 

                    <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

                    {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}

                </a>

                <h3>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if} {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>

                <p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</a></p>

            </div>

 

LEGEND: Green-ADDED; Red-DELETED

 

Now I can see discount on place we is show On sale. So if you have some discount now it will be automaticly show in corner.

 

But vekia, please can you check my web a tell me where is problem. When you choose grid use F5(refresh site) everything is ok, but then click on minilist view and there is nothing about Discount or On sale. So in minilist refresh site and there will be now minilist-badges so after refresh it is ok. But again if you go to grid view and refresh site and then go back to minilist, Discount and On sale minilist-badges disappear.

Can you help me with this issue please?

Edited January 31, 2014 by jokerstar (see edit history)

[REGI0]

Hello i would like to add "promotion" logo to my shop.

I added code to product-list.tpl and homefeatured.css but there was no css effect so i added below code to global.css 

 

.discount_badge{
	position:absolute;
	right:0px;
	top:0px;
	background:red;
	color:white;
	text-transform:uppercase;
	z-index:2;
	padding:5px 10px;
	
}

After this step the text background is the red as on the picture below but "promotion" text is still shifted to the right. I think the position: relative; is missing but where to add this

 

 

 

Please help thanks in advance

Edited November 19, 2015 by REGI0 (see edit history)

[REGI0]

Ok i've done it

 

in my theme you  must change code of three files:

global.css

product-section-cs.tpl

product.tpl

[oussama1000]

hi

 

I have a similar question so I will continu on this threat,

 

I want an icon displaying the reduction percentage over the image. On the top left I get. like in the exemple

 

 

Thanks

[syed.obaid]

I have same issue in my theme i want to add the discount tag infront of my product on homepage . i already try but it's can't work.

 

My website URL is : apparelprime.com

please help me also i attach the file can you edit on these files.

cshomefeatured.css

product-list.tpl

Edited November 8, 2017 by syed.obaid
i forgetton the files for attch (see edit history)

[gabgar]

SOLVED:

I just add : $product.manufacturer_name and the name.

Hi, i would like to do the same as AndersHelbo, (from the top of the post) but only with one difference.

What i need is show the badge  only for a particular manufacter, in fact 3 different manufacters, I have different discounts for different products but i only need to add the badge to a 3 manufacters.

https://www.tiendamotocenter.com/3000-cascos-de-moto

For example AGV and GIVI HELMETS should show the badge.

Is it possible

Edited February 18, 2020 by gabgar (see edit history)