Hi, I have a collection called “T-shirts” in my shop, which I added a 15% discount to. I would like to show the discount in the product card and in the product page, so I followed many tutorials saying to modify the “price.liquid” and “card-product.liquid” files, but this didn’t work for me. I’m using spotlight.
Topic summary
A user is attempting to display a 15% collection discount on product cards and product pages in the Spotlight Shopify theme but cannot get it working despite following generic tutorials.
Key Issue:
- Standard tutorials reference files like “price.liquid” and “card-product.liquid” that don’t match Spotlight’s file structure
- The theme may use different file names like “price-ui.liquid” or “product-price.liquid”
Attempted Solutions:
- One responder provided Liquid code snippets with discount badge logic and CSS styling
- The code checks for compare_at_price to calculate percentage savings
- However, the user reports being unable to locate suggested files (product-template.liquid, product-info.liquid) and the code snippet added to product-card.liquid doesn’t display discounts
Alternative Approaches Suggested:
- Check Theme Settings under “Products” for native discount display options
- Consider app-based discount solutions that inject their own display elements
- Use price lists feature that integrates with themes to show final discounted prices
Current Status:
The issue remains unresolved. The user may need custom code assistance or an app-based solution compatible with Spotlight’s specific architecture.
Hi @nicodev06
It sounds like you’re struggling with displaying collection discounts in the Spotlight theme. Spotlight handles discounts differently than some other themes, so those generic tutorials might not work. Look in your theme files for “price-ui.liquid” or “product-price.liquid” instead of just “price.liquid” - this is likely where the price display logic lives in Spotlight.
Also check if your theme has a built-in solution by exploring the Theme Settings under “Products” - some versions of Spotlight have native discount display options. If you’re still stuck, try adding the code specifically to the theme sections that control product templates (product-template.liquid) and collection product cards (product-card.liquid). As a last resort, you might need to use app-based discount solutions that inject their own discount display elements.
Try using this code:
{% if product.compare_at_price_max > product.price %}
{% assign savings = product.compare_at_price_max | minus: product.price | times: 100 | divided_by: product.compare_at_price_max %}
{{ savings | floor }}% OFF
{% endif %}
{% if current_variant.compare_at_price > current_variant.price %}
{% assign savings = current_variant.compare_at_price | minus: current_variant.price | times: 100 | divided_by: current_variant.compare_at_price %}
{{ savings | floor }}% OFF
{% endif %}
.product-discount-badge {
background-color: #e94c3d;
color: white;
padding: 3px 8px;
border-radius: 3px;
font-size: 12px;
font-weight: bold;
display: inline-block;
margin-top: 5px;
}
.product-page-badge {
font-size: 14px;
padding: 5px 10px;
margin-bottom: 10px;
}
Hi, thanks for the response. I tried this way but I can’t find any file called product-template.liquid or product-info.liquid. Anyway, I still add the code snippet you provide me in the product-card.liquid but it doesn’t show any discount.
@nicodev06 , we solve for this through a feature called price lists that integrates neatly with any theme + allows you to show the final discounted price of the item on the product card itself 
If you’d like to solve for it manually, there are ways to show a custom discount badge or something. For this you’d either need some code knowledge / someone to assist you with the modifications.
Let me know if you need help.