Popup Builder is a Shopify theme section in the Section Star library. Build sales-boosting popups to capture emails, promote offers, and reduce cart abandonment. Launch on click, page load, or exit intent.
Live demo
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Target
Add the below string to any URL to launch the modal. Please keep the #.
| Setting | Type | Default |
|---|---|---|
| Target | Text | #details-modal |
| Show on Action | Select (Click, Page Load, Screen Exit) | click |
Popup Design
Set the design for the popup
| Setting | Type | Default |
|---|---|---|
| Max Width | Number | 600 |
| Max Height | Range | 50 |
| Border Size | Range | 1 |
| Border Color | Color | #DDDDDD |
| Show Section | Select (All Devices, Mobile Only, Desktop Only) | all |
| Background Color | Color | #fff |
| Padding Top/Bottom | Number | 25 |
| Mobile Padding Top/Bottom | Number | 25 |
| Padding Left/Right | Number | 25 |
| Mobile Padding Left/Right | Number | 25 |
Grid Design
Set the design for the grid
| Setting | Type | Default |
|---|---|---|
| Gap Between Columns | Number | 20 |
| Gap Between Blocks | Number | 10 |
| Vertical Alignment | Select (Center, Top, Bottom) | start |
Headline
Set headline for the popup
| Setting | Type | Default |
|---|---|---|
| Headline | Inline rich text | <b>Popup Headline</b> |
| Headline Color | Color | #111 |
| Text Size | Range | 25 |
Buttons
Set the look and feel of the button
| Setting | Type | Default |
|---|---|---|
| Show Buttons? | Checkbox | On |
Primary Button
Set content for the primary button
| Setting | Type | Default |
|---|---|---|
| Alignment | Text alignment | right |
| Call to Action | Inline rich text | Shop Now |
| Call to Action Link | URL | — |
Secondary Button
Set content for the secondary button
| Setting | Type | Default |
|---|---|---|
| Show Secondary Action? | Checkbox | Off |
| Call to Action | Inline rich text | Secondary Action |
| Call to Action Link | URL | — |
Button Style
Set the look and feel of the button
| Setting | Type | Default |
|---|---|---|
| Primary Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Secondary Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Primary Button Text Color | Color | #fff |
| Secondary Button Text Color | Color | #fff |
| Text Size | Range | 14 |
| Padding Top/Bottom | Number | 5 |
| Padding Left/Right | Number | 15 |
| Border Radius | Number | 5 |
| Border Size | Number | 0 |
| Border Color | Color | #111 |
| Subtle Shadow on Button | Checkbox | On |
| Subtle Lift Animation on Link | Checkbox | Off |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Popup Builder”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.