The Discount Widget allows you to display promotional discount codes directly on your mobile app's Product Detail Pages (PDPs). Once your customers click on it, it’ll be applied automatically on the cart page.
You can use it to highlight discounts on specific products, collections, or across your entire product catalog, making it easier for customers to discover and apply your offers with a single tap.
With the Discount Widget, you can:
Highlight promotional offers by displaying discount codes directly on your product pages.
Make it easier for customers to apply discounts to their carts without manually entering codes at checkout.
Display different offers on specific products using display conditions and Shopify product metafields.
Customize the widget's design with your own style and wording.
Control where the widget appears and whether it is displayed on sold-out products.
Let's go through how the Discount Widget will appear on your app and how to enable and customize it in just 4 steps on your dashboard!
How the Discount Widget will look
Once you create and save your Discount Widget, it will appear on the Product Detail Pages in your mobile app, displaying your promotional message and discount code.
When customers tap the discount code, it will be automatically applied to their cart. This allows your customers to take advantage of your promotions without having to copy the code or enter it manually at checkout.
How to add a Discount Widget
Follow the steps below to enable the feature and configure your Discount Widget.
1- Go to the Customization section
In your dashboard, from the Design page (1), open the Customization section (2), then under the Product Page tab, scroll down until you see Enable Discount Widget (3). After you enable it, you can click on Configure (4).
2- Create a new discount widget
On the appearing window, click on Add New to create a new discount widget. Please note that you can later edit, copy, or delete created discount widgets from this area.
💡 Tip
You can create multiple Discount Widgets for different promotions, each with its own display conditions, offer, position, and appearance. You can also configure multiple widgets to appear together on the same product page if their display conditions are met. |
3- Configure your widget's settings
Here, you can edit various settings to control where your Discount Widget appears, what discount it displays, and how it looks on your product pages. You'll find the Display Conditions (1) and Configure (2) sections, along with a Preview (3) panel where you can review your changes before clicking on Save (4).
Display Conditions: Control who sees the discount widget using conditions based on product (product tag, product type, vendor, or metafield) or customer conditions (customer tag, customer metafield, and authentication status). You can choose No conditions, All conditions, or Any condition. Simply click on Add another condition to add conditions like “Product Tag” for example.
Configure: Here you can customize your discount widget's offer, appearance, visibility, and position to make it suitable for your promotional needs. You can also use Shopify product metafields to display product-specific discount codes.
Offer Text: Add a short message describing your promotion, such as Get 20% off.
Discount Code: Enter the discount code you want customers to apply, such as SUMMER20. Both Offer Text and Discount Code are required fields. Make sure your discount code has already been created and configured in Shopify.
Metafield: You can enter the code manually or use a Shopify product metafield to display a product-specific discount code.
Hide on Sold Out: Enable it to hide the widget on sold-out products. If disabled, the widget can remain visible as long as its display conditions are met.
Widget Position: Use the Up and Down controls to choose where your Discount Widget appears on the Product Detail Page above or below these sections:
Product name
Variant selector
Quantity selector
Description
Recommended Products
Recently viewed products
Colors: Customize the widget's appearance by changing the background color, text color, and accent color used for the discount icon and highlighted elements.
As you make changes to these settings, use the Preview to check how the Discount Widget will look on your product page. You can also click on the discount code in the preview app to simulate the discount application process before you click on Save.
📌 Important Note
Discount codes must be created and managed in your Shopify Admin. From there, you can choose whether a discount can be applied based on its expiration date, minimum purchase requirements, eligible products or collections, and other configured rules.
4- Preview and save your changes
After completing the configuration, click on Save & Update to make sure that the edits and changes you made are reflected in the app.
💡 Tip
If your app is not live yet and you want to preview the feature as if your app is live, please follow the guide here. |
That's it! Now you know how to add and customize a Discount Widget on your product detail pages. You can use it to highlight promotional offers, make discount codes easier to apply, and create a smoother shopping experience for your mobile app customers.
Need Help?
If you encounter any issues while configuring the Countdown Timer, our support team is here to assist you:
Contact our support team via live chat in your Shopney Dashboard.
Visit our Help Center for more guides on customizing your mobile app.