Updated 18 December 2024
Modal
Updated 18 Dec 2024View FigmaUpdated 18 Dec 2024
Modals are overlays that require merchants to take an action before they can continue interacting with the rest of Shopify. They can be disruptive and should be used thoughtfully and sparingly.
Properties
Content
Use the slot property to inject content into a Modal without detaching. Simply turn the card content into a local component and swap it out with the slot.
Size
Changes the width of the modal. Fullscreen should only be used when designing for mobile.
Title
Show or hide the title bar.
Secondary action
Show or hide a second button in the footer.
Tips
Change padding
To change the padding within the content area, double click into the component and manually adjust the default padding.
Modal(3 variants)