Articles on: Klip Settings

How to Set Up Cross-out Pricing When a Coupon is Applied

Enabling the Dynamic Pricing in Klip Coupons ensures that when a customer applies a coupon, the original price is visibly crossed out, showing the discounted price. This can help increase conversions by making the discount more noticeable.


How to Enable Dynamic Pricing


  1. Open the Klip Coupons App

From your Shopify admin, go to Apps and open Klip Coupons.

  1. Go to Settings

Click on the Settings tab.

  1. Select Cross-Out Pricing

In the Settings menu, click on Cross-Out Pricing.

  1. Enable Cross-Out Price Mode

Check the box labeled Update new product price with compare-at price when coupon is clipped to enable the Cross-Out Price Mode.


Dynamic Pricing pricing should work with most default themes, however some may need additional customization. Follow the instructions below if needed:


Finding the Correct Selectors


  1. Inspect Your Product Price Element
  • On your product page, right-click the displayed price and select Inspect.


  1. Use the Element Selector Tool

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


Select the Price Element

  1. Select the Price Element
  • Hover over the product price and copy the selector that appears.
  • Do not include <div> or <span> tags in the selector.



  1. Include Parent Classes 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. Paste the Copied Selector
  • Go back to the Advanced settings in Klip.
  • Paste the copied selector into the Product Price Selector field.
  • 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.


  1. Find the Sale Price Selector
  • Go to a product that has a compare-at price (a sale price).


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


  1. Edit or create a product.



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



  1. Paste the Sale Price Selector
  • Repeat the same process as before and paste the copied selector into the Sale Price Selector field.



Tip: If the Dynamic Pricing doesn’t appear correctly, you may need to 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: 02/07/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!