make a popup message appear when a customer uses a specific discount code

Shopify Discussion

Topic summary

A merchant wants to display a custom popup message when customers apply specific discount codes, linking each code to a charitable donation pledge (e.g., “thanks for supporting X organization”).

Proposed Solutions:

  • For non-Plus stores: A JavaScript code snippet was provided that can be added to theme.liquid before the </head> tag. The script monitors discount code application and displays customizable messages based on a configurable array mapping codes to organizations and messages. This solution works across any theme.

  • For Shopify Plus stores: Since discount codes are typically entered at checkout (where only Plus merchants can customize), the recommendation is to use Checkout UI Extensions API with the useDiscountCodes() hook to detect applied discounts and the Modal component to display popups. The Checkout Blocks app may simplify this implementation.

Status: The thread remains open with no confirmed resolution from the original poster, though contributors have requested feedback on whether the solutions worked.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Is it possible to make a customized pop up message or label appear when a customer uses a specific discount code.

I am trying to tie a discount code to a donation pledge (each time someone uses a certain discount code, we commit to making a donation to a specific org.)

I would like a message to appear that states “thanks for supporting X organization” when a certain discount code is applied.

Thank you !

2

Hi

Yes It’s possible and you can do it by adding some code and editing the theme in website.

Let me know if you want more details .

3

I am interested in learning more

4

Hi @alaskasalmon , I’m assuming you’re not on Shopify plus and need to show this when the discount code is applied on cart.

Here’s a script that you can include on your theme.liquid before the tag,

You can customise this array near the end to ensure that the script check for the exact discount code you’ve configured and show a message based on the same.

discountConfigs: [
      {
        code: 'TEST10',
        organizationName: 'X organization',
        message: 'Thank you for using the TEST10 code! 10% of your purchase supports X organization.'
      },
      {
        code: 'CHARITY20',
        organizationName: 'Charity Foundation',
        message: 'Thank you for your generosity! 20% of your purchase will be donated to Charity Foundation.'
      },
      {
        code: 'EARTH5',
        organizationName: 'Earth Alliance',
        message: 'Thank you for supporting environmental causes! Your EARTH5 discount helps plant 5 trees.'
      }
    ]

Note that this is not a theme specific implementation, meaning that it should work with any theme and any Shopify store.

If you found this helpful - please mark my answer as a solution so others can also find value from this.

Thank you,

5

Hi Alaska Salmon,

If you tried the code given by abel and solution rectified then that’s great if not , let me know .

6

Hello Alaskasalmon,

Typically, customers enter discount codes in the checkout - an area where only Shopify Plus customers can change the UI/UX.

If you are on Shopify Plus, then you can consider developing a custom app using the Checkout UI Extensions API:

You might be able to build this with Checkout Blocks, an app owned by Shopify.

Best,

Tobe

7

@alaskasalmon

Since quite some time has passed since you raised this thread, I’m assuming you’ve already reached at a solution :slightly_smiling_face:

If so - can you please share the same and close this thread out so that others who stumble here might also find value.

Best,