Need to hide the default Discount Code field from the Checkout

[asadnmalik]

Hi I'm trying to build a custom app using the new Checkout Extensions.

One of the requirement is to remove the Discount Code field completely but still be able to use discounts codes through APIs.

I've created a new field where users can add a discount code and they can add products to the cart on the Checkout level using Checkout UI Extensions. Everything is fine and working, the last piece of the puzzle is just hiding the default Discount Code field so that customers wont get confused where to put the Discount Code. Is there a way to visually hide it or remove it using the Checkout Extensibility tools?

It used to be simple with checkout.liquid because you just need to write a small CSS to hide Discount Field but we longer will be able to edit the checkout.liquid file in Checkout Extensibility.

[dnagoda]

Hi @asadnmalik. Unfortunately, you can't currently hide the Discount Code field using checkout extensibility. Checkout extensibility can be used to add functionality to the checkout, but not to hide or remove native UI. I'll add this enhancement request to our backlog for review.

[bryanyi]

Hi @dnagoda, so there's absolutely no way to hide any native UI elements on the Checkout page using ANY Shopify Function extension? No workarounds we can use?

[dnagoda]

Not through Checkout UI Extensions. There are some Shopify Functions that can hide/display different payment or delivery options: https://shopify.dev/docs/apps/checkout/payment-customizations https://shopify.dev/docs/apps/checkout/payment-customizations

[bryanyi]

Hey @dnagoda thanks for the quick reply. I took a look at the payment-customizations and it wasn't what I was looking for.

I have attributes on my cart line items that I wish to hide way - these are coming from the Attributes property tied to the cart item object.

So there's no way to hide these if my store is on Checkout Extensibility mode? Screenshot below:

[dnagoda]

If you prepend the attribute name with an underscore _, they should be hidden by default.

[bryanyi]

@dnagoda That's pretty cool, but any way to hide it without manipulating the value itself? The third party scripts I have depend on seeing the original value without alterations.

[dnagoda]

Unfortunately, there aren't any other ways to hide the attributes.

[HasanArmstrong]

Is there any update on this? Any way to edit/remove checkout fields that exist by default on the checkout e.g. discount code field, post code field, address fields etc.

This is much needed for merchants who built their own custom fields to replace default ones via checkout.liquid.

[dnagoda]

@HasanArmstrong No updates for hiding the discount code input, but we are working on some updates that will provide more customization of the address inputs. Look at the 2023 Q4 entries on the product roadmap: https://shopify.dev/docs/apps/checkout#product-roadmap

[plagree]

Hi @dnagoda. When you say there is no way to hide the discount code input, do you mean programmatically from a checkout extension or even the merchant her/himself cannot hide this box in the checkout editor? Asking because my app needs this functionality and is currently significantly limited with this lack of customization

[dnagoda]

@plagree Right on both counts. There is not currently a way to hide that input field. It's hidden automatically when there aren't any discount codes defined on the shop, but is displayed otherwise.

[plagree]

@dnagoda Thanks for the quick reply. Do you know if there are discussions to make this possible in the future? If yes, are we talking weeks? months?

[dnagoda]

@plagree The best place to look for upcoming changes is our public roadmap: https://shopify.dev/docs/apps/checkout#product-roadmap

I'm not aware of any work being done on this. It's been added to our feature request backlog, but not prioritized or scheduled.

[plagree]

@dnagoda Again, thanks for your quick answers. My biased opinion is that it should be prioritized, I still see many shops with the legacy checkout that have heavily customized their checkout and in particular the discount box: hiding it, moving it in the page or making it less visible. I expect this to be an issue when they finally plan their migration to the new checkout.

[tpage99]

Just adding a bit to the discussion here, the ability to hide the discount input at checkout would be a great feature. Particularly around BFCM - we're running an automatic discount and don't want folks trying to add additional discounts, considering the automatic discount then gets overridden and they will have to remove again in order to get the "best" discount.

I would assume this would need to be accessible via Functions if not through a setting. But having this accessible by some means would be very helpful and very practical for merchants who want to leverage discount codes in a specific manner.

[max-warehouse-repo]

We have an automatic discount for specific products(using the script editor). When there is at least one of those products on the Checkout we hide the discount code field, since those products already have a discount showing a message to explain to the customer. There are many cases for merchants when they don't want to give a discount.

[sjanczy2]

Hi folks, chiming in from the Shopify side, I can share two things

1. We are planning to make this possible early 2024, planning is in progress
2. Based on comments from this thread, it seems like at least some of the use cases require dynamic hiding of the field (i.e based on some condition, say, items in the buyer's cart, conditionally hide the discount/gift card code field), and a static setting/toggle would be insufficient?

Feel free to chime in with any other details or if I am missing/misunderstanding anything

[gil--]

@sjanczy2 I can connect you or anyone on the team with large Plus merchants asking for this if that helps.

From what I've been asked:

• Ability to conditionally hide when certain automatic discounting rules are applied due to double discounting
• Ability to simply hide the discount box when coming from a specific UTM/referral source
• Ability to hide/remove and reimplement with a custom form to block coupon extension apps
• Ability to detect rejection/failure and send to analytics (Would be nice if Shopify handled this out of box by surfacing errors via discounts via customer events api)

[burlmd]

@sjanczy2 Glad to hear this will be possible soon.

In my use case, a static setting would be insufficient. I'd like to be able to hide the discount code field when certain attributes exist on the cart, as we give an automatic discount elsewhere in this scenario.

[jimraymonds]

@sjanczy2 @dnagoda Is this Discount Field customization planned? It would be great to have a general toggle to show or hide the field, then layer in additional complexity and conditional after, but I'm not seeing either on the roadmap https://shopify.dev/docs/apps/checkout#product-roadmap

[overthings]

Hi @dnagoda, we really need to be able to add custom CSS to the checkout. Is this being considered?

[sasinghtdg]

Hi @dnagoda, in our case, we have hidden the Remember Me section on payment page because our checkout don't allow checkout with phone number. Can you please let me know if this is possible with checkout UI extension to hide that section.

[charlesLoder]

Given the recent change that customers can now add discounts to Draft Orders, is there any update on this? Ideally, we want to hide the discount input on all draft orders, or at least Draft Orders that already have a discount.

[joeainsworth]

We need to be able to monitor for changes to discount code input for INVALID codes. We cannot use checkout UI because it only shows valid codes in the API.

[eballeste]

+1 on the need to hide the discount code when products w/automatic discounts and that are tagged a certain way are in the cart, we want to avoid stacking discounts in certain scenarios. this is the only reason why we use the custom checkout.liquid file.

we also can't go in and retroactively edit thousands upon thousands of existing discount codes to disable them in order to prevent stacking these discounts created via backend scripts

@sjanczy2 any updates on this? im looking at the roadmap and don't see it mentioned anywhere

[Pvtaisne]

@sjanczy2 Hey! We also would need the mechanism of hiding the discount field. We are working with many merchants who are also requesting this feature. Any updates?

[ddegroot1985]

Customers expect discounts to be applied on the cart not during checkout. This is bad for conversions. At the very least there should be a way to disable the coupon field on the checkout page. Please prioritize this.

[ag-lchadwick]

I also need something similar to this. I don't need to be able to hide a field (though that could be a solution by making a custom form), but I do need to be able to validate the input, either oninput or onsubmit before it's actually applied, then only apply the code once it's processed.

Without this I'll need to create a second field just for gift cards, and keep the original one for discount codes only. That will be a pretty awkward UX.

[SaurabhBhatiaodesk]

Is there any update on hiding the discount field on the checkout page in checkout UI extension ?

[eballeste]

so Shopify's AI tool somehow recognized that our custom checkout.liquid is used to hide the discount box and even explains why we are hiding it. This is mind-blowing to me, Shopify must be aware of how many stores are hiding the discount box. The lack of transparency is the only thing that I hate about Shopify.

[aselivra]

I'd also like to request to add this feature. We don't want our customers scrounging the internet for discount codes, thus delaying their checkout and conversion because of the prominently displayed "DISCOUNT CODE" input field.

There should be a graph QL mutation to hide this or change it to a clickable link that opens the field when clicked.

[Job-madi]

++

[daniyal741]

@sjanczy2 Do we have any updates for this feature request? Its already July, 2024

[renan-gama-insider]

I also need this feature! @sjanczy2 @dnagoda

[NeuroticCoder91]

+1

I have a large Plus merchant that does not discount, and frequently requests the ability to hide this box.

• They receive a ton of customer questions with fake codes from websites
• They feel it diminishes their brand identity

DM me and I can put you in direct contact with this merchant

[michaelelmgreen]

We don't want our customers scrounging the internet for discount codes, thus delaying their checkout and conversion because of the prominently displayed "DISCOUNT CODE" input field.

Hey @aselivra @NeuroticCoder91 - thanks for this. Since the discount box will be removed from visibility when discount codes are not used and none are present in the shop, is there anything preventing the merchant from deleting all discount codes from the shop to achieve this outcome?

[matchstickdevs]

@sjanczy2, Any updates on this? Looking ahead to BFCM and one of my merchants is really going to need the ability to temporarily hide this input.

[aselivra]

Hey @aselivra @NeuroticCoder91 - thanks for this. Since the discount box will be removed from visibility when discount codes are not used and none are present in the shop, is there anything preventing the merchant from deleting all discount codes from the shop to achieve this outcome?

We issue some coupon codes RARELY for one-time use for VIP customers or comp'd orders for influencers, so we need to have the ability for them to use them. But 99% of our customers won't need it, and we certainly don't want to encourage customers to start looking for stray codes which will take them away from checkout and likely hurt our conversion rates.

It's common place now in ecommerce to make the "discount code" a text line that when clicked reveals an input field for the rare customers who actually have one. This should absolutely be updated in CheckEx, and could be a simple toggle or GraphQL mutation for "Discount Code" with the properties of

mutation CheckoutBrandingUpsert{
"showDiscountInputField": {"show", "hide", "text"}, 
"discountInputFieldSyles": {
    "inputBox": {
        "size": {"small", "medium", "large"},
        "borderColor": "#222222",
        "placeholderText": "Enter Your Discount Code"
     },
     "textLink": {
         "size": {"small", "medium", "large"},
         "linkText": "Click Here to Use a Discount Code"
     }  
}

This really should be added before Black Friday. Urgently waiting for an update from Shopify on this.