How to Set Up Crossed-Out Prices When a Coupon is Applied
Enabling the Cross-Out Price Mode 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.
Go to Klip Settings
Open the Klip Coupons app from your Shopify admin.
Navigate to the Settings tab.
Go to the Advanced Section
Scroll down to find the Advanced settings.
Enable the Cross-Out Price Mode
Toggle the setting to turn it on.
Cross-out pricing should work with most default themes, however some may need additional customization. Follow the instructions below if needed:
Inspect Your Product Price Element
On your product page, right-click the displayed price and select Inspect.
Use the Element Selector Tool
In the developer console, click the element selector tool (icon in the upper-left corner).
Select the Price Element
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.
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.
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.
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:
Edit or create a product.
Set a Compare-at price that’s higher than the Price to show the discount.
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 crossed-out price doesn’t appear correctly, you may need to adjust these selectors to match your theme’s structure.
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!
Steps to Enable Crossed-Out Prices
Go to Klip Settings
Open the Klip Coupons app from your Shopify admin.
Navigate to the Settings tab.
Go to the Advanced Section
Scroll down to find the Advanced settings.
Enable the Cross-Out Price Mode
Toggle the setting to turn it on.
Cross-out pricing should work with most default themes, however some may need additional customization. Follow the instructions below if needed:
Finding the Correct Selectors
Inspect Your Product Price Element
On your product page, right-click the displayed price and select Inspect.
Use the Element Selector Tool
In the developer console, click the element selector tool (icon in the upper-left corner).
Select the Price Element
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.
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.
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.
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:
Edit or create a product.
Set a Compare-at price that’s higher than the Price to show the discount.
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 crossed-out price 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: 18/03/2025
Thank you!