Display discounted prices on your Shopify home page with the Home Widget from Discount Depot. The widget updates eligible prices on existing product cards, making it easier for customers to discover available offers while browsing featured collections, recommended products, and product sliders.  

The widget checks whether products qualify for an active discount and displays the eligible discounted price directly on the corresponding home page product cards. 

Note: Add the Home Widget works with existing product cards on your home page. Your Shopify theme must already contain product sections, such as featured collections or product sliders, where you want discounted prices to appear. 

Home Widget Preview

Take a sneak peek at a sample Home 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 installing the widget, create and enable a Product Discount rule in the Discount Depot app. Make sure at least one eligible product is included in a product section on your home page

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 Home page template in the theme editor. Identify the existing product sections where you want discounted prices to appear, such as featured collections or product sliders.

Step 4: Add the Home Widget to the Home page template.

Locate the widget’s selector settings and leave the optional fields blank initially. This allows the widget to attempt automatic detection of product cards and their prices. 

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

Step 6: Open your Shopify storefront’s home page and check whether discounted prices appear on eligible product cards. 

Test each home page product section where you want discounted prices to display, including featured collections and product sliders. 

You have now added the Home Widget to your home page. If discounted prices appear correctly across your selected product sections, no additional selector configuration is required. 

If Discounted Prices Do Not Appear 

Some Shopify themes use different HTML structures and CSS classes for product cards. If the Home Discount Widget cannot automatically identify the product cards, you may need to configure the Product Card Selector. 

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

Step 2: Locate the Product Card Selector field in the widget settings.

Step 3: Enter the CSS selector that identifies an individual product card within the home page product section. 

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

• Product card class: .card-wrapper 
• Nested product card selector: main .product-card 
• Cards inside a specific grid: #featured-collection .card-wrapper 

Important: These selectors are examples only. The correct selector depends on your Shopify theme and its HTML structure.

The #featured-collection selector typically identifies an entire section rather than an individual product card. If the widget requires a selector for individual cards, use a selector that targets the repeating product card elements within that section. 

Step 4: Click Save in the top-right corner of the theme editor, refresh your home page, and check whether the discounted prices appear. 

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

Other Available Settings 

The Home Widget may provide additional selector settings to help it work with different Shopify themes. 

Price selector: Identifies the element that displays the product price within each product card. 

Leave the Price selector blank initially. If prices still do not appear, contact Discount Depot support for assistance identifying the correct theme-specific selector. 

Important Notes 

• Existing product cards are required. The Home Widget updates prices on existing home page product cards. It does not create new product sections or product cards. 
• Test each product section separately. Check every featured collection, product slider, or other home page product section where you want discounted prices to appear. 
• Selector values are theme-specific. A selector that works for one Shopify theme may not work for another. 
• Do not assume a section selector identifies individual cards. For example, #featured-collection generally identifies a section. Use a selector that targets individual product cards when required. 
• Configure the widget for your theme. Leave optional selectors blank initially and add theme-specific values only when needed. 

Need Help? 

If discounted prices still do not appear on your home page, check the following: 

1. Confirm that your Product Discount rule is active and enabled in Discount Depot. 
2. Verify that the products displayed in your home page sections meet the offer’s eligibility conditions. 
3. Ensure that the Home Widget has been added to the Home page template. 
4. Check whether your theme requires a custom Product Card Selector or Price selector. 
5. Save your changes and refresh the home page to test the widget again. 

If you need help 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.