Articles on: Klip Settings

How to Show Cross-Out Pricing on Product Page When Customers Clip a Coupon

Enable dynamic pricing in Klip Coupons to automatically cross out the original product price and show the discounted price when a coupon is clipped. This makes discounts more visible and can help increase conversions.



Enable Cross-Out Pricing

  1. From your Shopify admin, go to Apps --> Klip Coupons.
  2. Click Settings --> Cross-Out Pricing.
  3. Check Update new product price with compare-at price when coupon is clipped.



💡 Works with most Shopify themes. If the crossed-out price doesn’t appear correctly, follow the customization steps below.


Customize Selectors (if needed)


By default, the app automatically uses the correct selectors based on your published theme, so manual configuration is usually not necessary.


If your cart page coupons are not displaying correctly, please reach out to our support team. We’ll be more than happy to help you set this up and ensure everything is working as expected.


If you’d like to try locating the selectors yourself, please follow the steps below:


  1. On your product page, right-click the price and select Inspect.



  1. In the developer console, click the element selector tool (upper-left icon).



  1. Hover over the product price and copy the selector that appears.


Do not include <div> or <span> tags in the selector.



  1. Include the parent class if needed for accuracy.
  • Including parent classes helps the app identify the correct price element.
  • In this example, the parent class is .product__info-wrapper, but this may vary based on your theme.
  • Some themes may use the same class for both the main product price and recommended product prices. Identifying the parent container class can help avoid issues.



  1. In Klip Coupons, go to Settings → Advanced and paste the selector in Product Price Selector.
  • The selector should start with a period ( .), and if you need multiple selector paths, separate them with a comma ( ,).
  • In this example, only one selector is needed for this theme, so no additional paths are required.



Find the Sale Price Selector

To handle sale prices (compare-at pricing):


Tip: If you don’t have any products with a compare-at price, you can create one temporarily:


  1. Choose a product with a compare-at price (or temporarily create one).



  1. Set a Compare-at price that’s higher than the Price to show the discount.




  1. In Klip Coupons, paste it into the Sale Price Selector field.
  • Repeat the same process as before and paste the copied selector into the Sale Price Selector field.



💡 If the crossed-out price doesn’t appear as expected, adjust these selectors to match your theme’s structure.



How to Display Cross-Out Pricing on Collection Pages


You can also show a crossed-out original price directly on product cards in collection pages. This lets customers see the discounted price as soon as they browse a collection, even before opening the product page.


For step-by-step instructions, see How to Display Cross-Out Pricing on Collection Pages

Updated on: 14/01/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!