search

Shopify / ui-extensions

MIT License
248 stars 35 forks source link

Checkout UI: Modal open immediately #2061

Open entozoon opened 3 weeks ago

entozoon commented 3 weeks ago

Please list the related package(s)

Modal from @shopify/ui-extensions-react/checkout

As it says in the docs, the modal component

must be specified inside the overlay prop of an activator component (Button, Link or Pressable)

So it is invisible by default, until you click the parent or similar. We need this to either not be the case, or at least offer a way to trigger ui.overlay.open for it. A typical situation for this might be to warn people about shipping delays during holidays.

remilepine commented 3 weeks ago

Hello !

I'm in the same situation! I'd like to automatically open the modal to display a custom message without the customer having to click on the trigger. This option would be very useful on this component.

edhgoose commented 3 weeks ago

We would also really like this functionality.

patryk-smc commented 3 weeks ago

I think a modal that appears without user interaction would be considered a popup and I doubt that something that Shopify design team likes 😅

entozoon commented 3 weeks ago

@patryk-smc I hear you yeah and it's subjectively up to them, but from a practical perspective it really would be useful for my clients (and others on here and the Shopify forums, it seems).

And to go along with the philosophy of only opening modals upon interaction, I'd suggest they allow overlay.open to run, say only within useBuyerJourneyIntercept or similar - like, say if the user needs notifying of a significant issue after detecting a certain shipping country, or to intercept and propose using an alternative store.

edhgoose commented 3 weeks ago

For us, ultimately our clients find they achieve significantly better conversion through a post purchase popup than something embedded into the page.

Our A/B testing shows a 50% reduction in revenue from UI that's not a popup.

We would therefore love a Popup (and an iframe...) because we're confident that we'll be able to drive hundreds of thousands of $ of extra revenue for our clients.

As an individual, I'm not a fan of a popup, but our maths shows they work extremely effectively.

ksyp-7 commented 2 weeks ago

+1

liam997 commented 2 weeks ago

+1

jarthorn commented 2 weeks ago

For those asking for this feature, please clarify if you are interested in this during the checkout (before "Pay now"), or afterwards on the Thank You and Order Status page. We are firmly against popups prior to payment, but are open to the possibility of this after payment.

edhgoose commented 2 weeks ago

Hi @jarthorn - for us, it would be after purchase.

For pre-purchase, we do require a popup, but only on user action (e.g. clicking a button) and your current system supports this for us perfectly fine.

Our use case for after purchase is to gather feedback or encourage a user onto a new action once they have completed their purchase.

remilepine commented 2 weeks ago

Hello @jarthorn ! For our part, we need to open the popup before payment. I think the solution proposed by @entozoon https://github.com/Shopify/ui-extensions/issues/2061#issuecomment-2161167083 would be very relevant.

I fully understand that the popup can't be displayed automatically without interaction, but if it can be triggered by a useBuyerJourneyIntercept it could be very useful for us.

liam997 commented 2 weeks ago

Hello @jarthorn,

Our case will be before payment.

We actually want this as an modal for update on checkout shipping address (No pickup at store available).

Shopify don't provide any ways to alter native shipping form. We need to turn original text field into select option and adding extra field based on which region/city customer choose so they can select in district and subdistrict list. It used to be able to hide/lock shipping address field on roadmap but it got removed.

So we mitigate the option to create a popup that will guide our customer. Would be awesome if it can be a popup to notify customer about this change.

entozoon commented 2 weeks ago

Absolutely before payment. Our scenario is that we have alternative stores that may be more appropriate internationally and, only upon entering delivery address, do we know that that may be the case.

nathangillespie8 commented 1 week ago

+1 Before payment.

We want to be able to show our login modal if a customer has let their login session expire while on the checkout. Only logged in customers can access certain features of our checkout.

rodrigo-jantsch commented 1 day ago

Same here. We have a feature that would require a popup to be triggered inside another popup. We would like to close the current one and open another. However, it seems that this is not doable. Do we have any updates from their product team?