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

Store Design
,

Topic summary

A user wants to display both “Pre-Order” and “Sale” labels simultaneously on discounted pre-order items in their collection view. Currently, when using the pre-order template with a compare-at-price (discount), only the sale label appears.

Current Issue:

  • Using Athens Theme 2.4.0
  • Sale label overrides pre-order label when both conditions apply

Solution Provided:
A custom code implementation is offered to display both labels:

  1. Navigate to Online Store → Themes → Edit code
  2. Locate the “card-product.liquid” file
  3. Search for the “card__badge” class
  4. Add conditional Liquid code that checks if product tags contain “pre-order” and if the product is available
  5. This creates a separate pre-order label alongside the existing sale label

The solution uses custom Liquid templating with conditional logic to render multiple labels based on product tags and availability status.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

display both.png
display both.png1181×740 140 KB

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.

2

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 :slightly_smiling_face:

Thanks

3

@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 -%}
    
{%- endif -%}

hopefully you will get that what you need.

1 Like