Add to your Store
Home Why us? Documentation Privacy Policy Refund Policy Get in Touch

Shopify Details Modal Section

Learn how to create a Details Modal section with Sections Pro in Shopify

Description of the 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.

Demo of the Section

Installation Instructions

  1. Download the Sections Pro app on the Shopify App Store
  2. Open the app and navigate to Free Sections
  3. Search for "Details Modal"
  4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

  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.

Overview of the Configuration Settings

  1. Target Settings:

    • Target: Specify the target element that will trigger the modal. Default is #details-modal.

  2. Text Settings:

    • Text Font: Choose the font for the text within the modal.
    • Text Size: Set the size of the text (10-50px). Default is 15px.

  3. Headline Settings:

    • Headline Font: Choose the font for the headline within the modal.
    • Headline Size: Set the size of the headline (10-50px). Default is 25px.

  4. Color Settings:

    • Background Color: Set the background color for the modal. Default is a linear gradient from white to white.
    • Headline Color: Choose the color of the headline text. Default is #111111.
    • Text Color: Choose the color of the regular text. Default is #111111.

  5. Dimensions Settings:

    • Padding Top, Bottom, Left, Right: Configure the padding around the content within the modal. Defaults are 25px (top/bottom) and 10px (left/right).

  6. Content Settings:

    • Headline: Set the headline text for the modal.
    • Content: Set the main text content for the modal.

Utilize these settings to create a modal that perfectly fits your store's design and functional needs.