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.

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

• Hide automatic discount badges

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

Need different badge styles for different discounts?

By default, your badge text, badge colors, and discounted price color are controlled globally from the app settings or theme editor.

If you’re on the Advanced plan, you can also customize these settings per discount. This is useful when you want different promotions to use different badge messages or colors, for example:

“Black Friday 20% OFF”

“Summer Sale”

“Last units 60% OFF”

“Back to school”

Per-discount badge customization lets you override the global settings for a specific discount only, while keeping the rest of your store using the default appearance.

Learn how to customize badges per discount here

Advanced Settings

For deeper control or theme-specific setups, go to:

Shopify Admin → Apps → Discounts Display Pro → Settings

These settings let you customize the discount content shown in your storefront and adjust how the app connects with your theme.

Badges Text Customization

Use this section to customize the text shown inside your discount badges.

By default, Discounts Display Pro creates badge text automatically based on the discount type. However, you can replace it with your own wording to better match your store’s tone, campaign style, or language.

The badge text can appear in different areas of your storefront, depending on where the discount is displayed. For example, it may appear on product cards, product grids, collection pages, or product forms.

Product cards are the individual product blocks usually shown on collection pages, featured products or product grids. Product forms are the areas on the product page where customers usually choose variants and add the item to the cart.

For example, you can use text like:

• Save {amount}
• {amount} OFF
• Special offer
• Member deal
• Limited-time discount

Auto-Apply Coupons

The Auto-Apply Coupons setting lets the app automatically apply eligible coupon discounts when a customer adds a qualifying product to the cart.

This is useful when you want customers to see the discounted price in the storefront and have the coupon applied without needing to manually click on the discount or type a discount code at checkout.

When this option is enabled, Discounts Display Pro can show the coupon discount before checkout and help create a smoother buying experience for customers.

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

Use this section to add a custom message, disclaimer, or extra information below the discount details.

Discount details are generated automatically by Discounts Display Pro based on the discount configuration in Shopify. Depending on the discount, this can include information such as the percentage or amount off, the coupon code, and the discount end date.

The Terms & Conditions text gives you an extra space to add your own message below those automatic details.

This is helpful when you need to explain how the discount works, mention restrictions, or add important conditions before the customer adds the product to the cart.

For example, you can use this area to mention:

• The discount is applied automatically at checkout
• The offer cannot be combined with other discounts
• The promotion is valid for selected products only
• The discount is available for a limited time

This text appears below the discount information in the storefront, depending on your display settings.

• 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.