Display discounted prices directly on your Shopify product pages with the Product Widget from Discount Depot. The widget updates your theme’s existing product price when a matching discount is available, helping customers see the price they qualify for without displaying a separate discount box.

The widget checks the selected product variant and the discount offer’s eligibility conditions to determine whether the discounted price should appear. 

Note: Add the Product Discount Widget to a product template used by products included in your discount offers. The widget works with your theme’s existing price display and may require additional selector settings depending on your theme.

Product Widget Preview 

Take a sneak peek at a sample Product Discounted Price Block in the screenshot below.

Note: To enjoy the benefits of App Blocks, ensure you are using Online Store 2.0 Shopify themes.

Installation:

Before adding the widget, create and enable a Product Discount rule in the Discount Depot app. Make sure the product you use for testing meets the offer’s eligibility conditions. 

Step 1: Log in to your Shopify Store Admin and open the Online Store section from the left-hand navigation menu.

Step 2: Click the Edit theme button to open the theme editor.

Step 3: Open the product template used by the products included in your discount offer. You can select an eligible product to preview the template.

Step 4: In the theme editor, locate the product information section and add the Product Widget to the product template

Leave the optional selector fields blank initially. This allows the widget to use its default behavior before you configure any theme-specific selectors. 

Step 4: Click the Save button in the top-right corner of the theme editor to save your changes.

Step 6: Open an eligible product on your storefront and check whether the discounted price appears. If the product has multiple variants, switch between them to verify that the price updates correctly for each eligible variant. 

You have now added the Product Widget to your product page. If the discounted price appears correctly, no additional selector configuration is required. 

If Discounted Prices Do Not Appear 

Some Shopify themes use specific HTML containers and selectors to display product prices and handle variant changes. If the Product Widget does not update the price as expected, you may need to configure the Container selector. 

Step 1: Return to the Shopify theme editor and open the settings for the Product Widget. 

Step 2: Locate the Container selector field in the widget settings. 

Step 3: Enter the CSS selector that identifies the main product information area containing the product price in your theme. 

You can use one of the following examples if it matches your theme: 

• Container class: .product__info-container 
• Container ID: #MainProduct 
• Nested container selector: main .product-single__meta 

Important: These selectors are examples only. The correct selector depends on your Shopify theme and its structure. Use a selector that matches the actual product information container in your store. 

Step 4: Click Save in the top-right corner of the theme editor, refresh the product page, and check whether the discounted price appears. 

You only need to enter the appropriate selector in the widget settings. You do not need to add these classes or IDs to your theme code. 

Other Available Settings 

The Product Widget may include additional selector settings to help it work with different Shopify themes

Price selector: Identifies the element that displays the product price within the main product information area. 

Variant input selector: Identifies the form field containing the ID of the currently selected product variant. 

These settings may be required for certain themes. Use the selector values appropriate for your theme rather than copying example values without checking them. 

Important Notes 

• The widget updates the existing product price. It does not need to appear as a separate visible box on your product page. 
• Add it to the correct product template. Ensure the template is used by products covered by your discount offers. 
• Check variant eligibility. Different variants may have different prices or may not qualify for the same discount.
• Selector values are theme-specific. Configure the optional selectors only when necessary and use values that match your theme. 

Note: Do not confuse the Product Widget with the separate

Product Discounted Price block. The Product Widget updates the existing theme price, whereas the Product Discounted Price block is a separate block that displays the discounted price. 

Need Help? 

If discounted prices still do not appear after installing the widget, check the following: 

1. Verify that the selected product variant meets the offer’s eligibility conditions. 
2. Confirm that your Product Discount rule is active and enabled in Discount Depot. 
3. Check whether your theme requires a Container selector, Price selector, or Variant input selector. 
4. Save your changes and refresh the storefront to test the widget again. 

If you need assistance identifying the correct selectors for your Shopify theme, please contact the Discount Depot support team. We’ll be happy to help you configure the widget correctly.