Display both Pre-Order and Sale labels on an item.

[usdentalinc]

See the picture above. When I discount an item by filling in compare-at-price in using the pre-order template, it only shows the sale label on the item when viewed in a collection. Is there a way to show both pre-order and sale labels, or even just show pre-order label with a slashed out price?

Theme I'm using is Athens 2.4.0
Thanks.

[Liquid_xPert_SJ]

Hi @usdentalinc,

yes its possible to show 2 labels in one product pre-order and sale both can be displayed at one time you just need to write some custom code using some condition that if template is pre-order you can create your own label for pre-order beside the sale label.

Do let me know if you need my help 🙂

Thanks

[Liquid_xPert_SJ · Accepted solution]

@usdentalinc 

Steps to add custom preoder label to all the products of a collection:
1. Go to "Online Store" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Locate the file "card-product.liquid" and search class named "card__badge".
4. Add the below code

{%- if card_product.tags contains 'pre-order' and card_product.available -%}
    <span 
    id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}" 
    class="badge badge--bottom-lef"
    PreOrder</span>
{%- endif -%}

hopefully you will get that what you need.