# Details Modal

> Display a modal with a headline and rich text. Great for adding quick info to any page.

URL: https://sectionstar.app/sections/details-modal/
Source: Section Star — https://sectionstar.app
Updated: 2026-10-26T00:00:21.889Z

---

**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

1. **Product Details:** Enhance product pages with additional product specifications, care instructions, or size guides.
   
2. **Promotional Banners:** Use the modal to highlight current sales, limited-time offers, or discount codes to engage more customers.
   
3. **Policy Information:** Easily share return policies, shipping information, or FAQs without cluttering the main page.
   
4. **Event Announcements:** Keep your customers informed about upcoming events, store openings, or new collection releases.
   
5. **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 |