Appearance

Custom Modal Block ​

What This Block Does ​

Custom Modal blocks create popup windows that appear over your page content when customers click a trigger button. You can fill the modal with any combination of blocks to create forms, product details, announcements, or other interactive content.

Perfect for: Size guides, detailed product information, contact forms, newsletter signups, terms and conditions, special offers

How to Add It ​

Step 1: Add the Custom Modal Block

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Customize next to your live theme
  3. Navigate to any section that supports blocks
  4. Click Add block and choose Custom Modal Block from the list

Step 2: Configure the Trigger Button

  1. Set the button text that customers will click
  2. Choose the button style (Primary, Secondary, or Link)
  3. Optionally add an icon to make the button more visual
  4. Set the modal width based on your content needs

Step 3: Add Content to the Modal

  1. Click Add block within the Custom Modal Block
  2. Add any blocks you need (headings, text, buttons, forms, etc.)
  3. Arrange the blocks to create your desired layout

Key Settings to Configure ​

Trigger Button ​

Button Label: The clickable text that opens the modal

  • Be descriptive: "Size Guide", "View Details", "Contact Us" work better than "Click Here"
  • Keep it concise: 1-3 words work best for buttons

Button Style: Choose the visual prominence

  • Primary/Secondary: Use for important actions that need attention
  • Link: Subtle option that blends with text content
  • Link Plain: Clean text-only style without underlines

Modal Content ​

Modal Width: Control how wide the popup appears

  • Small: Good for simple messages or forms
  • Regular: Works for most content types
  • Large: Use for detailed content like size charts or product galleries
  • Pro tip: Choose width based on your content - don't make it larger than necessary

Icons (Optional) ​

Icon Source: Add visual elements to your trigger button

  • None: Text-only button (cleanest option)
  • Icon: Built-in icons like arrows, info symbols, etc.
  • Image: Upload custom icons for brand consistency

Pro Tips for Success ​

Modal Best Practices

  • Clear purpose: Make sure the button text tells customers what they'll see
  • Essential content only: Keep modal content focused and relevant
  • Easy to close: The modal includes a close button, but keep content scannable
  • Mobile-friendly: Test your modals on mobile devices to ensure good usability

Common Mistakes

  • Too much content: Overpacked modals overwhelm users
  • Unclear triggers: Vague button text like "More Info" doesn't help customers
  • Poor organization: Use headings and spacing to make modal content easy to scan
  • Missing context: Make sure modal content makes sense on its own