Popup link
A text link or button that opens its child blocks in a popup or a side drawer. It can show an arrow or an image icon next to the text.
Where it is used
A standalone block. Add it to a section that accepts theme blocks, such as mixed-content, rich-text or image-with-text. Its child blocks are heading, text, button, image, video, icon, group, accordion, newsletter form, contact form, countdown timer, spacer, Google maps and app blocks.
Settings
Link
| Setting | Options | Description |
|---|---|---|
| Inherit link color scheme | When on, the link or button uses the same color scheme as its section. Turn it off to pick a separate scheme for the link only. | |
| Link color scheme | To edit all your theme's colors, go to your color theme settings (/editor?context=theme&category=colors). Ensure clear text contrast for better user experience. | |
| Button style | • Primary | Look of the trigger shoppers click: Primary is a filled button, Outline is an outlined button, and Link is a plain text link. |
| Text | Text of the link or button that opens the popup. | |
| Text size | • Small | Size of the link text: small, base size or large. |
| Icon type | • None | Adds an arrow or your own image beside the link text. None shows the text only. |
| Icon image | Image used as the icon. Shown only when Icon type is Image; a placeholder appears until you choose one. | |
| Icon size | Size of the arrow or image icon, in pixels. | |
| Icon gap | Space between the link text and its icon, in pixels. |
Size
| Setting | Options | Description |
|---|---|---|
| Width | • Fit | On desktop, Fit sizes the link to its content, Fill stretches it across the available space, and Custom uses the percentage set below. |
| Custom width | Width of the link on desktop, as a percentage of the available space. Shown only when Width is Custom. | |
| Width on mobile | • Fit | On mobile, Fit sizes the link to its content, Fill stretches it across the available space, and Custom uses the percentage set below. |
| Custom width on mobile | Width of the link on mobile, as a percentage of the available space. Shown only when Width on mobile is Custom. |
Popup style
| Setting | Options | Description |
|---|---|---|
| Inherit color scheme | When on, the popup or drawer uses the same color scheme as its section. Turn it off to pick a separate scheme for the popup. | |
| Color scheme | Edit color schemes in Theme settings. | |
| Popup type | • Popup | Opens the content in a centered popup or in a drawer that slides in from the right. A popup is used until you choose otherwise. |
| Popup width on desktop | Maximum width of the popup, or width of the drawer, on desktop, in pixels. | |
| Corner radius | • Inherit | If set to "Inherit", this block will follow the global rounded corners setting in Theme settings ▸ Layout ▸ Rounded image. |
| Custom corner radius | Corner radius of the popup, in pixels. Shown only when Corner radius is Custom. |
Spacing
| Setting | Options | Description |
|---|---|---|
| Top padding | Space above the link, in pixels. | |
| Bottom padding | Space below the link, in pixels. |
Icon image appears only when Icon type is Image. Link color scheme appears only when Inherit link color scheme is off. The custom width fields appear only when the matching Width setting is Custom. If Popup type is not set, the link opens as a popup.
Notes
The Text setting takes inline formatting only, so it cannot hold paragraphs or lists.
No comments yet