Customization Guide

Discounts Display Pro gives you full control over how discounts appear in your storefront. In this guide, you’ll learn how to customize discount elements on product cards and product forms.

Quick Overview

What You Can Customize

• Price Display: Font size, colors
• Discount Badges: Text, colors, sizing
• Coupon Application status: Colors and icons
• Terms and Conditions: Custom text, styling, formatting
• Advanced Settings: CSS selectors for custom themes

Accessing Editor Settings

1. Go to Shopify Admin > Online Store > Themes
2. Click Customize on your active theme
3. In the left sidebar, click the App embeds icon
4. Locate Discount Display Pro in the apps list
5. Click the block to open all customization options (the toggle must be enabled)

Theme Editor Customization Options

1. Preview Mode

The Preview Mode setting lets you simulate different discount types directly inside the Shopify Theme Editor.

It doesn’t affect your live store — it’s purely for design and customization purposes.

This feature was designed to help you style each discount type’s elements (like badges, coupon boxes, and applied icons) separately before going live.

You can choose between:

• Real discounts → Loads actual discounts available for products in your store.
• Automatic → Simulates an automatic discount to let you preview its design.
• Coupon → Simulates a coupon-based discount for styling purposes.

💡 Use these modes to test how your discount badges and icons will look under each condition. Once you’ve customized the colors, fonts, and icons to your liking.

2. Product Cards

These settings control how discounts look on collection pages and product grids.

You can adjust:

• Price font size and color
• Badges font size, alignment, background and text color

Use these to match your brand colors and maintain consistency with your store’s typography.

3. Product Form

These options control how discounts appear on individual product forms like product pages, featured product sections or quick add to cart.

You can configure:

• Badges — Background colors, text colors and font size
• Coupon box border — Color and thickness
• Applied icon and text — Choose icons and color
• Terms and Conditions — Font size and visibility

Note: You can use “Preview: show applied state”  to see the applied icon and color styling in action

Advanced Settings

For deeper control or theme-specific setups go to:

Shopify Admin → Apps → Discounts Display Pro → Settings

There, you’ll find:

• Badges Text Customization -

• Auto-Apply Coupons – Automatically applies available discounts when a product qualifies

• Terms & Conditions Text – Add a custom terms and conditions or disclaimer under the discount details.

• Product Page CSS Selectors – Useful for heavily customized themes where page elements need manual targeting.

👉 For a complete overview of how to set up custom selectors, head over to Advanced Theme Support: Using Custom Selectors.