Details Modal is a Shopify theme section in the Section Star library. Display a modal with a headline and rich text. Great for adding quick info to any page.
About the Details Modal section
The Details Modal section provides a customizable pop-up modal that can be added to your Shopify store. This modal can be used to provide additional information, announcements, promotions, or details to your customers in an engaging format.
Live demo
Use cases
-
Product Details: Enhance product pages with additional product specifications, care instructions, or size guides.
-
Promotional Banners: Use the modal to highlight current sales, limited-time offers, or discount codes to engage more customers.
-
Policy Information: Easily share return policies, shipping information, or FAQs without cluttering the main page.
-
Event Announcements: Keep your customers informed about upcoming events, store openings, or new collection releases.
-
Newsletter Sign-up: Encourage visitors to subscribe to your newsletter by providing a sign-up form within the modal.
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 |
| Change browser url on launch | Checkbox | Off |
Text
Set the text size for your widget
| Setting | Type | Default |
|---|---|---|
| Override theme fonts | Checkbox | Off |
| Text Font | Font | sans-serif |
| Text Size | Range | 15 |
| Headline Font | Font | sans-serif |
| Headline Size | Range | 25 |
Colors
Set colors for the section.
| Setting | Type | Default |
|---|---|---|
| Background Color | Color or gradient | linear-gradient(164deg, #FFF 0%, #FFF… |
| Headline Color | Color | #111111 |
| Text Color | Color | #111111 |
Dimensions
Set the section dimensions in pixels.
| Setting | Type | Default |
|---|---|---|
| Padding Top | Number | 25 |
| Padding Bottom | Number | 25 |
| Padding Left | Number | 10 |
| Padding Right | Number | 10 |
Content
Set image and text for section
| Setting | Type | Default |
|---|---|---|
| Headline | Inline rich text | Sample headline |
| Content | Inline rich text | Sample content |
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 “Details Modal”.
- 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.