Complete Documentation

📦 Installation

1. Install app from Shopify App Store
2. Authenticate with your store
3. Go to Online Store → Themes → Customize
4. Navigate to a product page
5. Add "Full Description Pro" block from Apps section
6. Save and publish

🎨 Display Modes Reference

1. Normal Mode

Standard description display with all styling applied. No special structure required.

Best for: Simple descriptions, traditional layouts

2. Tabs Mode

Converts H2 headings into horizontal tab navigation.

Requirements: Minimum 1 H2 heading in description

Best for: Multi-section products (Features, Specs, Shipping)

Styles:

• Horizontal: Traditional tab layout
• Pills: Rounded, button-like tabs
• Underline: Minimal style with active underline

3. Accordion Mode

Converts H2 headings into collapsible accordion sections.

Requirements: Minimum 1 H2 heading in description

Best for: Long descriptions, FAQ-style content

Options: Auto-open first section, custom icons, colors

4. Read More Mode

Compact view with gradient overlay and expand button.

Requirements: None (works with any description)

Best for: Very long descriptions, preserving above-fold space

Settings: Adjustable height (200-600px), custom button text

📝 H2 Structure Guide

For Tabs and Accordion modes, proper H2 structure is essential:

HTML Example:

<h2>Product Features</h2>
<p>Feature content here...</p>

<h2>Technical Specifications</h2>
<ul>
  <li>Spec 1</li>
  <li>Spec 2</li>
</ul>

<h2>Shipping Information</h2>
<p>Shipping details here...</p>

Markdown Example:

## Product Features
Feature content here...

## Technical Specifications
- Spec 1
- Spec 2

## Shipping Information
Shipping details here...

Important Notes:

• Use H2 only (not H1, H3, etc.)
• Keep tab names short (10-20 characters optimal)
• Minimum 1 H2 required for tabs/accordion
• Content between H2s becomes tab/accordion content

⚙️ All 75 Settings Reference

Product & Display (4 settings)

• Product: Select product to display
• Container Width: Standard (centered) or Full Width (edge-to-edge)
• Content Mode: Normal, Tabs, Accordion, Read More
• Empty State Text: Message when no product selected

Content Modes Style (10 settings)

• Tab Style: Horizontal, Pills, Underline
• Tab BG Color: Background color for tabs
• Tab Active BG: Active tab background
• Tab Text Color: Inactive tab text
• Tab Active Color: Active tab text
• Tab Border Color: Tab borders
• Accordion Open First: Auto-expand first section
• Accordion BG: Content background
• Accordion Header BG: Header background
• Accordion Border: Section borders

Layout & Spacing (12 settings)

• Max Width: 50-100% (for standard container)
• Margin Top: 0-80px
• Margin Bottom: 0-80px
• Padding Top/Right/Bottom/Left: 0-100px each
• Content Padding T/R/B/L: 0-60px each

Style & Effects (20 settings)

• Background Color: Main container background
• Gradient Color: Second color for gradient
• Gradient Angle: 0-360° rotation
• Border Width: 0-10px
• Border Style: Solid, Dashed, Dotted
• Border Color: Border color picker
• Border Radius: 0-50px rounded corners
• Shadow X/Y/Blur/Spread: Shadow positioning
• Shadow Color: Shadow color with opacity
• Hover Scale: None, Small (1.02), Medium (1.05)
• Hover Shadow Y/Blur: Hover shadow adjustments
• Hover Shadow Color: Shadow on hover
• Transition Speed: 0-500ms animation duration

Typography (21 settings)

• Show Title: Display custom title
• Custom Title: Title text
• Title Font Size: 16-56px
• Title Color: Title text color
• Title BG Color: Title background
• Title Font Weight: Normal (400), Bold (700)
• Title Text Transform: None, Uppercase
• Title Letter Spacing: -2 to 5px
• Title Padding T/R/B/L: 0-40px each
• Content Font Size: 12-32px
• Content Color: Text color
• Content Font Style: Normal, Italic
• Text Align: Left, Center, Justify
• Line Height: 1.0-3.0 spacing
• Content Letter Spacing: -2 to 5px

Advanced (8 settings)

• Paragraph Margin Bottom: 0-30px
• Show Divider: Bottom divider line
• Divider Height: 1-10px
• Divider Color: Line color
• Divider Margin Top/Bottom: 0-30px each
• Mobile Padding Scale: 0.5-1.5x
• Mobile Title Scale: 0.6-1.2x
• Mobile Content Scale: 0.6-1.2x

🎨 Customization Tips

Matching Your Theme:

1. Use theme editor's "Eyedropper" tool to match colors
2. Check theme's font sizes and replicate
3. Match border radius to theme's button style
4. Use similar padding/spacing as theme sections

Performance Tips:

• Use shorter transition speeds (200-300ms) for snappier feel
• Reduce mobile scales for better performance on devices
• Limit shadow blur for older devices

📱 Mobile Optimization

The app automatically adapts to mobile, but you can fine-tune:

Recommended Mobile Settings:

• Mobile Padding Scale: 0.6-0.8x (reduces padding on small screens)
• Mobile Title Scale: 0.7-0.8x (smaller titles on mobile)
• Mobile Content Scale: 0.85-0.95x (slightly smaller text)

Mobile-Specific Behaviors:

• Tabs switch to vertical stacking on narrow screens
• Touch-optimized tap targets (minimum 44px)
• Swipe gestures for tab navigation (coming soon)

🔧 Troubleshooting

See our Support Portal for detailed troubleshooting guides. → Support

🔌 Technical Details

Architecture:

• Type: Shopify Theme App Extension
• Integration: Block-based (Online Store 2.0)
• JavaScript: Vanilla JS, no dependencies
• CSS: Inline styles for maximum compatibility
• Data Storage: None (all settings in theme editor)

Browser Support:

• Chrome/Edge: Latest 2 versions
• Safari: Latest 2 versions
• Firefox: Latest 2 versions
• Mobile: iOS 12+, Android 8+

Performance:

• JS Bundle: ~8KB gzipped
• CSS: Inline (no external stylesheet)
• Render Time: <50ms on modern devices
• Dependencies: No external dependencies or API calls