Popup button block
The Popup button block in Seventh opens the content of a Shopify page in a modal, for size guides, shipping details and care instructions.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 2.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The Popup button block shows a button that opens the content of a Shopify page in a modal, without leaving the current page. Use it for a size guide, shipping details or care instructions.
Where to find it: select Add block inside a section or card in the theme editor, then choose Popup button. The 2.0.0 release notes call it "Modal button block".
Setting up a size guide
Create the page
Open Shopify admin → Online Store → Pages and create a page with the size guide, for example with a table.
Add the Popup button
In the theme editor, select Add block where the button should appear and choose Popup button.
Select the page
Type the Label, for example "Size guide", and select the page in Page. Selecting the button now opens the page content in a modal, with the page title as the modal heading.
What is the difference between the Popup button and the Modals section?
- The Popup button opens one Shopify page when a customer selects the button. Use it for information that customers ask for.
- The Modals section shows designed modal cards on its own: after a delay, on scroll or on exit intent. Use it for messages you want to push.
Why does the Popup button do nothing?
Because Page is empty, so there is no content to open. Select a page in Page.
All Popup button settings
Every setting in this group, with its type and default.
Label (text field, default: "Button label"): Sets the text on the button.
Page (page picker): Selects the Shopify page whose content opens in the modal. The page title becomes the modal heading.
Popup button block: Button style
Where to find it: Popup button → Button style
Style (dropdown, default: Solid): Sets the button look. Solid fills the button with color; Outline shows only a border. Options: Outline, Solid.
Size (dropdown, default: Small). Options: XSmall, Small, Medium, Large, XLarge.
Fit container (checkbox, default: off): Makes the button take the full width of the card, column or Content group that holds it.
Use custom colors (checkbox, default: off): Uses the Primary and Secondary colors below instead of the button colors of the color scheme.
Primary (color, default: #000000): Sets the background of a Solid button, or the border and label of an Outline button. Shown only when Use custom colors is on.
Secondary (color, default: #ffffff): Sets the label color of a Solid button. Shown only when Use custom colors is on.
Popup button block: Icon
Where to find it: Popup button → Icon
Select an icon (dropdown): To see all icons, visit the Krown icon library. Options: None, Business: Earth globe, Business: Flag, Business: Helpline, Business: Like hand, Business: Map marker, Business: Security shield, Business: Star, Commerce: Appointment, Commerce: Archive box, Commerce: Box, Commerce: Checkout cart, Commerce: Currency, Commerce: Delivery, Commerce: Delivery time, Commerce: Giftbox, Commerce: Label, Commerce: Open 24 hours, Commerce: Open box, Commerce: Paper bag, Commerce: Shipping truck, Commerce: Store, Commerce: Time, Commerce: Time limit, Commerce: Wallet.
Custom icon (image): Shows your own image as the button icon, in place of the selected icon. Use a 72 x 72 px transparent PNG.
Related pages
- Button block: a button that opens a link.
- Modals section: modal cards that open on their own.
- Product variants and buy buttons blocks: the product page size guide option.