How to setup discounted Pricing as Strikethrough on Collection Pages
This guide explains how to display strike-through discounted pricing directly on your collection pages (product grids), ensuring customers see the deal before they even click on a product.
1. Enable the Display Setting
First, ensure the feature is activated within your discount rule.
- Navigate to your Custom Discount Builder in the Kite app.
- Open the specific offer you are running (e.g., for the "Hydrogen" collection).
- Locate the toggle labeled display discounted pricing and turn it ON.
- Click Save.
2. Add the Widget to Collection Pages
Next, you need to place the pricing block into your theme's collection template so it appears on the product cards.
- Go to your Online Store > Themes and click Customize.
- Navigate to the Collection page template (usually "Default collection").
- In the left sidebar, look for the "Apps" or "Section" area and click Add block. Select the Kite discounted pricing block.
- Crucial Step: Drag and drop this block inside the product card section. This ensures the price updates for each individual product in the grid.
- Click Save.
3. Customize and Troubleshooting (Advanced)
If the pricing doesn't appear correctly or you want to change the style, you can adjust the block settings.
- Styling: Click on the block in the theme editor to change settings like text color, font size, and typography.
- Positioning (Identifiers): If the strike-through isn't showing up or is in the wrong spot (common with custom themes), you may need to manually input identifiers:
- Price identifier: Enter the CSS class or ID of your theme's original price block.
- Product item identifier: Enter the CSS class or ID of the product card container.
4. Verify on Your Storefront
- Go to your live store and navigate to the relevant collection page (e.g., Hydrogen collection).
- Verify that the discounted price with the strike-through is visible on the product cards.
Note: The strike-through pricing will only appear if all eligibility rules for the discount are met. If your rule requires a minimum cart total, the discounted price may not show until the customer adds items to their cart.
Updated on: 29/12/2025
Thank you!
