Display discounted prices on related and recommended product cards on your Shopify product pages with the Related Widget from Discount Depot. The widget updates eligible prices within your theme’s existing product recommendations, helping customers discover additional products and the savings available when they browse your store.
The widget checks whether recommended products qualify for an active discount and displays the eligible discounted prices directly on their product cards.
Note: Your Shopify theme must already display a related products or product recommendations section. The Related Widget updates prices in existing recommendation cards; it does not create the recommendations or decide which products appear.
Related Widget Preview
Take a sneak peek at a sample Related 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. Ensure that at least one product displayed in your related or recommended products section is eligible for the discount.
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 a product template that displays a related products or product recommendations section. Confirm that your theme already displays these recommendations on the product page.
Step 4: Add the Related Widget to the product template.
Locate the widget’s selector settings and leave the optional fields blank initially. This allows the widget to attempt automatic detection of the related product cards and their prices.
Step 5: Click the Save button in the top-right corner of the theme editor to save your changes.
Step 6: Open a product page on your storefront that displays related or recommended products. Scroll to the recommendations section and check whether discounted prices appear on eligible product cards.
Wait for the recommendations to load before checking the prices, as some themes load related products dynamically.
You have now added the Related Widget to your product template. If eligible discounted prices appear correctly in the recommendations section, no additional selector configuration is required.
If Discounted Prices Do Not Appear
Some Shopify themes use different HTML structures and CSS classes for their related product cards. If the Related Widget cannot automatically identify these cards, you may need to configure the Product Card Selector.
Step 1: Return to the Shopify theme editor and open the settings for the Related 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 related or recommended products section.
You can use one of the following examples if it matches your theme:
- Cards inside recommendations: product-recommendations .product-card
- Cards inside a related products section: #related-products .product-card
- Nested selector: [data-related-products] .product-card
Important: These selectors are examples only. The correct selector depends on your Shopify theme and its HTML structure.
The #related-products selector typically identifies the entire related products section rather than an individual product card. Use a selector that targets the repeating product cards within that section.
Step 4: Click Save in the top-right corner of the theme editor, refresh the product page, and check the recommendations again after they load.
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 Related 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 related or recommended product card.
Leave the Price selector blank initially. If discounted prices still do not appear, contact Discount Depot support for assistance identifying the correct theme-specific value.
Important Notes
- Existing recommendations are required. The widget updates prices on related or recommended product cards already displayed by your Shopify theme.
- The widget does not select recommended products. Your theme or recommendation system determines which products appear in the section.
- Check the recommended product’s eligibility. The main product does not need to qualify for a discount. An eligible recommended product can display its discounted price independently.
- Selector values are theme-specific. Use selectors that match the actual structure of your related product cards.
- Allow recommendations to load. If your theme loads recommendations dynamically, wait for the section to finish loading before verifying discounted prices.
Need Help?
If discounted prices still do not appear in your related products section, check the following:
- Confirm that your Product Discount rule is active and enabled in Discount Depot.
- Verify that the recommended products meet the offer’s eligibility conditions.
- Ensure that your Shopify theme already displays a related products or product recommendations section.
- Check whether your theme requires a custom Product Card Selector or Price selector.
- Save your changes, refresh the product page, and check the recommendations again after they load.
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.