How to display sale banner on multi-prices items in Capital theme?

Store Design

Topic summary

Issue: Add a “Sale” badge on product cards in the Capital theme, including items with multiple variant prices (e.g., the silver backpack should show a sale tag).

Proposed solution: Insert a Liquid condition on product cards to show the badge when a product is discounted:

  • Logic: show “Sale” if compare_at_price > price (indicates a discount across variants).
  • Placement: in a product card snippet near the image wrapper (initially referenced as product-grid → product-item__image-wrapper). Add CSS in theme.liquid (above ) to style/position the badge (absolute, top-right, red pill label).

Technical notes:

  • If product-item__image-wrapper isn’t found, look for snippets named product-card, product grid, or card-product, then locate the image wrapper within.
  • Some custom coding is required; images/screenshots provided are important for correct placement.

Assets shared: Store URL and screenshots illustrating the desired badge and insertion point.

Status: Not yet resolved. The requester couldn’t find the referenced element; helper clarified alternate snippet names and offered direct assistance/store access. Discussion remains open.

Summarized with AI on February 2. AI used: gpt-5.
1

Hi there,

I’m using the capital theme. Is there a way to have the sale banner appear on items that have multiple prices for different variants?

Thank you!

@KetanKumar

2

@bgold

hi,

Please share the store URL and also share the screenshots for where you want to place sale badge. in this case some coding are required.

3

www.littletoesch.com

** the silver backpack should have a sale tag on it

Screenshot (297).png
Screenshot (297).png2180×1454 295 KB

4

I have some code for fill your requirement.

firstly, go to snippets, then find product-grid in snippet folder. then find product-item__image-wrapper after that paste given code above . (also see the screenshot).

sale.png
sale.png1920×1080 472 KB

{% if card_product.compare_at_price > card_product.price %}

Sale
{% endif %}

After that, another code given below. paste this code above

layout >> theme.liquid

.tc_sale-badge { position: absolute; background: #eb0707; font-size: 16px; font-weight: 600; padding: 0px 10px; border-radius: 30px; color: #fff; display: inline-flex; align-items: center; right: 8px; top: 8px; }

after paste the whole given code. sale badge look like this,

techlyser_web_0-1673208601807.png
techlyser_web_0-1673208601807.png1899×907 147 KB

5

capital

6

@bgold I have given you the code, with screenshots, apply that code and see, even if you need any help, then contact us. thank you :slightly_smiling_face:

7

thank you! I couldn’t find product-item__image-wrapper in the snippets folder

8

@bgold

find product-card or product grid or card-product in snippet folder not product-item__image-wrapper.

after that find product-item__image-wrapper.

any problem to finding then you can give me access of your store i can add the sale badge.