Articles on: Klip Settings

How to Show Cross-Out Pricing 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)

Some themes may need manual configuration to correctly display crossed-out pricing. You can define which elements Klip Coupons updates when a coupon is applied.


  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.


Need Help?


If you're having trouble setting this up or need assistance with selecting the correct price elements, reach out to Klip support. We’re happy to help ensure everything works smoothly with your theme!

Updated on: 01/08/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!