d
Topic
tradename Member
Posts:
2
10 days ago

Adding a custom Polaris Modal inside Admin

My friend has built out a storefront using the Shopify Admin interface. He'd like to add a button to their storefront that launches a modal component. As the developer, I'd like to write the modal component using Shopify Polaris.

What's the best way to add this button to the page? Is this an "Embedded App"? It's unclear from the documentation whether this is possible with a Shopify Storefront, or whether I'd need to rewrite the UI from scratch and host the site on a different platform.

 

i
Replies
Alex Richter Developer Experience
Posts:
892
10 days ago

You would need to use Polaris directly, not through the embedded app SDK. EASDK methods can only be called from within the admin, and the admin cannot be iframed, but all these methods do as far as you're concerned is propagate Polaris components with handlers of its own.

You will in essence have to write your own handlers for the Polaris components interactions if you want to show stuff like buttons and modals on the storefront.

Cheers.

tradename Member
Posts:
2
10 days ago

So would this entail rewriting the entire site UI? I'm not clear on how to get the Polaris component into the UI from Admin.

Alex Richter Developer Experience
Posts:
892
10 days ago

I'm not certain what you mean when you say "get the Polaris component into the UI from the Admin". The UI is on the storefront, correct? A Polaris modal would not need to come from the admin, unless you mean there's something specific in the admin you want framed in the modal on the storefront? If that's the case, you cannot frame the admin anywhere.

What does this interface of yours on the storefront look like? Where is it located?

The most straightforward way would be to include the stylesheet:

<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/2.12.1/polaris.min.css" />

And then place the HTML components on the storefront either in the theme files directly or using a script tag, and by the same means, including your javascript helpers for the itneractability with these components.

Let me know if I'm missing something!