Product Badge and Labels (Flow theme)

Solved
Highlighted
Excursionist
30 1 3

Hello Everyone! 

I want to add labels on my product images at homepage to featured collection and at collection pages. I've checked the app store. The best app is "product labels" that i am using free trial for now. But monthly price is too much for our budget. What i want to do is can we add custom images for per collections like ;

if a product has min %10 discount place "discount percantage or discount image" label (custom png label maybe?) 

and

if a product is added at last 10 days place "new" label (custom png label as well)

I also want to set margins where to place.

 

Example;

ex.jpg



That looks can be done with very small coding at featured-collections.liquid i found the placements. I'm searching for the code for 2 days. There are many topics at forums but i couldn't find what im looking for.

Maybe anyone to help?

Thanks.

0 Likes
Highlighted
Shopify Partner
581 92 133

Hello @PamDigital,

                                      Share store link for better understanding of your problem. 

0 Likes
Highlighted
Excursionist
30 1 3

Hello @Wahab_Ahmad ,

Thanks for fast reply. It is 

http://sulegiyim.myshopify.com/

Thanks.

0 Likes
Highlighted
Excursionist
30 1 3

I wrote this code below. But it shows 0% discount when the product has 18% discount. Whats wrong here? :/



{% if product.tags contains 'new' %}
<div style = "position:absolute; left:10px; top:420px;">
<div class="sale-badge badge" > <li class="product-page--pricing--discount">
<span class="variant-percentage-wrapper{% unless on_sale %} hide{% endunless %}">
<span class="variant-percentage">{{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | money_without_currency | times: 100 | remove: '.0'}}%</span>
</span>
</li>


</div>
</div>
0 Likes
Highlighted
Excursionist
30 1 3

This is an accepted solution.

I found the solution for guys who want to use product labels / badges ;

First create a badge in timber.scss.liquid
For example my badge is

 

.discount-badge {
  background: $saleBadgeColor;
  color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  padding: 10px 10px;
  text-transform: uppercase;
  z-index: 4;
  position: absolute;
  top: 0;
  left: 0;
}

You can find css badge style at internet.

Second connect your conditions to this badge. For example my code is "if product has compared price show it as discount" . You can paste this condition whereever you want. In my web site i pasted it at featured-products.liquid

My code is;

{% if product.compare_at_price_max > product.price and product.available %}
<div class ="new-badge">
            <div class="discount-badge badge" >
             % {{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | money_without_currency | times: 100 | remove: '.0'}}
             <div align="center"> 
  DISCOUNT
</div>
            </div>
   </div>
{% endif %}

And last go back to timber.scss.liquid. And set your media options for devices or desktop. For example my code for that is

@media only screen and (min-width: 1025px) {
.new-badge .discount-badge.badge {
	bottom: 20%;
	top: unset !important;
	left: 20px !important;
}

.new-badge .discount-badge.badge {
bottom: 15%;
}
}

@media only screen and (max-width: 1024px) {
  .new-badge .discount-badge.badge {
    display: none;
  }
}


For the discount label / badge placement you can change your top or bottom settings. Thats all you have a new badge :)

 

Thanks to @oscprofessional for placement help!

 

0 Likes
Highlighted
Shopify Partner
300 11 60

Hi @PamDigital welcome to Shopify community

I noticed that you wanted to apply sold out badges on your catalog images.

 

We have developed an app (Modemagic) that will help you add product stickers/badges on your catalog within seconds. And we have an extensive collection of customized stickers based on different occasions (Sale & Discounts, Pre-Order, Trust Badges, and much more) You can also create custom badges based on what copy you prefer.

I hope this helps!

Munawar.



ModeMagic
Featured on Shopify Staff Picks
Want a free store consultation to boost your sales? Send me a message.
Grab your limited time offer on install today!
0 Likes